Controllers are one of the core units of any Angular application. Controllers are used to create a small part of a module that requires its own scope. Each module can have many controllers. Controllers should be small and focused on one task.
Each controller should really only worry about the data and any events that modify that data. This means a controller should not modify the DOM, change output or input, or share state with another controller. Each of these should use the Angular solution, directives or filters, and services, respectively.
Controllers are created from a module reference, so they are tied to modules. Here is an example of creating a simple controller:
firstModule.controller('SimpleController', ['$scope', function ($scope) { $scope.hey = "HEY!"; console.log($scope); }]);
This module can then be attached to a DOM element with ngController
:
<div ng-controller="SimpleController"> {{ hey }} </div>
This is a core part of how Angular maps to the model-view-controller pattern.
<element ng-controller />
A controller needs a part of the document to attach. This directive will bind the controller, with its scope, to this element.
If a controller has been defined in a route, then you should not add this directive to the page. The router will take care of binding to the correct element.
Here is an example of using ngcontroller
to create an alias for the controller:
<div ng-controller="SimpleController as simple"> {{ simple.hey }} </div>
This is the most important part of a controller. This is the where you should place everything you are tracking for this controller. This includes any functions that modify the scope.
The $scope
controller is injected into the controller by declaring a dependency to it (see dependency injection). There are built-in functions and properties (see Scopes), but because it is just a JavaScript object, you can add your own functions and properties. These will map directly to the template in the controller.
Here is an example of a controller that defines one property, hey
, and a function, changeHey
. It is important to note that there are no references to DOM references at all in this function:
firstModule.controller('SimpleController', ['$scope', function ($scope) { $scope.hey = "HEY!"; $scope.changeHey = function () { $scope.hey = $scope.hey === 'HEY!' ? 'OK!' : 'HEY!'; }; }]);
Here is the template with all the data binding in the HTML document:
<div ng-controller="SimpleController"> {{ hey }} <input type="text" ng-model="hey"/> <button ng-click="changeHey()">{{hey}}</button> </div>
Angular will know what hey
is in this element because it is scoped to just SimpleController
.
A controller uses HTML as its templating language. You can bind a value from the controller's scope just by surrounding it in double brackets ({{ }})
. That is really all there is to it!
For some elements such as input
, select
, and textarea
, you cannot just add the value of a scope
object to bind them. You will have to use the ngModel
directive.
The $scope
section has a great example of binding scope values to the template.
18.222.184.200