Categories: AngularJS

AngularJS Scopes

AngularJS scopes is a special object which joins controller with views. $scope object access model data in controller as it is the first argument to controller.

$scope is specifically for controller so it can inherit its parent controller also.

Basically, scope is an object which refers to the application model i.e. an execution context for AngularJs expressions. These are arranged in hierarchical structure that mimic the DOM structure of the application.

Following example will show scopes for AngularJS.

<html>
<head>
   <title>Angular Scopes</title>
</head>
<body>
   <h2>AngularJS Scopes</h2>
   <div ng-app="myApp" ng-controller="parentController">
      <p>{{msg}} <br/> {{base}} </p>
      <div ng-controller="childoneController">
         <p>{{msg}} <br/> {{base}} </p>
      </div>
      <div ng-controller="childtwoController">
         <p>{{msg}} <br/> {{base}} </p>
      </div>
   </div>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   <script>
      var myApp= angular.module("myApp", []);

      myApp.controller("parentController", function($scope) {
         $scope.msg = "In parent controller";
         $scope.base = "Parent";
      });

      myApp.controller("childoneController", function($scope) {
         $scope.msg = "In child one controller";   
      });

      myApp.controller("childtwoController", function($scope) {
         $scope.msg = "In child two controller";
         $scope.base = "Child two";
      });

   </script>
</body>
</html>

For more documentation click here.

Jacob Frazier

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.