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

Commit f4d49f3

Browse files
committed
docs(guide/Controllers): fix headings; re-order info
1 parent d5c35b4 commit f4d49f3

File tree

1 file changed

+30
-33
lines changed

1 file changed

+30
-33
lines changed

docs/content/guide/controller.ngdoc

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,21 @@
55

66
# Understanding Controllers
77

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}.
1010

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}.
1520

1621
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.
1823

1924
Use controllers to:
2025

@@ -24,18 +29,27 @@ Use controllers to:
2429
Do not use controllers to:
2530

2631
- 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
2833
has {@link databinding databinding} for most cases and {@link guide/directive directives} to
2934
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
3338
services} instead.
3439
- Manage the life-cycle of other components (for example, to create service instances).
3540

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

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
3953
`$scope`. You set up the initial state of a scope by attaching properties to the `$scope` object.
4054
The properties contain the **view model** (the model that will be presented by the view). All the
4155
`$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) {
5266
}]);
5367
```
5468

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
5670
constructor function to the module using the `.controller()` method. This keeps the controller's
5771
constructor function out of the global scope.
5872

5973
<div class="alert alert-info">
6074
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
6276
{@link guide/di Dependency Injection} for more information.
6377
</div>
6478

@@ -102,23 +116,6 @@ objects (or primitives) assigned to the scope become model properties. Any metho
102116
the scope are available in the template/view, and can be invoked via angular expressions
103117
and `ng` event handler directives (e.g. {@link ng.directive:ngClick ngClick}).
104118

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-
122119
## Simple Spicy Controller Example
123120

124121
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
159156

160157
Things to notice in the example above:
161158

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
163160
scope is augmented (managed) by the `SpicyController` Controller.
164161
- `SpicyController` is just a plain JavaScript function. As an (optional) naming convention the name
165162
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
262259
examples, all of the properties could be replaced with methods that return string values.
263260

264261

265-
# Testing Controllers
262+
## Testing Controllers
266263

267264
Although there are many ways to test a Controller, one of the best conventions, shown below,
268265
involves injecting the {@link ng.$rootScope $rootScope} and {@link ng.$controller $controller}:

0 commit comments

Comments
 (0)