AngularJS scopes provide an execution context for expressions and allow for communication between controllers and views. Scopes are arranged hierarchically and mimic the DOM structure, with child scopes prototypically inheriting from parent scopes. Directives like ng-repeat and ng-controller create new child scopes, while others like ng-include use the parent scope. Scopes are created, register watchers, observe mutations during digest cycles, and are destroyed when no longer needed to clean up memory.

1. AngularJS Scopes
By: Mohamed Elkhodary

2. Definition
What is the scope?

3. What is the Scope?
• 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 the Scope?
• 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
• Scopes are 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
Some directives can optionally create an isolated scope and do not inherit from
their parents.

8. Scope Inheritance
• Directives by 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 be covered 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’s try a Plunker example: https://embed.plnkr.co/dbCEOw/

11. Scope Hierarchies
Let’s try a Plunker example: https://embed.plnkr.co/7K6j12/

12. Retrieving Scopes from the DOM

13. Retrieving Scopes from the 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’s try a Plunker example

15. Scope Life Cycle
Understanding AngularJS 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