Controllers

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>

ngController

This is a core part of how Angular maps to the model-view-controller pattern.

<element ng-controller />

Parameters

  • The ng-controller(expression) attribute is a string that will tell Angular which controller is tied to this element.

Description

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>

$scope

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.

Data binding and templates

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.

Event binding

Angular uses directives to bind events. In the $scope section, the example uses ngClick to listen for the click event on a button.

See the Directives, Event Binding section for a list of the most used event directives.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.222.184.200