AngularJS Scopes

In the last few articles we have been discussing controllers, models and views. Since AngularJS is based on MVC architecture, the responsibility of controllers is to bind data between a model and a view. As discussed earlier, model part of MVC stores all of the application data. There are three ways to initialize a data model: via “ng-init”, via “ng-mode” and via $scope object inside the controller. We have seen the first two methods in detail in the previous article. This article explains AngularJS scopes in detail.

$Scope is an AngularJS object used for biding between JavaScript controller and HTML view. It is available in both controller as well the view. $Scope contains methods and properties like any other object. Whenever you create a new controller, you pass $scope as parameter. Inside the controller you can create model via the $scope object. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
    
          <div ng-app="newApp" ng-controller="newCtrl">

        <h3>{{student}}</h3>

        </div>

        <script>
        var app = angular.module('newApp', []);

        app.controller('newCtrl', function($scope) {
            $scope.student = "Michel";
        });
        </script>

</body>
</html>

Download the code Try the code

Take a look at the above code. It might look familiar to you. However, I will explain this code from the perspective of scope this time. The above script contains a controller “newCtrl”. Inside the controller we creaate a new string variable “student” and assign it some value. Now, come to the div section which contains the view. Since, this view is bound to ‘newCtrl’ controller, therefore all the values in the $scope of this controller are accessible here. Therefore in h3 headings, we displayed the value of “student” variable via AngularJS expression.

Scope Inheritance

AngularJS Scopes are inheritable. For instance if we have nested scopes the child scope will automatically inherit the scope of the parent. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
    
     <div ng-app = "VehicleApp" ng-controller = "VehicleController">
         <p>{{text}} <br/> {{type}} </p>
         
         <div ng-controller = "CarController">
            <p>{{text}} <br/> {{type}} </p>
         </div>
         
         <div ng-controller = "BikeController">
            <p>{{text}} <br/> {{type}} </p>
         </div>
			
      </div>
		
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
      <script>
         var mainApp = angular.module("VehicleApp", []);
         
         mainApp.controller("VehicleController", function($scope) {
            $scope.text = "This is vehcicle Controller";
            $scope.type = "Vehicle";
         });
         
         mainApp.controller("CarController", function($scope) {
            $scope.text = "This is car controller";
         });
         
         mainApp.controller("BikeController", function($scope) {
            $scope.text = "this is bike controller";
            $scope.type = "Bike";
         });
			
      </script>

</body>
</html>

Download the code Try the code

Take a look at the script section of the above code. Here we have three controllers: Vehicle, Car and Bike. The vehicle controller has two variables in its model i.e. text and type. Car has one variable text. Bike again has two variables text and type. Now come to the view section. Here the “VehicleController” is bound to the outer div. “CarController” and “BikeController” has been nested inside the “VehicleController”. Now, if you display “text” and type outside the nested controller, the text and type of VehicleController will be printed. However, if you display the text and type inside the “CarController”, its text will be printed, but type variable will contain value of the outer “VehicleController”. This is because “CarController” only overrides the “text” variable. It inherits the “type” variable from the parent controller.

<<< AngularJS ModelsAngularJS Filters >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .