What is Angular Controller? Why and where should we use it ?

In MVC format application a controller is responsible for interacting between model and view. It facilitates to chage the state of the model. The main business operations in an MVC application is written inside a controller. In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope. It is responsible for data flow in the application.

We can attach the controller to the DOM using ng-controller directive. Also we can set controller while routing in AngularJS(See Angular Routing Here). A controller is a JavaScript Object, created by a standard JavaScript object constructor. Angular will instantiate a new Controller object using the specified Controller’s constructor function when we attach it through ng-controller.

Attacing controller through ng-controller

[javascript]

<div ng-controller="myController">

{{message}}

</div>

[/javascript]

Angular controller can be used to set the initial state of the $scope object and add behaviour to it. It should not be used to format input, filter output, manipulate DOM etc. so that it’s testability does not get affected.

We need to set up the initial state of the $scope object by attaching properties to it.Let’s take a look how we set initial state of $scope object in the following example.
[javascript]

var app = angular.module(‘myApp’,[]);

app.controller(‘myController’, [‘$scope’, function($scope) {
$scope.message = ‘Hello John’;
}]);

[/javascript]

Here we are creating an Angular module called app and adding the controller’s constructor function using .controller() method. The message property is now data bound to the template.

Next we will add some behaviour in order to react to events and computational purpose. Adding behaviour means adding methods to controllers. Those methods can be invoked via Angular expressions or events(for example ng-click,ng-show etc.) in templates. Check out our example below.

[javascript]

app.controller(‘myController’, [‘$scope’, function($scope) {
$scope.message = ‘No message’;
$scope.showMsg()=function(){
$scope.message = ‘Hello World’;
};
}]);

[/javascript]

Here in myController we have created a method showMsg() and attached to the $scope. Now we will invoke it in our template.

[javascript]

<div ng-controller="myController">
<div>{{message}}</div>
<div><button ng-click="showMsg()">Show Message</button></div>
</div>

[/javascript]

When the button is clicked the message changes from ‘No message’ to ‘Hello World’ as defined in our method showMsg(). Okay, that was simple enough. Let’s do some interesting thing.


 

index.html
[javascript]

<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div ng-view>
<div ng-controller="myController">
<input type="text" ng-model="textbox" ng-change="changeStatus()" />
<button ng-show="!empty" ng-click="clear()">Clear</button>
<div>
</div>
</body>
</html>

[/javascript]

script.js
[javascript]

var app = angular.module(‘myApp’,[]);

app.controller(‘myController’, [‘$scope’, function($scope) {
$scope.empty=true;
$scope.changeStatus=function(){
var len=$scope.textbox.length;
$scope.empty=len>0?false:true;
};
$scope.clear=function(){
$scope.empty=true;
$scope.textbox=”;
};
}]);

[/javascript]

Isn’t it cool? The button hides when there is nothing in the input box and appears when we write something in it. The changeStatus() is attached to the $scope that fires whenever some changes occurs in the textbox as it is set to the ng-change directive and performs accordingly by setting empty property of the $scope and counting it’s length. The clear() method clears the input box and resets the empty property to true.

Scope inheritence

We can attach controllers at different levels of DOM hierarchy using ng-controller as it creates child scope where it is declared. The nested controller or child controller can access(inherits) the properties as well as the methods of it’s parent’s controller. If it doesn’t make a sense to you, look at the following example.

HTML Template
[javascript]


<div ng-controller="firstController">
Name = {{name}} Age = {{age}}
<div ng-controller="secondController">
Name = {{name}} Age = {{age}}
</div>
</div>

[/javascript]

script.js
[javascript]

var app = angular.module(‘myApp’,[]);

app.controller(‘firstController’, [‘$scope’, function($scope) {
$scope.name=’John’;
$scope.age=30;
}]);

app.controller(‘secondController’, [‘$scope’, function($scope) {
$scope.name=’Peter’;
}]);

[/javascript]

Running this code in web server outputs :

Name = John Age = 30
Name = Peter Age = 30

See, here we have defined the age property of $scope in firstController, not in secondController. But we get age as 30 in secondController when it outputs. This is because of being child of firstController, it inherits the $scope properties and methods. As it defines the name property so the name is overwritten.

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address:

Delivered by FeedBurner


 

2 thoughts on “What is Angular Controller? Why and where should we use it ?

  1. hello mate, good post, now I am just wondering, in the HTML in the post above, the below code,

    Name = {{name}} Age = {{30}}

    Name = {{name}} Age = {{30}}

    should that be?

    Name = {{name}} Age = {{age}}

    Name = {{name}} Age = {{age}}

Leave a Reply

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