Controller in an AngularJS application plays as a role of bridge between your model and view. There are certain best practices need to be followed while designing a controller for your application.
- REST calls should not be invoked in controller(Use Services).
- Any filtering of the data like changing the text as browser language changes should not be done in controller(Use Filters)
- Controllers should not be used to act as a communicator between two different AngularJS modules(Use event emitters)
Following example shows how to write a controller("Controller as" Syntax):
HTML file
<html>
<head>
<script data-require="angular.js@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="testapp">
<div ng-controller="utilcontroller as util">
<input type="text" ng-model="util.name">
<button ng-click="util.greeting()">Say Hii</button>
<div>
<b>{{util.nameWithGreetingMsg}}</b>
</div>
</div>
</div>
</body>
Javascript file(script.js mentioned in the HTML file)
angular.module("testapp", []).controller('utilcontroller', function() {
this.greeting = function() {
this.nameWithGreetingMsg = "Hello " + this.name;
}
});
Constructor is a constructor function, in the above example
utilcontroller is the constructor function, so when we mention the ng-controller directive in the HTML, this constructor function get called and a new object gets created. In the above example the new object name is
util.
Let's write without "controller as" syntax.
HTML file
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="testapp">
<div ng-controller="utilcontroller">
<input type="text" ng-model="name">
<button ng-click="greeting()">Say Hii</button>
<div>
<b>{{nameWithGreetingMsg}}</b>
</div>
</div>
</div>
</body>
</html>
Javascript file(script.js mentioned in the HTML file)
angular.module("testapp", []).controller('utilcontroller', function($scope) {
$scope.greeting = function() {
$scope.nameWithGreetingMsg = "Hello " + $scope.name;
}
});
In the above program all the properties and methods are attached to $scope.
Scope Inheritance
To achieve scope inheritance controllers can be used. It's very normal while creating an HTML view we assign different controllers at different view level. so for example in the below program:
<div ng-controller="vehiclecontroller as vehicle">
<div ng-controller="carcontroller as car">
No of wheels: <b>{{car.wheels}}</b>
<button ng-click="vehicle.start()">Start Car</button>
</div>
<div ng-controller="bikecontroller as bike">
No of wheels: <b>{{bike.wheels}}</b>
<button ng-click="vehicle.start()">Start Bike</button>
</div>
</div>
We have one parent controller and two child controllers, the child controller are able to access the parent scope's data through referring the parent controller's name(vehicle.start). The 'start' method is defined in vehiclecontroller function:
angular.module("testapp", []).controller('vehiclecontroller', function() {
this.start = function() {
console.log("vehicle started");
}
}).controller('carcontroller', function() {
this.wheels = 4;
}).controller('bikecontroller', function() {
this.wheels = 2;
});
$watch in controller
$watch is AngularJS is used to observe the scope properties, once the property's value changes the callback function defined in the $watch executes.
Inside controller we write watchers(in case of controller as syntax):
controller('carcontroller', function($scope) {
this.wheels = 4;
this.gear="neutral";
$scope.$watch(angular.bind(this,function(){return this.gear}),function(newVal,oldVal){
console.log("Gear changed from"+ oldVal+ "to "+newVal);
});
In case of
without controller as syntax the $watch is pretty simple:
$scope.$watch('gear',function(newVal,oldVal){
console.log("Gear changed from"+ oldVal+ "to "+newVal);
});
That's pretty much for controller's role inAngularJS app. In the upcoming post we will learn about
FormController role in an application.
