4
4
5
5
# Understanding Controllers
6
6
7
- In Angular, a Controller is a JavaScript **constructor function** that is used to augment the
7
+ In Angular, a Controller is a JavaScript **constructor function** that is used to augment the
8
8
{@link scope Angular Scope}.
9
9
10
10
When a Controller is attached to the DOM via the {@link ng.directive:ngController ng-controller}
11
11
directive, Angular will instantiate a new Controller object, using the specified Controller's
12
- **constructor function**. A new **child scope** will be available as an injectable parameter to the
12
+ **constructor function**. A new **child scope** will be available as an injectable parameter to the
13
13
Controller's constructor function as `$scope`.
14
14
15
- Use Controllers to:
15
+ Use controllers to:
16
16
17
17
- Set up the initial state of the `$scope` object.
18
18
- Add behavior to the `$scope` object.
19
19
20
+ Do not use controllers to:
21
+
22
+ - Manipulate DOM — Controllers should contain only business logic.
23
+ Putting any presentation logic into Controllers significantly affects its testability. Angular
24
+ has {@link databinding databinding} for most cases and {@link guide/directive directives} to
25
+ encapsulate manual DOM manipulation.
26
+ - Format input — Use {@link forms angular form controls} instead.
27
+ - Filter output — Use {@link guide/filter angular filters} instead.
28
+ - Share code or state across controllers — Use {@link services angular
29
+ services} instead.
30
+ - Manage the life-cycle of other components (for example, to create service instances).
31
+
20
32
# Setting up the initial state of a `$scope` object
21
33
22
34
Typically, when you create an application you need to set up the initial state for the Angular
@@ -25,38 +37,38 @@ The properties contain the **view model** (the model that will be presented by t
25
37
`$scope` properties will be available to the template at the point in the DOM where the Controller
26
38
is registered.
27
39
28
- The following example shows a very simple constructor function for a Controller, `GreetingCtrl `,
40
+ The following example shows a very simple constructor function for a Controller, `GreetingController `,
29
41
which attaches a `greeting` property containing the string `'Hola!'` to the `$scope`:
30
42
31
43
```js
32
- function GreetingCtrl ($scope) {
33
- $scope.greeting = 'Hola!';
34
- }
44
+ function GreetingController ($scope) {
45
+ $scope.greeting = 'Hola!';
46
+ }
35
47
```
36
48
37
49
Once the Controller has been attached to the DOM, the `greeting` property can be data-bound to the
38
50
template:
39
51
40
52
```js
41
- <div ng-controller="GreetingCtrl ">
42
- {{ greeting }}
43
- </div>
53
+ <div ng-controller="GreetingController ">
54
+ {{ greeting }}
55
+ </div>
44
56
```
45
57
46
58
**NOTE**: Although Angular allows you to create Controller functions in the global scope, this is
47
59
not recommended. In a real application you should use the `.controller` method of your
48
60
{@link module Angular Module} for your application as follows:
49
61
50
62
```js
51
- var myApp = angular.module('myApp',[]);
63
+ var myApp = angular.module('myApp',[]);
52
64
53
- myApp.controller('GreetingCtrl ', ['$scope', function($scope) {
54
- $scope.greeting = 'Hola!';
55
- }]);
65
+ myApp.controller('GreetingController ', ['$scope', function($scope) {
66
+ $scope.greeting = 'Hola!';
67
+ }]);
56
68
```
57
69
58
70
We have used an **inline injection annotation** to explicitly specify the dependency
59
- of the Controller on the `$scope` service provided by Angular. See the guide on
71
+ of the Controller on the `$scope` service provided by Angular. See the guide on
60
72
[Dependency Injection](http://docs.angularjs.org/guide/di) for more information.
61
73
62
74
@@ -69,20 +81,20 @@ then available to be called from the template/view.
69
81
The following example uses a Controller to add a method to the scope, which doubles a number:
70
82
71
83
```js
72
- var myApp = angular.module('myApp',[]);
84
+ var myApp = angular.module('myApp',[]);
73
85
74
- myApp.controller('DoubleCtrl ', ['$scope', function($scope) {
75
- $scope.double = function(value) { return value * 2; };
76
- }]);
86
+ myApp.controller('DoubleController ', ['$scope', function($scope) {
87
+ $scope.double = function(value) { return value * 2; };
88
+ }]);
77
89
```
78
90
79
91
Once the Controller has been attached to the DOM, the `double` method can be invoked in an Angular
80
92
expression in the template:
81
93
82
94
```js
83
- <div ng-controller="DoubleCtrl ">
84
- Two times <input ng-model="num"> equals {{ double(num) }}
85
- </div>
95
+ <div ng-controller="DoubleController ">
96
+ Two times <input ng-model="num"> equals {{ double(num) }}
97
+ </div>
86
98
```
87
99
88
100
As discussed in the {@link concepts Concepts} section of this guide, any
@@ -97,23 +109,9 @@ needed for a single view.
97
109
98
110
The most common way to keep Controllers slim is by encapsulating work that doesn't belong to
99
111
controllers into services and then using these services in Controllers via dependency injection.
100
- This is discussed in the {@link di Dependency Injection} {@link dev_guide. services
112
+ This is discussed in the {@link di Dependency Injection} {@link services
101
113
Services} sections of this guide.
102
114
103
- Do not use Controllers for:
104
-
105
- - Any kind of DOM manipulation — Controllers should contain only business logic. DOM
106
- manipulation (the presentation logic of an application) is well known for being hard to test.
107
- Putting any presentation logic into Controllers significantly affects testability of the business
108
- logic. Angular offers {@link databinding databinding} for automatic DOM manipulation. If
109
- you have to perform your own manual DOM manipulation, encapsulate the presentation logic in
110
- {@link guide/directive directives}.
111
- - Input formatting — Use {@link forms angular form controls} instead.
112
- - Output filtering — Use {@link guide/filter angular filters} instead.
113
- - Sharing stateless or stateful code across Controllers — Use {@link dev_guide.services angular
114
- services} instead.
115
- - Managing the life-cycle of other components (for example, to create service instances).
116
-
117
115
118
116
# Associating Controllers with Angular Scope Objects
119
117
@@ -147,11 +145,11 @@ string "very". Depending on which button is clicked, the `spice` model is set to
147
145
148
146
myApp.controller('SpicyCtrl', ['$scope', function($scope){
149
147
$scope.spice = 'very';
150
-
148
+
151
149
$scope.chiliSpicy = function() {
152
150
$scope.spice = 'chili';
153
151
};
154
-
152
+
155
153
$scope.jalapenoSpicy = function() {
156
154
$scope.spice = 'jalapeño';
157
155
};
@@ -190,7 +188,7 @@ previous example.
190
188
myApp.controller('SpicyCtrl', ['$scope', function($scope){
191
189
$scope.customSpice = "wasabi";
192
190
$scope.spice = 'very';
193
-
191
+
194
192
$scope.spicy = function(spice){
195
193
$scope.spice = spice;
196
194
};
@@ -205,7 +203,7 @@ input box) in the second button.
205
203
206
204
## Scope Inheritance Example
207
205
208
- It is common to attach Controllers at different levels of the DOM hierarchy. Since the
206
+ It is common to attach Controllers at different levels of the DOM hierarchy. Since the
209
207
{@link ng.directive:ngController ng-controller} directive creates a new child scope, we get a
210
208
hierarchy of scopes that inherit from each other. The `$scope` that each Controller receives will
211
209
have access to properties and methods defined by Controllers higher up the hierarchy.
0 commit comments