AngularJS Scopes

A special object in JavaScript that is used to join the controller with the views is known as scope. The model data is contained within the scope. In case of controllers, the $scope object is used to access all the model data.

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

AngularJS is considered to consist of

  • View, which is nothing but the HTML of the page.
  • Model, which is simply the data available for the current view.
  • Controller, which consists of the JavaScript functions that is responsible for the various changes in the data.

In the above three components, the scope is the model component in AngularJS.

Basically nothing but a JavaScript object consisting of properties and methods, these are available for both the view and the controller.

 <!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<div ng-app="myApp" ng-controller="myCtrl">  
<h1>{{carname}}</h1>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
    $scope.carname = "Volvo";  
});  
</script>  
<p>The property "Hondaname" was made in the controller, and can be referred to in the view by using the {{ }} brackets.</p>  
</body>  
</html>  

						

$routeProvider

In the above example, the important points to be considered are

  • During its constructor definition, $scope is passed as the first argument to the controller.
  • $scope.message and $scope.type are two different models that have been used in the HTML page.
  • The models have been set to certain values which are reflected in the application module and their controller is shapeController.
  • In $scope we can define other functions as well.

Scope Inheritance

Scopes are controller specific. In case of nested controllers, inheritance takes place. The child controller inherits the scope of its parent controller.

<script>
   var mainApp = angular.module("mainApp", []);
   
   mainApp.controller("newController", function($scope) {
      $scope.message = "In new controller";
      $scope.type = "Shape";
   });
   
   mainApp.controller("newlyController", function($scope) {
      $scope.message = "In newly controller";
   });
	
</script>

In the above example, the important points to be considered are-

  • In newController, we have set certain values to models.
  • In the child controller named "newlyController" we have overridden a message. When we use "message" within module of controller named circleController, the message that has been overridden will be used.