5
5
6
6
# Understanding Controllers
7
7
8
- In Angular , a Controller is defined by a JavaScript **constructor function** that is used to augment the
9
- {@link scope Angular Scope}.
8
+ In AngularJS , a Controller is defined by a JavaScript **constructor function** that is used to augment the
9
+ {@link scope AngularJS Scope}.
10
10
11
- When a Controller is attached to the DOM via the {@link ng.directive:ngController ng-controller}
12
- directive, Angular will instantiate a new Controller object, using the specified Controller's
13
- **constructor function**. A new **child scope** will be created and made available as an injectable
14
- parameter to the Controller's constructor function as `$scope`.
11
+ Controllers can be attached to the DOM in different ways. For each of them, AngularJS will
12
+ instantiate a new Controller object, using the specified Controller's **constructor function**:
13
+
14
+ - the {@link ng.directive:ngController ngController} directive. A new **child scope** will be
15
+ created and made available as an injectable parameter to the Controller's constructor function
16
+ as `$scope`.
17
+ - a route controller in a {@link ngRoute.$routeProvider $route definition}.
18
+ - the controller of a {@link guide/directive regular directive}, or a
19
+ {@link guide/component component directive}.
15
20
16
21
If the controller has been attached using the `controller as` syntax then the controller instance will
17
- be assigned to a property on the new scope.
22
+ be assigned to a property on the scope.
18
23
19
24
Use controllers to:
20
25
@@ -24,18 +29,27 @@ Use controllers to:
24
29
Do not use controllers to:
25
30
26
31
- Manipulate DOM — Controllers should contain only business logic.
27
- Putting any presentation logic into Controllers significantly affects its testability. Angular
32
+ Putting any presentation logic into Controllers significantly affects its testability. AngularJS
28
33
has {@link databinding databinding} for most cases and {@link guide/directive directives} to
29
34
encapsulate manual DOM manipulation.
30
- - Format input — Use {@link forms angular form controls} instead.
31
- - Filter output — Use {@link guide/filter angular filters} instead.
32
- - Share code or state across controllers — Use {@link services angular
35
+ - Format input — Use {@link forms AngularJS form controls} instead.
36
+ - Filter output — Use {@link guide/filter AngularJS filters} instead.
37
+ - Share code or state across controllers — Use {@link services AngularJS
33
38
services} instead.
34
39
- Manage the life-cycle of other components (for example, to create service instances).
35
40
41
+ In general, a Controller shouldn't try to do too much. It should contain only the business logic
42
+ needed for a single view.
43
+
44
+ The most common way to keep Controllers slim is by encapsulating work that doesn't belong to
45
+ controllers into services and then using these services in Controllers via dependency injection.
46
+ This is discussed in the {@link di Dependency Injection} and {@link services
47
+ Services} sections of this guide.
48
+
49
+
36
50
## Setting up the initial state of a `$scope` object
37
51
38
- Typically, when you create an application you need to set up the initial state for the Angular
52
+ Typically, when you create an application you need to set up the initial state for the AngularJS
39
53
`$scope`. You set up the initial state of a scope by attaching properties to the `$scope` object.
40
54
The properties contain the **view model** (the model that will be presented by the view). All the
41
55
`$scope` properties will be available to the {@link templates template} at the point in the DOM where the Controller
@@ -52,13 +66,13 @@ myApp.controller('GreetingController', ['$scope', function($scope) {
52
66
}]);
53
67
```
54
68
55
- We create an {@link module Angular Module}, `myApp`, for our application. Then we add the controller's
69
+ We create an {@link module AngularJS Module}, `myApp`, for our application. Then we add the controller's
56
70
constructor function to the module using the `.controller()` method. This keeps the controller's
57
71
constructor function out of the global scope.
58
72
59
73
<div class="alert alert-info">
60
74
We have used an **inline injection annotation** to explicitly specify the dependency
61
- of the Controller on the `$scope` service provided by Angular . See the guide on
75
+ of the Controller on the `$scope` service provided by AngularJS . See the guide on
62
76
{@link guide/di Dependency Injection} for more information.
63
77
</div>
64
78
@@ -102,23 +116,6 @@ objects (or primitives) assigned to the scope become model properties. Any metho
102
116
the scope are available in the template/view, and can be invoked via angular expressions
103
117
and `ng` event handler directives (e.g. {@link ng.directive:ngClick ngClick}).
104
118
105
- ## Using Controllers Correctly
106
-
107
- In general, a Controller shouldn't try to do too much. It should contain only the business logic
108
- needed for a single view.
109
-
110
- The most common way to keep Controllers slim is by encapsulating work that doesn't belong to
111
- controllers into services and then using these services in Controllers via dependency injection.
112
- This is discussed in the {@link di Dependency Injection} and {@link services
113
- Services} sections of this guide.
114
-
115
-
116
- # Associating Controllers with Angular Scope Objects
117
-
118
- You can associate Controllers with scope objects implicitly via the {@link ng.directive:ngController ngController
119
- directive} or {@link ngRoute.$route $route service}.
120
-
121
-
122
119
## Simple Spicy Controller Example
123
120
124
121
To illustrate further how Controller components work in Angular, let's create a little app with the
@@ -159,7 +156,7 @@ string "very". Depending on which button is clicked, the `spice` model is set to
159
156
160
157
Things to notice in the example above:
161
158
162
- - The `ng-controller ` directive is used to (implicitly) create a scope for our template, and the
159
+ - The `ngController ` directive is used to (implicitly) create a scope for our template, and the
163
160
scope is augmented (managed) by the `SpicyController` Controller.
164
161
- `SpicyController` is just a plain JavaScript function. As an (optional) naming convention the name
165
162
starts with capital letter and ends with "Controller".
@@ -262,7 +259,7 @@ Inheritance works with methods in the same way as it does with properties. So in
262
259
examples, all of the properties could be replaced with methods that return string values.
263
260
264
261
265
- # Testing Controllers
262
+ ## Testing Controllers
266
263
267
264
Although there are many ways to test a Controller, one of the best conventions, shown below,
268
265
involves injecting the {@link ng.$rootScope $rootScope} and {@link ng.$controller $controller}:
0 commit comments