AngularJS

Mercury Workshop Venue

Kris Ivanov @CraftTek

www.CraftTek.com

12/11/2015

Agenda

  • Organizing your application
  • AngularJS best practices
  • Communication between directives
  • Change notifications and subscriptions
  • Q & A

Organizing your application

Organizing your application cont.

AngularJS best practices

  • Use attributes of an object rather then raw objects when referencing in view bindings
  • Keep controllers as slim as possible
  • No DOM manipulation in controllers, use directives
  • Use ControllerAs option to avoid $scope injection and clean
  • Prefer using controller functions
  • Use self-invoking function to keep off the global scope
  • Prefix custom directives to avoid collisions
  • Clean event bindings using $destroy , watchers are automatically cleared for each Scope Object destruction
  • Use promises rather then call back functions for async

AngularJS best practices CONT.

  • Don't abuse watchers, beware of max loop count of 10 for $digest iteration cycles
  • Use debugInfoEnabled method of $compileProvider to remove debug information of DOM elements
  • Identify injected parameters, avoid minification issues
  • Avoid complex expressions in views, use controller functions
  • Defer business logic to services
  • Prefer using isolated scopes to avoid scope inheritance, beware of single isolated scope per element
  • Good test coverage of critical functionality

Communication between directives

  • Eventing using $emit, $broadcast, and $on
  • Service injection with callback functions
  • Controller injection with require

Communication between directives cont.

var app = angular.module('myApp', []);

app.directive('counter', function () {
    return {
        scope: {},
        controller: function ($scope) {
            $scope.counter = 0;
            
            this.add = function () {
                $scope.counter++;
            };
            
            this.subtract = function () {
                $scope.counter--;
            };
        },
        link: function (scope, element) {
        }
    };
});
app.directive('adder', function () {
    return {
        require: 'counter',
        link: function (scope, element, attrs,
                        counterCtrl) {
            counterCtrl.add();
        }
    };
});

app.directive('subtractor', function () {
    return {
        require: 'counter',
        link: function (scope, element, attrs,
                        counterCtrl) {
            counterCtrl.subtract();
        }
    };
});

Change notifications and subscriptions

  • Change in views just works via Data Binding
  • $observe method of Attribute Object
    • only used in Directives
    • detects changes of the interpolated attribute value
    • invokes callback function
    • use $eval function of Scope Object to convert to object
    • returns de-register function
  • $watch method of Scope object
    • watches expression or function
    • invokes callback function
    • can do deep equality check
    • use $watchGroup for collection of expressions
    • use $watchCollection for shallow properties of object
    • returns de-register function

Change notifications and subscriptions cont.

  • $emit, $broadcast, and $on methods of Scope Object
    • $emit dispatches an event up the scope tree
    • $broadcast dispatches an event down the scope tree
    • both pass arguments object with the event
    • both return Event Object
    • can be used with $rootScope
    • $on listens to dispatched events
    • returns de-register function
  • Build-in events, e.g. $destroy
    • using $broadcast on current scope when destroying

Thank you

Q & A

Mercury Workshop Venue - AngularJS

By Kris Ivanov

Made with Slides.com

Mercury Workshop Venue - AngularJS

  • 1,096

More from Kris Ivanov