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 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.
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 assign values to models that are reflected in the application module, whose controller is shapeController.
We can define functions in $scope.
We can define functions in $scope.
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 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.
We override message in child controller named circleController. When message is used within the module of controller named circleController, the overridden message is used.
The following example shows use of all the above mentioned directives.
<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>
Open the file testAngularJS.htm in a web browser and see the result.
{{message}}  {{type}} 
{{message}}  {{type}} 
{{message}}  {{type}} 

    16 Lectures 
     1.5 hours 

 Anadi Sharma

    40 Lectures 
     2.5 hours 

 Skillbakerystudios
 Print
 Add Notes
 Bookmark this page