Giters

RajaJaganathan / angularjs-best-practices

My favourite tips for angularjs developement best practices

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Angularjs-best-practices

Angularjs General Guideline:

  • Use always controller as syntax and never pollute any value/property on $scope/scope property.

  • Don't pollute any variables and methods on controller vm and $scope which is not used from template/views.

  • Always use bindToController when using isolate scope for directive api.

  • Always enable ng-strict-di so that minification won't surprise at last moment.

  • Always use component instead of directive whenever possible. Following sceneraio are not fit in component api, ie, DOM manipulatation, Dynamic template compilation, restrict to attrs/class

        angular.component('counter', {
            bindings: {
                count: '<'
            },
            controller: function() {}
        }

  • Always use controller as syntax like at $scope.$watch(vm.foo, function(){});

  • In order to avoid number of variable declaration, group by features by using object literal syntax.

        var firstName = 'John';
        var lastName = 'Doe';
        var age = 30;
        var person = {
                firstName:'John',
                lastName:'Doe',
                age:30
        };

  • Use directive controller as API for directive.

  • At any point time, controller should not aware of any business logic and should be thin as much as possible.

  • Angular services such as Factory/Service/Provider/Const/Value should follow single responsility priniclple.

  • Controller should not be shared with any factory, service and even other controller etc..,

  • Never use $parent().$parent() it hard to test it will break if we use ng-if, ng-include, ng-switch since it will introduce new scope.

  • Use ng-message-exp for dynamic validation fields

  • Use Angular Batarang and ng-inspector browser plugin for improve our development productivity.

  • Filter angular@1.3: Store filtered result with help of 'as' syntax in ng-repeat like <div ng-repeat="person in data | filter:query as results"></div> {{results.length}}

Angular 1.x Performance Guidelines:

  • Always use one way binding by using ng-bind directive, binding expression like
    {{::variableName}}
    
    ng-class="::{'btn-success':vm.isSucceed}"
    
    ng-repeat="item in ::items"

  • Avoid angular filter expression as much as possible. Instead invoke filter in controller. Costly operation because every single digest cycle filter invoked twice.

  • Use ng-if instead of ng-show/ng-hide whenever possible, angular does dirty checks for hidden elements too.

  • Always use 'track by' expression with ng-repeat to improve a performance. Use $index when collection has no unique fields.

        <div ng-repeat="model in collection track by model.id">
          {{model.name}}
        </div>
        
        <div ng-repeat="item in dataSource track by $index">  
        </div>

  • Use $watchCollection instead $watch with deep comparision flag whenever possible.

  • Use ngModelOptions and also inherited for all form fields so defer the digest cycle.

        ng-model-options={
          updateOn: 'default blur',
          debounce: { 'default': 500, 'blur': 0 }
        };
  • Use $destroy to remove the event listeners from DOM and scope.
        scope.$on("$destroy", function() {
            element.off('click', windowClick);    
            scope.$off('modalOpened',onModelOpened);
       });
  • Use component instead of directives with one way data binding.
        angular.component('counter', {
            bindings: {
                count: '<'
            },
            controller: function() {}
        }

  • Use $digest methods instead of $apply when ever possible reason behind that when don't want trigger all digest cycle to up $rootScope.

  • Multiple XHR call that triggers multiple digest cycle to avoid optimize this cycle

    app.config(function ($httpProvider) {
      $httpProvider.useApplyAsync(true);
    });
    app.config(function ($compileProvider) {
      $compileProvider.debugInfoEnabled(false);
    }]);
  • Avoid using $emit, $broadcast on $scope/$rootScope instead use event emitter libs such as Postal, Event Emitter, etc.
app.const('appChannel', new EventEmitter());

About

My favourite tips for angularjs developement best practices