Sunday, February 12, 2017

AngularJS - Scopes

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.
Labels:

1 comment:

Subscribe to: Post Comments (Atom)