AngularJS Scopes

AngularJS Scopes

• 1.
  AngularJS Scopes By: MohamedElkhodary
• 2.
  Definition What is thescope?
• 3.
  What is theScope? • In the Model-View-Controller structure, scope object is the model. • Scope is just a JavaScript object. • Both the controller and the view have access to the $scope • Scope can be used for communication between the controller and the view. • Scope object will house both the data and the functions that will be used in the view.
• 4.
  What is theScope? • Provides an execution context that is bound to the DOM element (and its children). • It is an execution context for expressions. • For example {{username}} expression is meaningless, unless it is evaluated against a specific scope which defines the username property • Scopes can watch expressions and propagate events.
• 5.
  Scope Inheritance Prototypical inheritance
• 6.
  Scope Inheritance • Scopesare arranged in hierarchical structure which mimic the DOM structure of the application. • All AngularJS apps have a $rootScope. The $rootScope is the top-most scope that is created on the DOM element that contains the ng-app directive. • All scopes are created with prototypal inheritance, meaning that they have access to their parent scopes. • By default, for any property that AngularJS cannot find on a local scope, AngularJS will crawl up to the containing (parent) scope and look for the property or method there until it reaches the $rootScope.
• 7.
  The one exception Somedirectives can optionally create an isolated scope and do not inherit from their parents.
• 8.
  Scope Inheritance • Directivesby default do not create a new scope. (i.e. Scope: false). • The following create new scopes: • ng-repeat • ng-include • ng-switch • ng-view • ng-controller • Directive with scope: true • Directive with transclude: true
• 9.
  Directives (Will becovered in details in another presentation) • Default (scope: false) • The directive does not create a new scope, so there is no inheritance here. • Directive may think it is creating a new property on the scope, when in fact it is changing an existing property. • It is not intended as reusable components. • Scope: true • The directive creates a new child scope that prototypically inherits from the parent scope. • Scope: {…} • The directive creates a new isolate/isolated scope. It does not prototypically inherit. • The directive cannot accidentally read or modify the parent scope • Best choice when creating a reusable component. • Set up two-way binding (using '=') • One-way binding (using '@') between the parent scope and the isolate scope. • '&' to bind to parent scope expressions. • Transclude: true • the directive creates a new "transcluded" child scope, which prototypically inherits from the parent scope.
• 10.
  Scope as Data-Model Let’stry a Plunker example: https://embed.plnkr.co/dbCEOw/
• 11.
  Scope Hierarchies Let’s trya Plunker example: https://embed.plnkr.co/7K6j12/
• 12.
  Retrieving Scopes fromthe DOM
• 13.
  Retrieving Scopes fromthe DOM • To examine the scope in the debugger: • Right click on the element of interest in your browser and select 'inspect element'. You should see the browser debugger with the element you clicked on highlighted. • The debugger allows you to access the currently selected element in the console as $0 variable. • To retrieve the associated scope in console execute: angular.element($0).scope() or just type $scope
• 14.
  Scope Events Propagation Let’stry a Plunker example
• 15.
  Scope Life Cycle UnderstandingAngularJS Scope Life Cycle
• 16.
  Scope Life Cycle 1.Creation 1. The root scope is created during the application bootstrap by the $injector. 2. During template linking, some directives create new child scopes. 2. Watcher registration 1. During template linking directives register watches on the scope. 2. These watches will be used to propagate model values to the DOM. 3. Model mutation 1. For mutations to be properly observed, you should make them only within the scope.$apply(). 2. Keep in mind that in most places (controllers, services) $apply has already been called for you by the directive which is handling the event. 3. An explicit call to $apply is needed only when implementing custom event callbacks, or when working with third-party library callbacks. 4. Mutation observation 1. At the end of $apply, Angular performs a $digest cycle on the root scope, which then propagates throughout all child scopes. 2. During the $digest cycle, all $watched expressions or functions are checked for model mutation and if a mutation is detected, the $watch listener is called. 5. Scope destruction 1. When child scopes are no longer needed, it is the responsibility of the child scope creator to destroy them via scope.$destroy() API. 2. This will stop propagation of $digest calls into the child scope and allow for memory used by the child scope models to be reclaimed by the garbage collector.
• 17.
  Scope Life Cycle
• 18.
  References • https://docs.angularjs.org/guide/scope • https://github.com/angular/angular.js/wiki/Understanding-Scopes •https://www.ng-book.com/p/The-Digest-Loop-and-apply/
• 19.
  Thank You