All for Joomla All for Webmasters

AngularJS Controllers

AngularJS controllers are used to control the flow of data of AngularJS application. A controller is defined using ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.


AngularJS Controller Example

  1. <!DOCTYPE html>
  2. <html>
  3. <script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
  4. <body>
  5. <div ng-app=“myApp” ng-controller=“myCtrl”>
  6. First Name: <input type=“text” ng-model=“firstName”><br>
  7. Last Name: <input type=“text” ng-model=“lastName”><br>
  8. <br>
  9. Full Name: {{firstName + ” ” + lastName}}
  10. </div>
  11. <script>
  12. var app = angular.module(‘myApp’, []);
  13. app.controller(‘myCtrl’, function($scope) {
  14.     $scope.firstName = “Aryan”;
  15.     $scope.lastName = “Khanna”;
  16. });
  17. </script>
  18. </body>
  19. </html>

Note:

  • Here, the AngularJS application runs inside the <div> is defined by ng-app=”myApp”.
  • The AngularJS directive is ng-controller=”myCtrl” attribute.
  • The myCtrl function is a JavaScript function.
  • AngularJS will invoke the controller with a $scope object.
  • In AngularJS, $scope is the application object (the owner of application variables and functions).
  • The controller creates two properties (variables) in the scope (firstName and lastName).
  • The ng-model directives bind the input fields to the controller properties (firstName and lastName).

AngularJS controller example with methods (variables as functions)

  1. <!DOCTYPE html>
  2. <html>
  3. <script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
  4. <body>
  5. <div ng-app=“myApp” ng-controller=“personCtrl”>
  6. First Name: <input type=“text” ng-model=“firstName”><br>
  7. Last Name: <input type=“text” ng-model=“lastName”><br>
  8. <br>
  9. Full Name: {{fullName()}}
  10. </div>
  11. <script>
  12. var app = angular.module(‘myApp’, []);
  13. app.controller(‘personCtrl’, function($scope) {
  14.     $scope.firstName = “Aryan”;
  15.     $scope.lastName = “Khanna”;
  16.     $scope.fullName = function() {
  17.         return $scope.firstName + ” ” + $scope.lastName;
  18.     };
  19. });
  20. </script>
  21. </body>
  22. </html>

AngularJS Controller in external files

In larger applications, generally the controllers are stored in external files.

Create an external file named “personController.js” to store controller.

Here, “personController.js” is:

  1.    angular.module(‘myApp’, []).controller(‘personCtrl’, function($scope) {
  2.     $scope.firstName = “Aryan”,
  3.     $scope.lastName = “Khanna”,
  4.     $scope.fullName = function() {
  5.         return $scope.firstName + ” ” + $scope.lastName;
  6.     }
  7. });

See this example:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
  4. <body>
  5. <div ng-app=“myApp” ng-controller=“personCtrl”>
  6. First Name: <input type=“text” ng-model=“firstName”><br>
  7. Last Name: <input type=“text” ng-model=“lastName”><br>
  8. <br>
  9. Full Name: {{firstName + ” ” + lastName}}
  10. </div>
  11. <script src=“personController.js”></script>
  12. </body>
  13. </html>
PinIt
submit to reddit

Leave a Reply

Top