Scope in AngularJs
Transcript of Scope in AngularJs
Scope in AngularJSTo Duc Thien - June 23, 2016
Contents
• Overview• JavaScript prototypal inheritance• Angular scope inheritance• Q&A
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
Overview: Scopes
Scopes' main features:• 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}}
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 objectConnection between controller and viewangular.module('App', []).controller('AppController', function($scope) {...});angular.module('App', []).directive('myDirective', function(){ return { controller: function($scope) { ... }, link: function(scope, element, attr) { ... } }});
Overview: Scope
Scope life cycle• Creation• Watcher registration• Model mutation• Mutation observation• Destruction
Javascript prototypal inheritance
function Human(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}
meMoney: -50000
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
Angular scope inheritance
Normal prototypal scope inheritance in AngularJS• Ng-controller• Ng-include• Ng-switch• Directive with scope: true
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
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
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
References
• https://docs.angularjs.org/guide/scope• https://github.com/angular/angular.js/wiki/Understanding-Scopes#ja
vascript-prototypal-inheritance• ng-book - The in-depth, complete, and up-to-date book on Angular.
Become an AngularJS expert today.
Thank you