Microsoft Dot Net Master: AngularJS

Monday, March 9, 2015

AngularJS - Scopes

Scope is a special JavaScript object that connects controller with views. Scope contains 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>

The following important points are considered in above example:

The $scope is passed as first argument to controller during its constructor definition.
The $scope.message and $scope.type are the models which are used in the HTML page.
We assign values to models that are reflected in the application module, whose controller is shapeController.
We can define functions in $scope.

Scope Inheritance

Scope is controller-specific. If we define nested controllers, then the child controller inherits 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>

The following important points are considered in above example:

We assign values to the models in shapeController.
We override message in child controller named circleController. When message is used within the module of controller named circleController, the overridden message is used.

Example

The following example shows use of 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="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/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>

Output

Open the file testAngularJS.htm in a web browser and see the result.