Scope demystified - AngularJS
Download as PPTX, PDF1 like749 views
The document explains the concept of scope in AngularJS, detailing its lifecycle, hierarchy, and the process of creation and destruction. It describes how scopes are utilized for data binding between the model and the DOM, including methods for watching and propagating changes within the application. Key functionalities like $apply, $digest, and event propagation using $broadcast and $emit are also covered, along with performance considerations for efficient dirty checking.
Scope demystified - AngularJS
- 2. Request flow in AngularJS Module Routes Config ControllerView Directives $scope Factory Service Provider Value
- 3. Scope is an object that refers to the application model Can have properties, functions attached to it In case of AngularJS, it gets injected without a need to construct Only one root scope, for every angular application ng-app – creates the root scope of application However can have multiple scopes/child scopes Other directives, controllers in app creates these child scopes
- 5. Scope - Hierarchy When executed, the expression {{}} looks for the immediate scope available If in case the definition is not available, traces to the parent scope until reaches to the root scope This is prototypical inheritance behaviour in JavaScript
- 6. Scope – Life cycle Scope Creation Watcher Registration Model Mutation Mutation Observation Scope Destruction The root scope is created during the application bootstrap by the $injector. During template linking, some directives create new child scopes. During template linking directives register watches on the scope. These watches will be used to propagate model values to the DOM. For mutations to be properly observed, you should make them only within the scope.$apply(). Angular APIs do this implicitly, so no extra $apply call is needed when doing synchronous work in controllers, or asynchronous work with $http, $timeout or $interval services. At the end of $apply, Angular performs a $digest cycle on the root scope, which then propagates throughout all child scopes. 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. When child scopes are no longer needed, it is the responsibility of the child scope creator to destroy them via scope.$destroy() API.
- 7. Scope – DOM Scopes are attached to DOM. $scope is the data property that should be looked after 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
- 9. Scope - watchers Dirty checking the scope for property changes is a common operation in Angular. For this reason the dirty checking function must be efficient. Care should be taken that the dirty checking function does not do any DOM access, as DOM access is orders of magnitude slower than property access on JavaScript object. Dirty checking can be done with three strategies: By reference, by collection contents, and by value. The strategies differ in the kinds of changes they detect, and in their performance characteristics.
- 10. Scope – Watchers count
- 11. Scope - $watch Watching by reference (scope.$watch (watchExpression, listener)) detects a change when the whole value returned by the watch expression switches to a new value. If the value is an array or an object, changes inside it are not detected. This is the most efficient strategy.
- 12. Scope - $watch Expression that is evaluated on each $digest cycle. A change in the return value triggers a call to the listener. string: Evaluated as expression function(scope): called with current scope as a parameter. Callback called whenever the value of watchExpression changes. newVal contains the current value of the watchExpression oldVal contains the previous value of the watchExpression scope refers to the current scope Compare for object equality using angular.equals instead of comparing for reference equality. (default: false)
- 13. Scope - $watch Registers a listener callback to be executed whenever the watchExpression changes. The watchExpression is called on every call to $digest() and should return the value that will be watched. (watchExpression should not change its value when executed multiple times with the same input because it may be executed multiple times by $digest(). That is, watchExpression should be idempotent. The listener is called only when the value from the current watchExpression and the previous call to watchExpression are not equal (with the exception of the initial run, see below). Inequality is determined according to reference inequality, strict comparison via the !== Javascript operator, unless objectEquality == true (see next point) The watch listener may change the model, which may trigger other listeners to fire. This is achieved by rerunning the watchers until no changes are detected. The rerun iteration limit is 10 to prevent an infinite loop deadlock. If you want to be notified whenever $digest is called, you can register a watchExpression function with no listener. (Be prepared for multiple calls to your watchExpression because it will execute multiple times in a single $digest cycle if a change is detected.) After a watcher is registered with the scope, the listener fn is called asynchronously (via $evalAsync) to initialize the watcher. In rare cases, this is undesirable because the listener is called when the result of watchExpression didn't change. To detect this scenario within the listener fn, you can compare the newVal and oldVal. If these two values are identical (===) then the listener was called due to initialization.
- 14. Scope - $watchCollection Watching collection contents (scope.$watchCollection (watchExpression, listener)) detects changes that occur inside an array or an object: When items are added, removed, or reordered. The detection is shallow - it does not reach into nested collections. Watching collection contents is more expensive than watching by reference, because copies of the collection contents need to be maintained. However, the strategy attempts to minimize the amount of copying required.
- 15. Scope - $watch value Watching by value (scope.$watch (watchExpression, listener, true)) detects any change in an arbitrarily nested data structure. It is the most powerful change detection strategy, but also the most expensive. A full traversal of the nested data structure is needed on each digest, and a full copy of it needs to be held in memory.
- 16. Scope - $apply $apply() is used to execute an expression in angular from outside of the angular framework. For example from browser DOM events, setTimeout, XHR or third party libraries. Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches. An AngularJS $scope has a function called $apply() which takes a function as an argument. So, you simply need to put the code that changes models inside a function and call $scope.$apply() passing that function as an argument. After the $apply() function call ends, AngularJS knows that some model changes might have occurred. It then starts a digest cycle by calling another function $rootScope.$digest()―which propagates to all child scopes.
- 17. Scope - $digest After the $apply() function call ends, AngularJS knows that some model changes might have occurred. It then starts a digest cycle by calling another function $rootScope.$digest()―which propagates to all child scopes. In the digest cycle all the watchers are called to check if the model value has changed. After calling the listener functions, the digest cycle starts all over again and fires each watcher to check if any of the models have been mutated in the last loop. The digest cycle continues to loop until no model changes have been detected or it hits the maximum loop count of 10 (whichever comes first). At a minimum the $digest() cycle runs twice even if there are no model mutation in the listener functions.
- 18. Scope - $digest The cycle runs once more to make sure the models are stable and no change has been made in last loop. This is called dirty checking. If you want to get notified whenever $digest() is called, you can set up a watcher without any listener function. The first and only argument to $scope.$watch() should be the function whose return value you want to monitor. This function gets called in every digest cycle. That is why the second argument to $watch() is optional. Calling $apply() will automatically trigger a $digest on $rootScope which subsequently visits all the child scopes calling the watchers.
- 19. Scope – Events propagation Scopes can propagate events in similar fashion to DOM events. The event can be broadcasted to the scope children or emitted to scope parents.
- 20. Scope – Broadcast, Emit $scope.$broadcast(name,args) For Broadcasting Events The $broadcast() function is the same as $emit() except the event propagates downwards in the scope hierarchy to all the child scopes. The parameters list is also same as that of $emit(). Like $emit, the $scope which broadcasts the event also receives a notification (via $on) when it's broadcast.
- 21. Scope - on $scope.$on(name,handlerFunction) For Registering Listeners The $on function registers event listeners that should be called when the event occurs. The first parameter is the name of the event you are interested in. The second parameter is a callback function which gets called when the event occurs.
- 22. Scope – Broadcast, Emit, On
- 23. Scope - destroy When a scope is being destroyed a $destroy event is broadcast on the scope. You can listen for this event and perform any necessary cleanups.