Post
Ask Question

AngularJs: Controller and $scope

My previous article exlained the basics of AngularJs, in other words an introduction to AngularJS. Here we will try to make you understand the “Controller” and “$scope”. The Controller is a JavaScript object to control the flow of data in the application. It is defined by the ng-controller directive. It accepts $scope as a parameter that refers to the current application. The “ng-controller” attribute tells AngularJS what controller should be used with a view. In the following example the <div> would use “CtrlHello”.

  1. <body ng-app="">  
  2. <div ng-controller="CtrlHello" >  
  3.     <h2>Hello {{msg}} !</h2>  
  4. </div>  
  5. <script>  
  6.     function CtrlHello($scope) {  
  7.         $scope.msg = "AngularJS";  
  8.     }   
  9. </script>  
  10. </body>  
The parameter $scope is the application object. We can also use an object with $scope as in the following:
  1. <body ng-app="">  
  2. <div ng-controller="CtrlHello" >  
  3.     <h2>{{msg}} {{emp.name}}! your employee no is :{{emp.EmpNo}}..  
  4. </h2>  
  5. </div>  
  6. <script>  
  7.     function CtrlHello($scope) {  
  8.         $scope.emp.name = "Ratnesh";  
  9.         $scope.emp.EmpNo = "310516";  
  10.         $scope.emp.msg = "Hello";  
  11.     }   
  12. </script>  
  13. </body>  
Controllers should contain only the business logic needed for a single view. We can declare a number of controllers and can nest them within each other if needed. The ng-controller directive creates a new child scope. We get a hierarchy of scopes that inherit from each other. So there is a root scope and the root scope has one or more child scopes.

In the following example we have created three controllers with ng-controller. The BaseController has one child, ChildController, and it has a child controller SuperChildController. We have set the first name, middle name and last name in the scope of these controllers respectively and attempt to get the value in each of the controller's views. We can see that the $scope that each Controller can access is the properties defined by its own Controller and the Controllers higher up the hierarchy.
  1. <body ng-app="">  
  2. <div  ng-controller="BaseController" style="border:solid 1px black; padding:5px">  
  3.     Name : {{FirstName}} {{MiddleName}}  {{LastName}}  
  4.     <div ng-controller="ChildController" style="border:solid 1px black; padding:5px">  
  5.         Name : {{FirstName}}  {{MiddleName}} {{LastName}}  
  6.    
  7.         <div ng-controller="SuperChildController" style="border:solid 1px black; padding:5px">  
  8.             Name : {{FirstName}}  {{MiddleName}}  {{LastName}}  
  9.    
  10.         </div>  
  11.     </div>  
  12. </div>  
  13.    
  14. <script>  
  15.   
  16. function BaseController($scope){$scope.FirstName='Ratnesh';}  
  17.   
  18. function ChildController($scope){$scope.MiddleName='Kumar';}  
  19.   
  20. function SuperChildController($scope){$scope.LastName='Singh';}  
  21.   
  22. </script>  
  23.   
  24. </body>  
 


Similar Articles