Understanding AngularJS Controllers and scope inheritance with example

Understanding AngularJS Controllers and scope inheritance with example

In this post we will give you information about Understanding AngularJS Controllers and scope inheritance with example. Hear we will give you detail about Understanding AngularJS Controllers and scope inheritance with exampleAnd how to use it also give you demo for it if it is necessary.

Understanding AngularJS Controllers and scope inheritance with example

Controllers are used to basically control the data in any MVC pattern application, In same way with AngularJS Controller control the flow of data in the application.

Controllers in AngularJS is attached to the DOM by using ng-controller directive.

Never use controllers to manipulate DOM because as per MVC standard controllers should handle only business logic.

You can follow the approach of AngularJS’s databinding feature in your application to synchronize data automatically between model and view components.

A controller in AngularJS is defined by a JavaScript constructor function and when controller is attached with DOM by using ng-controller directive then it will instantiate a new object of controller and a new child scope($scope) will be created.

I here let you know about scopes What is scope is nothing only hold the Model data to be passed into view. In simple word it is an object that uses two way data binding to bind model data with view.

Let’s go with simple example to understand about controllers and their work :

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4. <title>Understanding AngularJS Controllers</title>
  5. <script type="text/javascript"
  6.     src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-controller="myController">
  10. Welcome to {{ myName }}
  11. </div>
  12. <script type="text/javascript">
  13. angular.module("myApp",[]).controller("myController",function($scope){
  14. $scope.myName='onlinecode';
  15. });
  16. </script>
  17. </body>
  18. </html>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Understanding AngularJS Controllers</title>
<script type="text/javascript" 
	src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
 Welcome to {{ myName }}
</div>
<script type="text/javascript">
angular.module("myApp", []).controller("myController", function($scope) {  
   $scope.myName='onlinecode';
});
</script>
</body>
</html>

You can see in above example, application is defined in AngularJS by using ng-app=”myApp”.

Using ng-controller you can define controllers in AngularJS and myController is JavaScript function and it invoke a $scope object.

Using $scope object we bind the string ‘onlinecode’ with myName and this property is now bound to the template.


Another Example: Adding Behavior to a Scope Object

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4. <title>Understanding AngularJS Controllers</title>
  5. <script type="text/javascript"
  6.     src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-controller="SquareController">
  10. Square of <input ng-model="num"> is equals {{square(num)}}
  11. </div>
  12. <script type="text/javascript">
  13. var app = angular.module('myApp',[]);
  14. app.controller('SquareController',['$scope',function($scope){
  15. $scope.square =function(value){return value * value;};
  16. }]);
  17. </script>
  18. </body>
  19. </html>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Understanding AngularJS Controllers</title>
<script type="text/javascript" 
	src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div ng-controller="SquareController">
  Square of <input ng-model="num"> is equals {{ square(num) }}
</div>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('SquareController', ['$scope', function($scope) {
  $scope.square = function(value) { return value * value; };
}]);
</script>
</body>
</html>

ng-model directive is used to bind the value of input field to a variable.

And call square method in an Angular expression in the template/view and add behavior to the scope $scope object by adding this method.


Call Controller Method on ng-click

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4. <title>Understanding AngularJS Controllers</title>
  5. <script type="text/javascript"
  6.     src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-controller="SquareController">
  10. <input ng-model="num"> Square of {{ num }} is equals {{total}}
  11. <button ng-click="square()">Square</button>
  12. </div>
  13. <script type="text/javascript">
  14. var app = angular.module('myApp',[]);
  15. app.controller('SquareController',['$scope',function($scope){
  16. $scope.num =5;
  17. $scope.square =function(){ $scope.total= $scope.num * $scope.num;};
  18. }]);
  19. </script>
  20. </body>
  21. </html>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Understanding AngularJS Controllers</title>
<script type="text/javascript" 
	src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div ng-controller="SquareController">
 <input ng-model="num">  Square of {{ num }} is equals {{total}}
 <button ng-click="square()">Square</button>
</div>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('SquareController', ['$scope', function($scope) {
 $scope.num = 5;
  $scope.square = function() { $scope.total= $scope.num * $scope.num; };
}]);
</script>
</body>
</html>

ng-click directive allow you to add custom behavior when any element is clicked and in above example i use ng-click to binds the click event on the button to get square value entered in input box so whenever button is clicked, the square method on $scope will be called.


Scope Inheritance Example

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4. <title>Understanding AngularJS Controllers</title>
  5. <script type="text/javascript"
  6.     src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div class="aboutme">
  10. <div ng-controller="FirstController">
  11. <p>Hi, I am {{name}} and my age {{age}}</p>
  12. <div ng-controller="SecondController">
  13. <p>Hi, I am {{name}} and my age {{age}}</p>
  14. <div ng-controller="ThirdController">
  15. <p>Hi, I am {{name}} and my age {{age}}</p>
  16. </div>
  17. </div>
  18. </div>
  19. </div>
  20. <script type="text/javascript">
  21. var app = angular.module('myApp',[]);
  22. app.controller('FirstController',['$scope',function($scope){
  23. $scope.name='Ajay';
  24. $scope.age ='25';
  25. }]);
  26. app.controller('SecondController',['$scope',function($scope){
  27. $scope.name='Vikash Kumar';
  28. }]);
  29. app.controller('ThirdController',['$scope',function($scope){
  30. $scope.name='Vikash Verma';
  31. $scope.age ='32';
  32. }]);
  33. </script>
  34. </body>
  35. </html>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Understanding AngularJS Controllers</title>
<script type="text/javascript" 
	src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div >
  <div ng-controller="FirstController">
    <p>Hi, I am {{name}} and my age {{age}}</p>

    <div ng-controller="SecondController">
       <p>Hi, I am {{name}} and my age {{age}}</p>

      <div ng-controller="ThirdController">
         <p>Hi, I am {{name}} and my age {{age}}</p>

      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('FirstController', ['$scope', function($scope) {
  $scope.name = 'Ajay';
  $scope.age = '25';
}]);
app.controller('SecondController', ['$scope', function($scope) {
  $scope.name = 'Vikash Kumar';
}]);
app.controller('ThirdController', ['$scope', function($scope) {
  $scope.name = 'Vikash Verma';
  $scope.age = '32';
}]);
</script>
</body>
</html>


Output :

You can see in above example how we nested three ng-controller in template:

  • The FirstController that contains name and age both properties.
  • SecondController that contains name only and inherit age property from the previous.
  • ThirdController that overrides both the name property defined in SecondControler and the age property defined in FirstController.

I suggest you when you are working with larger application then put controllers in external files.

Label :

Angular JS

Web Development

Hope this code and post will helped you for implement Understanding AngularJS Controllers and scope inheritance with example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

6  +  3  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US