@@ -134,7 +134,7 @@ string "very". Depending on which button is clicked, the `spice` model is set to
134
134
135
135
<example module="spicyApp1">
136
136
<file name="index.html">
137
- <div ng-controller="SpicyCtrl ">
137
+ <div ng-controller="SpicyController ">
138
138
<button ng-click="chiliSpicy()">Chili</button>
139
139
<button ng-click="jalapenoSpicy()">Jalapeño</button>
140
140
<p>The food is {{spice}} spicy!</p>
@@ -143,7 +143,7 @@ string "very". Depending on which button is clicked, the `spice` model is set to
143
143
<file name="app.js">
144
144
var myApp = angular.module('spicyApp1', []);
145
145
146
- myApp.controller('SpicyCtrl ', ['$scope', function($scope){
146
+ myApp.controller('SpicyController ', ['$scope', function($scope) {
147
147
$scope.spice = 'very';
148
148
149
149
$scope.chiliSpicy = function() {
@@ -160,9 +160,9 @@ string "very". Depending on which button is clicked, the `spice` model is set to
160
160
Things to notice in the example above:
161
161
162
162
- The `ng-controller` directive is used to (implicitly) create a scope for our template, and the
163
- scope is augmented (managed) by the `SpicyCtrl ` Controller.
164
- - `SpicyCtrl ` is just a plain JavaScript function. As an (optional) naming convention the name
165
- starts with capital letter and ends with "Ctrl " or "Controller".
163
+ scope is augmented (managed) by the `SpicyController ` Controller.
164
+ - `SpicyController ` is just a plain JavaScript function. As an (optional) naming convention the name
165
+ starts with capital letter and ends with "Controller " or "Controller".
166
166
- Assigning a property to `$scope` creates or updates the model.
167
167
- Controller methods can be created through direct assignment to scope (see the `chiliSpicy` method)
168
168
- The Controller methods and properties are available in the template (for the `<div>` element and
@@ -175,7 +175,7 @@ previous example.
175
175
176
176
<example module="spicyApp2">
177
177
<file name="index.html">
178
- <div ng-controller="SpicyCtrl ">
178
+ <div ng-controller="SpicyController ">
179
179
<input ng-model="customSpice">
180
180
<button ng-click="spicy('chili')">Chili</button>
181
181
<button ng-click="spicy(customSpice)">Custom spice</button>
@@ -185,18 +185,18 @@ previous example.
185
185
<file name="app.js">
186
186
var myApp = angular.module('spicyApp2', []);
187
187
188
- myApp.controller('SpicyCtrl ', ['$scope', function($scope){
188
+ myApp.controller('SpicyController ', ['$scope', function($scope) {
189
189
$scope.customSpice = "wasabi";
190
190
$scope.spice = 'very';
191
191
192
- $scope.spicy = function(spice){
192
+ $scope.spicy = function(spice) {
193
193
$scope.spice = spice;
194
194
};
195
195
}]);
196
196
</file>
197
197
</example>
198
198
199
- Notice that the `SpicyCtrl ` Controller now defines just one method called `spicy`, which takes one
199
+ Notice that the `SpicyController ` Controller now defines just one method called `spicy`, which takes one
200
200
argument called `spice`. The template then refers to this Controller method and passes in a string
201
201
constant `'chili'` in the binding for the first button and a model property `customSpice` (bound to an
202
202
input box) in the second button.
@@ -213,13 +213,13 @@ more information about scope inheritance.
213
213
<example module="scopeInheritance">
214
214
<file name="index.html">
215
215
<div class="spicy">
216
- <div ng-controller="MainCtrl ">
216
+ <div ng-controller="MainController ">
217
217
<p>Good {{timeOfDay}}, {{name}}!</p>
218
218
219
- <div ng-controller="ChildCtrl ">
219
+ <div ng-controller="ChildController ">
220
220
<p>Good {{timeOfDay}}, {{name}}!</p>
221
221
222
- <div ng-controller="GrandChildCtrl ">
222
+ <div ng-controller="GrandChildController ">
223
223
<p>Good {{timeOfDay}}, {{name}}!</p>
224
224
</div>
225
225
</div>
@@ -234,14 +234,14 @@ more information about scope inheritance.
234
234
</file>
235
235
<file name="app.js">
236
236
var myApp = angular.module('scopeInheritance', []);
237
- myApp.controller('MainCtrl ', ['$scope', function($scope){
237
+ myApp.controller('MainController ', ['$scope', function($scope) {
238
238
$scope.timeOfDay = 'morning';
239
239
$scope.name = 'Nikki';
240
240
}]);
241
- myApp.controller('ChildCtrl ', ['$scope', function($scope){
241
+ myApp.controller('ChildController ', ['$scope', function($scope) {
242
242
$scope.name = 'Mattie';
243
243
}]);
244
- myApp.controller('GrandChildCtrl ', ['$scope', function($scope){
244
+ myApp.controller('GrandChildController ', ['$scope', function($scope) {
245
245
$scope.timeOfDay = 'evening';
246
246
$scope.name = 'Gingerbreak Baby';
247
247
}]);
@@ -252,11 +252,11 @@ Notice how we nested three `ng-controller` directives in our template. This will
252
252
scopes being created for our view:
253
253
254
254
- The root scope
255
- - The `MainCtrl ` scope, which contains `timeOfDay` and `name` properties
256
- - The `ChildCtrl ` scope, which inherits the `timeOfDay` property but overrides (hides) the `name`
255
+ - The `MainController ` scope, which contains `timeOfDay` and `name` properties
256
+ - The `ChildController ` scope, which inherits the `timeOfDay` property but overrides (hides) the `name`
257
257
property from the previous
258
- - The `GrandChildCtrl ` scope, which overrides (hides) both the `timeOfDay` property defined in `MainCtrl `
259
- and the `name` property defined in `ChildCtrl `
258
+ - The `GrandChildController ` scope, which overrides (hides) both the `timeOfDay` property defined in `MainController `
259
+ and the `name` property defined in `ChildController `
260
260
261
261
Inheritance works with methods in the same way as it does with properties. So in our previous
262
262
examples, all of the properties could be replaced with methods that return string values.
@@ -316,11 +316,11 @@ describe('state', function() {
316
316
317
317
beforeEach(inject(function($rootScope, $controller) {
318
318
mainScope = $rootScope.$new();
319
- $controller('MainCtrl ', {$scope: mainScope});
319
+ $controller('MainController ', {$scope: mainScope});
320
320
childScope = mainScope.$new();
321
- $controller('ChildCtrl ', {$scope: childScope});
321
+ $controller('ChildController ', {$scope: childScope});
322
322
grandChildScope = childScope.$new();
323
- $controller('GrandChildCtrl ', {$scope: grandChildScope});
323
+ $controller('GrandChildController ', {$scope: grandChildScope});
324
324
}));
325
325
326
326
it('should have over and selected', function() {
0 commit comments