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

Commit 556e8ee

Browse files
btfordbtford
committed
docs(tutorial): fix style across tutorial steps
1 parent d769b8b commit 556e8ee

File tree

5 files changed

+58
-53
lines changed

5 files changed

+58
-53
lines changed

‎docs/content/tutorial/step_02.ngdoc

+13-14
Original file line numberDiff line numberDiff line change
@@ -79,28 +79,27 @@ the `PhoneListCtrl` __controller__. The __controller__ is simply a constructor f
7979
__`app/js/controllers.js`:__
8080
<pre>
8181

82-
function PhoneListCtrl($scope) {
82+
var phonecatApp = angular.module('phonecatApp', []);
83+
84+
phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
8385
$scope.phones = [
84-
{"name": "Nexus S",
85-
"snippet": "Fast just got faster with Nexus S."},
86-
{"name": "Motorola XOOM™ with Wi-Fi",
87-
"snippet": "The Next, Next Generation tablet."},
88-
{"name": "MOTOROLA XOOM™",
89-
"snippet": "The Next, Next Generation tablet."}
86+
{'name': 'Nexus S',
87+
'snippet': 'Fast just got faster with Nexus S.'},
88+
{'name': 'Motorola XOOM™ with Wi-Fi',
89+
'snippet': 'The Next, Next Generation tablet.'},
90+
{'name': 'MOTOROLA XOOM™',
91+
'snippet': 'The Next, Next Generation tablet.'}
9092
];
91-
}
92-
93-
var phonecatApp = angular.module('phonecatApp',[]);
94-
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
93+
});
9594

9695
</pre>
9796

98-
Here we have declared a controller called __PhoneListCtrl__ and registered it in an AngularJS
97+
Here we declared a controller called __PhoneListCtrl__ and registered it in an AngularJS
9998
module, `phonecatApp`. Notice that our `ng-app` directive (on the `<html>` tag) now specifies the `phonecatApp`
10099
module name as the module to load when bootstrapping the Angular application.
101100

102-
Although the controller is not yet doing very much controlling, it is playing a crucial role. By
103-
providing context for our data model, the controller allows us to establish data-binding between
101+
Although the controller is not yet doing very much, it plays a crucial role. By providing context
102+
for our data model, the controller allows us to establish data-binding between
104103
the model and the view. We connected the dots between the presentation, data, and logic components
105104
as follows:
106105

‎docs/content/tutorial/step_04.ngdoc

+10-15
Original file line numberDiff line numberDiff line change
@@ -65,25 +65,20 @@ necessary!
6565

6666
__`app/js/controllers.js`:__
6767
<pre>
68-
function PhoneListCtrl($scope) {
68+
var phonecatApp = angular.module('phonecatApp', []);
69+
70+
phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
6971
$scope.phones = [
70-
{"name": "Nexus S",
71-
"snippet": "Fast just got faster with Nexus S.",
72-
"age": 0},
73-
{"name": "Motorola XOOM™ with Wi-Fi",
74-
"snippet": "The Next, Next Generation tablet.",
75-
"age": 1},
76-
{"name": "MOTOROLA XOOM™",
77-
"snippet": "The Next, Next Generation tablet.",
78-
"age": 2}
72+
{'name': 'Nexus S',
73+
'snippet': 'Fast just got faster with Nexus S.'},
74+
{'name': 'Motorola XOOM™ with Wi-Fi',
75+
'snippet': 'The Next, Next Generation tablet.'},
76+
{'name': 'MOTOROLA XOOM™',
77+
'snippet': 'The Next, Next Generation tablet.'}
7978
];
8079

8180
$scope.orderProp = 'age';
82-
}
83-
84-
var phonecatApp = angular.module('phonecatApp',[]);
85-
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
86-
81+
});
8782
</pre>
8883

8984
* We modified the `phones` model - the array of phones - and added an `age` property to each phone

‎docs/content/tutorial/step_05.ngdoc

