Open In App

Explain the concept of scope hierarchy

Improve
Improve
Like Article
Like
Save
Share
Report

The Scope is used to combine developer and user. It consists of data and code which can be accessed according to the hierarchy. The Scope is used to make the variables available according to the demands. Any angular application can have only 1 root scope and a large number of child scopes. The Rootscope is created during the creation of the angular application, whereas the child scopes can be created by the directives. Once a child scope is created, it can inherit the values from its parent scope. Thus a parallel tree terminology of parent and child scope is created. The scope is defined using the $ sign.

This tree defines the hierarchy of the scopes and accordingly, it gets executed. The Rootscope’s variables and values are made available throughout the application whereas a child scope only inherits the properties of the parent scope. Also, a parent scope cannot access a child scope’s values and parameters. The ng-app and ng-controller Directives are used while defining these scopes, the ng-controller Directive is used to get control over the data, whereas the ng-app Directive indicates the location of rootscope. Directives are in charge of creating multiple child scopes.

This pair of parent and child scope is used to diverge a complex application into an easier one, although, it comes up with a lot of security risks. An angular application can create plenty of scopes [parent/child excluding the rootscope] as per the functionality. The scopes that are present in the angular application are created using Prototypal inheritance. Thus, this allows the scopes to access all the functions of their parent scopes. For accessing the main functions of the angular application, you need to visit the root scope. This is by default.

The scope continues until the expression or the function is evaluated and then it is sent to the parent scope and at the last, it goes to the root scope. In this way, the hierarchy continues from scopes from the different levels to the root scope. The rootscope is created in the application using the ng-app directive by injecting the directive into the HTML element present. Thus, all the scopes that are created using the controllers and the directives would inherit all the functions due to Prototypal inheritance. When we attach the ng-controller to the application a child scope is created. This child scope will access all the properties of the rootscope.

Syntax: In this, the parent and child scope is shown with the linking of the ng-app and ng-controller directives.

<div>
<div ng-app="parentController">
 ...  parent element
 <div ng-controller="childController">
    ...  child element
 </div>
</div>

Importance of Scope Hierarchy:

  • The Scope hierarchy is used to propagate the changes in the DOM elements in the digest() method.
  • Scope hierarchy is used to restrict the usage of code as per the inheritance levels.
  • It allows the developers to make changes according to context, for instance, throughout the application or at some part of the code.
  • It allows restricting the access of users at particular phases of the application
  • It increases the maintainability of the application as the code can be divided according to the requirement.
  • It provides the ease to nest the scopes as per the functionality.  

Approach 1: In this approach, we have the hierarchy of the Director, Manager, and Employee of the company. In this, Director is the main and is the rootscope in an application. The Manager is the parent scope and the child scope of the Director. The Employee is the child scope of the Manager.

Example: In this example, the employee name is the child scope that will inherit the services of the director, as it is the root scope. Since the services declared in rootscope becomes global to the angular application. In the below code example, the $scopedirectorname, $scopemanagername, and $scopeemployeename are the models which are used to print messages on the display screen.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>AngularJS Scope Example</title>
    <script src=
    </script>
  
    <script>
        var app = angular.module('app', []);
        app.controller('CountryController', ['$scope', function ($scope) {
            $scope.directorName = 'Carl Webster';
  
        }]);
  
        app.controller('StateController', ['$scope', function ($scope) {
            $scope.managerName = 'Paula George';
  
        }]);
  
        app.controller('CityController', ['$scope', function ($scope) {
            $scope.employeeName = 'Alex Mathew';
        }]);
    </script>
</head>
  
<body>
    <h1>GeeksForGeeks </h1>
    <h2>
        Concept of scope hierarchy
    </h2>
    <div ng-app="app" 
         ng-controller="CountryController">
        Director's Name : {{ directorName }}
        <div ng-controller="StateController">
            Manager's Name : {{ managerName }}
            <div ng-controller="CityController">
                Employee's Name : {{employeeName }}
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

 

Approach 2: In this approach, we can see that the rootscope is created which is the businessman and the other child scopes are created which are the entrepreneur and student. Both the child scopes would inherit the methods from the functions. The ng-app and ng-controller directives are used.

Example: This is another example that illustrates the implementation of Scope Hierarchy in AngularJS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
</head>
  
<body ng-app="myNgApp">
    <h1>GeeksForGeeks</h1>
    <h3> Scope hierarchy </h3>
    <div ng-controller="parentController">
        Controller Name: Alex Sebastian <br />
        Message: {{message}} <br />
        <div style="margin:10px 0 10px 20px;" 
             ng-controller="childController">
            Controller Name: Poot Sebastian <br />
            Message: {{message}} <br />
        </div>
    </div>
  
    <div ng-controller="siblingController">
        Controller Name: Poppy Sebastian <br />
        Message: {{message}} <br />
    </div>
    <script>
        var ngApp = angular.module('myNgApp', []);
  
        ngApp.controller('parentController',
            function ($scope, $rootScope) {
                $scope.controllerName = "parentController";
                $rootScope.message = "Hello World!";
            });
  
        ngApp.controller('childController',
            function ($scope) {
                $scope.controllerName = "childController";
            });
  
        ngApp.controller('siblingController',
            function ($scope) {
            });
    </script>
</body>
  
</html>


Output: From the output, we can see that the rootscope’s message “Hello World!” is inherited and displayed by all other scope presents in the code. Thus, a childscope can inherit rootscope but vice versa is not applicable. While any part of the code gets executed, then its $scope parameter is executed first by the controller and then the message and other necessary actions are executed.

 

Benefits of using scope hierarchy: 

  • It helps to implement the code reusability.
  • Due to the implementation of rootscope, code can be inherited by various controllers.
  • Since rootscope cannot inherit childscope, hence the parameters which are to be kept restricted from other users can be placed inside a childscope.

Difference between the Rootscope and the Childscope:

Rootscope

Childscope

An application can have 1 rootscope.

An application can have multiple childscope.

It is declared using “$rootscope”.

It is declared using $scope.

It cannot access childscope.

It can access rootscope.

Rootscope is created when the application approaches the ng-app directive.

Childscope is created according to functionality and requirement.



Last Updated : 10 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads