Understanding scope in AngularJS and its applictaions

1. Scope in AngularJS
To Duc Thien - June 23, 2016

2. Contents
• Overview
• JavaScript prototypal 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' 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}}

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 life cycle
• Creation
• Watcher registration
• Model mutation
• Mutation observation
• Destruction

7. 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}
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
Normal prototypal 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