Search Posts

AngularJs Best Practices

With AngularJs 1.3.x recently, There are many changes and updates to keep project good performance. Actually, It is very nice to apply new modern view and UI/UX for website  application.
As already done, It’s noted thus the best practice that use in web application project.
1. Set ng-strict-di to make sure DI use strictly (remove it when deploy the product in production server)
<div ng-app="my-app" ng-strict-di>
2. Use one-time binding if it is the proper way. It avoids to call with too much $watcher
See more at: http://blog.thoughtram.io/angularjs/2014/10/14/exploring-angular-1.3-one-time-bindings.html
3. Use angular hint that makes debugging and finding mistakes in the code base easier
See more at: http://blog.thoughtram.io/angularjs/2014/11/06/exploring-angular-1.3-angular-hint.html
4. Use an inline annotation  instead of just providing the function, you provide an array. This array contains a list of the service names, followed by the function itself.
angular .module ( 'my-app.common.controllers' , [])
.controller( 'feedbacksController' , [ '$scope', '$filter', '$http', '$modal' , '$log' , 'commonService' , 'commonConstant' ,
function ( $scope , $filter , $http, $modal , $log ,commonService,) {commonConstant
// do business here
}
OR
function commonCtrl($scope, $http) {...}
myApp.controller('commonCtrl', ['$scope', '$http', commonCtrl])
5. Directory Structure that keep your code organized when there are many developers and scaling of an application is large.
http://angularjs.blogspot.com/2014/02/an-angularjs-style-guide-and-best.html
OR
https://scotch.io/tutorials/angularjs-best-practices-directory-structure
6. Only use .$broadcast(), .$emit() and .$on() for atomic events
Read more here: https://github.com/angular/angular.js/wiki/Best-Practices
When we have this problem if use watcher try to use $timeout
https://code.angularjs.org/1.3.10/docs/error/$rootScope/inprog\
7. Always let users use expressions whenever possible
- ng-href and ng-src are plaintext attributes that support {{}}
- Use $attrs.$observe() since expressions are async and could change
Read more here: https://github.com/angular/angular.js/wiki/Best-Practices
8.  Leverage modules properly that keep controllers simple and we don’t lose times searching for files.
How to reach that:
i) In this example from Angular-Seed project https://github.com/angular/angular-seed , objects of the same nature are regrouped into a single file. This demonstrate poor code organization and will lead to humongous files in no time. Another downside of this approach is loosing useful insight provided by source control technologies like Git.
ii)cInspired from this great article wrote by Cliff Meyers: Code Organization in Large AngularJS and JavaScript Applications http://cliffmeyers.com/blog/2013/4/21/code-organization-angularjs-javascript
9. Set Config DebugEnabled that turn on/off $log.debug
myApp .config ([ '$logProvider', function ( $logProvider) {
    // change to false when run this app on production
    $logProvider . debugEnabled( false );
}]);
10. Set Global Constant
var config_data = {
    'GENERAL_CONFIG' : {
    'APP_NAME' : 'My Tool' ,
    'APP_VERSION' : '1.0.0.0' ,
    'BASE_URL' : BASE_URL ,
    'INSERT_MODAL_ACTION' : 'insert' ,
    'UPDATE_MODAL_ACTION' : 'update' ,
    'VIEW_MODAL_ACTION' : 'view'
    }
};
angular .forEach ( config_data, function ( key, value ) {
    config_module . constant( value , key );
});
11. Register module before use
When start my-app I register all needed module to compile error by angular. If  want to use any module then let’s just call implementation of it
var myApp = angular .module ( 'my-app', [
    'my-app.config'
    , 'my-app.employee'
    , 'my-app.dataCache'
    , 'my-app.common'
    , 'ui.bootstrap'
    , 'ngDragDrop'
    , 'notifications'
    , '720kb.tooltips'
 ]);
var config_module = angular .module ( 'my-app.config', []);
angular .module ( 'my-app.employee', ['my-app.employee.controllers' , 'my-app.employee.services' ]);
angular .module ( 'my-app.employee.controllers' , []);
angular .module ( 'my-app.employee.services', []);
angular .module ( 'my-app.common', ['my-app.common.controllers' , 'my-app.common.services' , 'my-app.common.directives' , 'my-app.common.filters']);
angular .module ( 'my-app.common.controllers', []);
angular .module ( 'my-app.common.services', []);
angular .module ( 'my-app.common.directives', []);
angular .module ( 'my-app.common.filters', []);
12. Cache data if can
angular .module ( 'my-app.dataCache', [])
      . factory( 'dataCache' , [ '$cacheFactory', function ( $cacheFactory) {
          return $cacheFactory( 'data-cache' );
      }])
      . constant( 'cacheKey' , {
          LIST_EMPLOYEES : 'listEmployees' ,
          LIST_EMPLOYEE_LIGHTS : 'listEmployeeLights'
      });

Leave a Reply

Your email address will not be published. Required fields are marked *