Controllers in AngularJS exists to augment the views of an
AnuglarJS applications. The controller in AngularJS is a function that
functionality to the scope of the view. We use it to set up the initial state
and to add custom behavior to the scope object.
When we create the controller on a page, Angular passes it a
new $scope. This new $scope is where we can set up the initial state of the
scope on our controller. Since Angular takes care of handling the controller
for us, we only need to write the constructor function.
Setting up the initial controller looks like this:
function FirstController($scope) {
$scope.message = “Hello”;
}
Doing so is usually poor form, as we don’t want to dirty the global namespace. To create it more properly, we’ll create a module and then create the controller on top of our module, like so:
$scope.message = “Hello”;
}
Doing so is usually poor form, as we don’t want to dirty the global namespace. To create it more properly, we’ll create a module and then create the controller on top of our module, like so:
var app = angular.module(‘app’, []);
app.controller(‘FirstController’, function($scope) {
$scope.message = “Hello”;
}
app.controller(‘FirstController’, function($scope) {
$scope.message = “Hello”;
}
To create custom actions we can call in our views, we can
simply create functions on the scope of the controller. Luckily for us, AngularJs
allows our views to call functions on the $scope, just as if we were calling
the data.
To bind buttons or links (or any DOM element, really), we’ll
use another built-in directive, ng-click.
The ng-click directive binds the mouseup browser click event to the method handler, which calls
the method specified on the DOM element (i.e., when the browser fires a click event on the DOM
element, the method is called). Similar to our previous example, the binding looks like:
The ng-click directive binds the mouseup browser click event to the method handler, which calls
the method specified on the DOM element (i.e., when the browser fires a click event on the DOM
element, the method is called). Similar to our previous example, the binding looks like:
<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>
Both the button and the link are bound to an action on the containing $scope, so when they are
pressed (clicked), Angular calls the method. Note that when we tell Angular what method to call,
we’re putting it in a string with the parentheses (add(1)).
Now, let’s create an action on our FirstController.
app.controller('FirstController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; };
$scope.subtract = function(amount) { $scope.counter -= amount; };
});
Setting our FirstController in this manner allows us to call add or subtract functions (as we’ve
seen above) that are defined on the FirstController scope or a containing parent $scope.
Using controllers allows us to contain the logic of a single view in a single container. It’s good
practice to keep slim controllers. One way that we as AngularJS developers can do so is by using the
dependency injection feature of AngularJS to access services
