Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 4cb5113

Browse files
committed
docs(guide/controller): reorganize, add Controller suffix, formatting
1 parent 66c14ce commit 4cb5113

File tree

1 file changed

+39
-41
lines changed

1 file changed

+39
-41
lines changed

docs/content/guide/controller.ngdoc

Lines changed: 39 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,31 @@
44

55
# Understanding Controllers
66

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
88
{@link scope Angular Scope}.
99

1010
When a Controller is attached to the DOM via the {@link ng.directive:ngController ng-controller}
1111
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
1313
Controller's constructor function as `$scope`.
1414

15-
Use Controllers to:
15+
Use controllers to:
1616

1717
- Set up the initial state of the `$scope` object.
1818
- Add behavior to the `$scope` object.
1919

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+
2032
# Setting up the initial state of a `$scope` object
2133

2234
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
2537
`$scope` properties will be available to the template at the point in the DOM where the Controller
2638
is registered.
2739

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`,
2941
which attaches a `greeting` property containing the string `'Hola!'` to the `$scope`:
3042

3143
```js
32-
function GreetingCtrl($scope) {
33-
$scope.greeting = 'Hola!';
34-
}
44+
function GreetingController($scope) {
45+
$scope.greeting = 'Hola!';
46+
}
3547
```
3648

3749
Once the Controller has been attached to the DOM, the `greeting` property can be data-bound to the
3850
template:
3951

4052
```js
41-
<div ng-controller="GreetingCtrl">
42-
{{ greeting }}
43-
</div>
53+
<div ng-controller="GreetingController">
54+
{{ greeting }}
55+
</div>
4456
```
4557

4658
**NOTE**: Although Angular allows you to create Controller functions in the global scope, this is
4759
not recommended. In a real application you should use the `.controller` method of your
4860
{@link module Angular Module} for your application as follows:
4961

5062
```js
51-
var myApp = angular.module('myApp',[]);
63+
var myApp = angular.module('myApp',[]);
5264

53-
myApp.controller('GreetingCtrl', ['$scope', function($scope) {
54-
$scope.greeting = 'Hola!';
55-
}]);
65+
myApp.controller('GreetingController', ['$scope', function($scope) {
66+
$scope.greeting = 'Hola!';
67+
}]);
5668
```
5769

5870
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
6072
[Dependency Injection](http://docs.angularjs.org/guide/di) for more information.
6173

6274

@@ -69,20 +81,20 @@ then available to be called from the template/view.
6981
The following example uses a Controller to add a method to the scope, which doubles a number:
7082

7183
```js
72-
var myApp = angular.module('myApp',[]);
84+
var myApp = angular.module('myApp',[]);
7385

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+
}]);
7789
```
7890

7991
Once the Controller has been attached to the DOM, the `double` method can be invoked in an Angular
8092
expression in the template:
8193

8294
```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>
8698
```
8799

88100
As discussed in the {@link concepts Concepts} section of this guide, any
@@ -97,23 +109,9 @@ needed for a single view.
97109

98110
The most common way to keep Controllers slim is by encapsulating work that doesn't belong to
99111
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
101113
Services} sections of this guide.
102114

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-
117115

118116
# Associating Controllers with Angular Scope Objects
119117

@@ -147,11 +145,11 @@ string "very". Depending on which button is clicked, the `spice` model is set to
147145

148146
myApp.controller('SpicyCtrl', ['$scope', function($scope){
149147
$scope.spice = 'very';
150-
148+
151149
$scope.chiliSpicy = function() {
152150
$scope.spice = 'chili';
153151
};
154-
152+
155153
$scope.jalapenoSpicy = function() {
156154
$scope.spice = 'jalapeño';
157155
};
@@ -190,7 +188,7 @@ previous example.
190188
myApp.controller('SpicyCtrl', ['$scope', function($scope){
191189
$scope.customSpice = "wasabi";
192190
$scope.spice = 'very';
193-
191+
194192
$scope.spicy = function(spice){
195193
$scope.spice = spice;
196194
};
@@ -205,7 +203,7 @@ input box) in the second button.
205203

206204
## Scope Inheritance Example
207205

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
209207
{@link ng.directive:ngController ng-controller} directive creates a new child scope, we get a
210208
hierarchy of scopes that inherit from each other. The `$scope` that each Controller receives will
211209
have access to properties and methods defined by Controllers higher up the hierarchy.

0 commit comments

Comments
 (0)