top button
Flag Notify
Site Registration

Explain the concept of scope hierarchy?

+4 votes
338 views

How many scope can an application have?

posted Dec 18, 2014 by Merry

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

Each angular application consist of one root scope but may have several child scopes.

As child controllers and some directives create new child scopes, application can have multiple scopes.

When new scopes are formed or created they are added as a children of their parent scope.

Similar to DOM, they also creates a hierarchical structure.

Scope is a special javascript object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object.

<script>
   var mainApp = angular.module("mainApp", []);

   mainApp.controller("shapeController", function($scope) {
      $scope.message = "In shape controller";
      $scope.type = "Shape";
   });
</script>

Following are the important points to be considered in above example.

$scope is passed as first argument to controller during its constructor definition.

$scope.message and $scope.type are the models which are to be used in the HTML page.

We've set values to models which will be reflected in the application module whose controller is shapeController.

We can define functions as well in $scope.

Scope Inheritance

Scope are controllers specific. If we defines nested controllers then child controller will inherit the scope of its parent controller.

<script>
   var mainApp = angular.module("mainApp", []);

   mainApp.controller("shapeController", function($scope) {
      $scope.message = "In shape controller";
      $scope.type = "Shape";
   });

   mainApp.controller("circleController", function($scope) {
      $scope.message = "In circle controller";
   });

</script>

Following are the important points to be considered in above example.

We've set values to models in shapeController.

We've overridden message in child controller circleController. When "message" is used within module of controller circleController, the overridden message will be used.

Example

Following example will showcase all the above mentioned directives.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Forms</title>
   </head>

   <body>
      <h2>AngularJS Sample Application</h2>

      <div ng-app = "mainApp" ng-controller = "shapeController">
         <p>{{message}} <br/> {{type}} </p>

         <div ng-controller = "circleController">
            <p>{{message}} <br/> {{type}} </p>
         </div>

         <div ng-controller = "squareController">
            <p>{{message}} <br/> {{type}} </p>
         </div>

      </div>

      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

      <script>
         var mainApp = angular.module("mainApp", []);

         mainApp.controller("shapeController", function($scope) {
            $scope.message = "In shape controller";
            $scope.type = "Shape";
         });

         mainApp.controller("circleController", function($scope) {
            $scope.message = "In circle controller";
         });

         mainApp.controller("squareController", function($scope) {
            $scope.message = "In square controller";
            $scope.type = "Square";
         });

      </script>

   </body>
</html>

Result

Open textAngularJS.htm in a web browser. See the result.

In shape controller 
Shape

In circle controller 
Shape

In square controller 
Square
answer Jan 25, 2017 by Manikandan J
...