Understanding Controllers In AngularJS

Introduction

In my previous article “AngularJS Overview” and "Data Binding in AngularJS", we saw an overview of AngularJS features, a hello world application and data binding in AngularJS. This article explains controllers in AngularJS.

AngularJS Controllers

Controller in AngularJS is nothing but JavaScript constructor function that uses the Angular scope. It also controls the data of the application. Controller function is attached with DOM object. The ng-controller directive helps to define controller. When the ng-controller directive find by the AngularJS application, it will instantiate a new Controller object and create a new child scope ($scope) and it made available as an injectable parameter (to the Controller's constructor function). Controller is heart of AngularJS application and it mainly contains the business logic, so it is not good idea to put presentation logic into Controllers, it may affect controller's testability.

We can define controller in the following two ways:

1. Define Controller as application module
   
   Normally angular developer uses this approach. In this approach, angular application has been defined and controller has been added in this angular application.
   
   1. angular.module("myapp", [])
   2. .controller("appController", function($scope) {
   3. // definition of controller
   4. } );
2. Controller define as JavaScript function
   
   We can also define controller as JavaScript function. In this function, we can also inject the dependency.
   
   1. function controllerAsFunction($scope){
   2. $scope.myName = "Tejas Trivedi";
   3. }
   Full example:
   
   1. <!DOCTYPE html>
   2. <html>
   4. <head>
   5. <title>Understanding Controllers and Services In AngularJS</title>
   6. <script src="angular.js"></script>
   7. </head>
   9. <body ng-app="myapp">
   10. <h4>Controller Example</h4>
   11. <br/>
   12. <br/>
   13. <div>1) Application.controller</div>
   14. <div ng-controller="appController">
   15. <div> My Name (app.contrller): {{myName}} </div>
   16. </div>
   17. <br/>
   18. <br/>
   19. <div>2) Controller as function</div>
   20. <div ng-controller="controllerAsFunction">
   21. <div> My Name (controller as function): {{myName}} </div>
   22. </div>
   24. <script>
   25. angular.module("myapp", [])
   26. .controller("appController", function($scope) {
   27. $scope.myName = "Jignesh Trivedi";
   28. });
   30. function controllerAsFunction($scope) {
   31. $scope.myName = "Tejas Trivedi";
   32. }
   33. </script>
   34. </body>
   36. </html>
   Output:
   
   

Scope Inheritance

As described earlier, the ng-controller directive always creates a new child scope, so that we can get a hierarchy of scopes that inherit from each other. Each $scope variable of the controller will have access to the properties and methods define by the controllers.

Example: