Scope in AngularJs

Scope in AngularJs

• 1.
  Scope in AngularJS ToDuc Thien - June 23, 2016
• 2.
  Contents • Overview • JavaScriptprototypal inheritance • Angular scope inheritance • Q&A
• 3.
  Overview: Scopes What's scopes? •The source of truth for application state • Execution context for expression • Map mimics DOM structure • Agency to watch expression and propagate events
• 4.
  Overview: Scopes Scopes' mainfeatures: • Observe model mutations ($watch) • Propagate model changes to whole application ($apply) • Can be nested to limit access from other components • Provide execution environment to evaluate expressions E.g: {{2 + 3}}
• 5.
  Overview: Scope $rootScope and$scope • $rootScope: global context in Angular apps Parents of all $scope object, initialize with Angular application <div ng-app="App"></div> • $scope: peculiar data model object Connection between controller and view angular.module('App', []).controller('AppController', function($scope) {...}); angular.module('App', []).directive('myDirective', function(){ return { controller: function($scope) { ... }, link: function(scope, element, attr) { ... } } });
• 6.
  Overview: Scope Scope lifecycle • Creation • Watcher registration • Model mutation • Mutation observation • Destruction
• 7.
  Javascript prototypal inheritance functionHuman(name) { this.name = name; } Human.prototype.say = function() { console.log('I am an' + this.name); } var myDad = new Human('Billionaire'); myDad.money = 1000000; myDad.cars = ['BMW X6', 'RR Phantom', 'Maybach']; myDad.houses = {hanoi: 200, saigon: 500}; var me = Object.create(myDad); me.money = -50000; me.cars[1] = "Honda Super Dream"; me.houses.hanoi = 100; Human myDad Cars: ['BMW X6', 'RR Phantom','Maybach'] Money: 1000000 houses: {hanoi: 200, saigon: 500} me Money: -50000
• 8.
  Javascript prototypal inheritance •To find a property in child object • Searching in child object • Not found -> looking in inherited object • New properties of child object will hide/shadows parent property with the same name • If objects are found in parent, the property will be updated on original object
• 9.
  Angular scope inheritance Normalprototypal scope inheritance in AngularJS • Ng-controller • Ng-include • Ng-switch • Directive with scope: true
• 10.
  Angular scope inheritance Ng-repeat •Normal prototypal inheritance with copy/assignment • Each iteration create new child scope • Child scopes get new properties childScope = scope.$new(); // child scope prototypically inherits from parent scope ... childScope[valueIdent] = value; // creates a new childScope property
• 11.
  Angular scope inheritance Directive- isolated scope (scope: {...}) • Not prototypal inheritance • Various option to access parent scopes through attributes: • '=': two-way data binding • '@': one-way data binding • '&': bind to parent expression
• 12.
  Angular scope inheritance Directive- transcluded scope (transcluded: true) • Beside of isolated scope, new transcluded scope is created • New transcluded scope is inherited from parent scope • Avoid child scope hiding/shadowing parent scope's properties • Both isolated scope and transcluded scope can access to parent scope through $parent
• 13.
  References • https://docs.angularjs.org/guide/scope • https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript- prototypal-inheritance •ng-book - The in-depth, complete, and up-to-date book on Angular. Become an AngularJS expert today.
• 14.
  Thank you