Understanding AngularJS Controllers and scope inheritance with example

Understanding AngularJS Controllers and scope inheritance with example

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='ExpertPHP.in';
  15. });
  16. </script>
  17. </body>
  18. </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 'ExpertPHP.in' 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>

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>

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>
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.

Phone: (+91) 8800417876
Noida, 201301
ataşehir escort maltepe escort bostancı escort kadıköy escort maltepe escort ataşehir escort tuzla escort pendik escort ümraniye escort kartal escort
pendik escort
izmir escort izmir escort izmir escort izmir escort denizli escort antalya escort antalya escort antalya escort izmir escort izmir escort izmir escort izmir escort izmir escort
hatay escort nevsehir escort nigde escort kirikkale escort batman escort osmaniye escort kirklareli escort tokat escort rize escort adiyaman escort gumushane escort batman escort
porno izle
cialis satış cialis fiyat cialis 20 mg cialis 100 mg cialis 5 mg fiyat
sohbet okey oyna
ankara escort marmaris escort bursa escort mersin escort antalya escort izmir escort samsun escort bodrum escort çeşme escort kuşadası escort adana escort eskişehir escort gaziantep escort esenyurt escort pendik escort tuzla escort fatih escort ümraniye escort mecidiyeköy escort kartal escort bahçelievler escort bahçeşehir escort ataşehir escort bakırköy escort nişantaşı escort avcılar escort büyükçekmece escort kurtkoy escort konya escort beşiktaş escort taksim escort beylikdüzü escort malatya escort sakarya escort şişli escort maltepe escort kadıköy escort ataköy escort bostancı escort şirinevler escort bağcılar escort üsküdar escort etiler escort başaksehir escort ortaköy escort kağıthane escort sultangazi escort halkalı escort çekmeköy escort şaşkınbakkal escort mamak escort sincan escort keçiören escort çankaya escort beypazarı escort akyurt escort pursaklar escort kahramankazan escort göztepe escort alsancak escort bornova escort buca escort karabaglar escort karşıyaka escort konak escort narlıdere escort izmit escort başiskele escort kandira escort körfez escort karamürsel escort dilovası escort gölcük escort gebze escort kocaeli escort kayseri escort elazığ escort denizli escort diyarbakir escort adana escort ankara escort izmir escort antalya escort gaziantep escort kayseri escort konya escort mersin escort denizli escort kocaeli escort diyarbakır escort