+5-6
Original file line numberDiff line numberDiff line change
@@ -54,16 +54,15 @@ components themselves, but by the DI subsystem).
5454

5555
__`app/js/controllers.js:`__
5656
<pre>
57-
function PhoneListCtrl($scope, $http) {
57+
var phonecatApp = angular.module('phonecatApp', []);
58+
59+
phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
5860
$http.get('phones/phones.json').success(function(data) {
5961
$scope.phones = data;
6062
});
6163

6264
$scope.orderProp = 'age';
63-
}
64-
65-
var phonecatApp = angular.module('phonecatApp',[]);
66-
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
65+
});
6766
</pre>
6867

6968
`$http` makes an HTTP GET request to our web server, asking for `phone/phones.json` (the url is
@@ -107,7 +106,7 @@ constructor function, if you were to {@link http://en.wikipedia.org/wiki/Minific
107106
minify} the JavaScript code for `PhoneListCtrl` controller, all of its function arguments would be
108107
minified as well, and the dependency injector would not be able to identify services correctly.
109108

110-
There are two ways to overcome issues caused by minification.
109+
There are two ways to overcome issues caused by minification:
111110

112111
* You can create a `$inject` property on the controller function which holds an array of strings.
113112
Each string in the array is the name of the service to inject for the corresponding parameter.

‎docs/content/tutorial/step_06.ngdoc

+8-8
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,16 @@ urls point to the `app/img/phones/` directory.
2727

2828
__`app/phones/phones.json`__ (sample snippet):
2929
<pre>
30-
[
30+
[
3131
{
32-
...
33-
"id": "motorola-defy-with-motoblur",
34-
"imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
35-
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
36-
...
32+
...
33+
"id": "motorola-defy-with-motoblur",
34+
"imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
35+
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
36+
...
3737
},
38-
...
39-
]
38+
...
39+
]
4040
</pre>
4141

4242

‎docs/content/tutorial/step_07.ngdoc

+22-10
Original file line numberDiff line numberDiff line change
@@ -69,13 +69,23 @@ both module systems can live side by side and fulfil their goals.
6969

7070
__`app/js/app.js`:__
7171
<pre>
72-
var phonecatApp = angular.module('phonecatApp', []).
73-
config(['$routeProvider', function($routeProvider) {
74-
$routeProvider.
75-
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
76-
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
77-
otherwise({redirectTo: '/phones'});
78-
}]);
72+
var phonecatApp = angular.module('phonecatApp', ['phonecatFilters']);
73+
74+
phonecatApp.config(['$routeProvider',
75+
function($routeProvider) {
76+
$routeProvider.
77+
when('/phones', {
78+
templateUrl: 'partials/phone-list.html',
79+
controller: 'PhoneListCtrl'
80+
}).
81+
when('/phones/:phoneId', {
82+
templateUrl: 'partials/phone-detail.html',
83+
controller: 'PhoneDetailCtrl'
84+
}).
85+
otherwise({
86+
redirectTo: '/phones'
87+
});
88+
}]);
7989
</pre>
8090

8191
In order to configure our application with routes, we need to create a module for our application.
@@ -124,9 +134,10 @@ __`app/index.html`:__
124134
__`app/js/controllers.js`:__
125135
<pre>
126136
...
127-
phonecatApp.controller('PhoneDetailCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
128-
$scope.phoneId = $routeParams.phoneId;
129-
}]);
137+
phonecatApp.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
138+
function($scope, $routeParams) {
139+
$scope.phoneId = $routeParams.phoneId;
140+
}]);
130141
</pre>
131142

132143

@@ -251,6 +262,7 @@ the same binding into the `phone-list.html` template, the binding will work as e
251262
inheritance and model property shadowing do some wonders.
252263
</div>
253264

265+
254266
# Summary
255267

256268
With the routing set up and the phone list view implemented, we're ready to go to {@link step_08

0 commit comments

Comments
 (0)