Everything about angular: - conventions - rules - snippets

angular-convention.md

Angular uses spinal-case for its custom attributes and camelCase for the corresponding directives which implement them

best practices: https://github.com/johnpapa/angular-styleguide

Rules:

• Each feature directory (https://github.com/johnpapa/angular-styleguide#style-y121) also contains feature.shared.js file (customer.shared.js, supplier.shared.js) to share code between another files in same feature directory. If code (functions: calculating formular, ...) is used between feature directory, put it to UI service.
• component directory contains directives and modal or template html (<script id="error-list.html" type="text/ng-template"></script> (maybe separating it to templates directory. I haven't decided it)
• Services just take care model (processing received data from server before return to controller), don’t do anything relates to ui (html)
• Exception: UI service is using to share code, shared data relates to UI (data is used to be exchanged between views, directives, controllers)
• Try to using function instead of comparation in html template. Eg: I want to show a element when logged user is customer

<!-- Don't. Because code like that (comparation) will appear everywhere -->
<a href ng-if="user.role=='customer'">Log out</a>

<!--  Recommended.  -->
<a href ng-if="Account.isCustomer()">Log out</a>

Account is factory (service). Even your system has many roles (10 roles: customer, VIP, admin, ...), try to creating 10 corresponding functions (I know it's bored) but comparation will appear everywhere, you will be exhausted when need to change condition

angular-snippets.md

• Add data into <select>. vm.data = [{id:'', name:''}, {id:'', name:''}];

<select class="form-control" ng-model="vm.data.selected_item"
        ng-options="option.name for option in vm.items track by option.id">
</select>

id-parameter-in-$stateProvider.md

Always naming object_id (with full meaning) parameter when defining states in $stateProvider instead of id even only one parameter. Example:

• Main object is directory, url will be /directory/{directory_id:int} instead of /directory/{id:int}
• Main object is file, url will be /directory/{directory_id:int}/file/{file_id:int} instead of /directory/{directory_id:int}/file/{id:int}

Why don't using id to refer to main object? Because the convention (javascript) should similar with php convention. Although id with implicit meaning help implement shared code easier but reader will don't understand id belongs to which object if don't find down more code.