Skip to content

Commit 075c089

Browse files
IgorMinarIgorMinar
committed
docs(tutorial): update all the remaining steps
I made some diagrams and portions of the text that are stil stale invisible. We'll fix these in the next relese.
1 parent 2b87c81 commit 075c089

12 files changed

+473
-356
lines changed

‎docs/content/tutorial/step_00.ngdoc

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -149,16 +149,17 @@ The code contains some key Angular elements that we will need going forward.
149149
__`app/index.html`:__
150150
<pre>
151151
<!doctype html>
152-
<html ng-app>
152+
<html lang="en" ng-app>
153153
<head>
154154
<meta charset="utf-8">
155-
<title>my angular app</title>
155+
<title>My HTML File</title>
156156
<link rel="stylesheet" href="css/app.css">
157+
<link rel="stylesheet" href="css/bootstrap.css">
157158
<script src="lib/angular/angular.js"></script>
158159
</head>
159160
<body>
160161

161-
Nothing here {{'yet' + '!'}}
162+
<p>Nothing here {{'yet' + '!'}}</p>
162163

163164
</body>
164165
</html>
@@ -245,8 +246,9 @@ scripts and a simple example app, all pre-configured for developing a typical we
245246
For the purposes of this tutorial, we modified the angular-seed with the following changes:
246247

247248
* Removed the example app
248-
* Added phone images to `app/img/phones`
249-
* Added phone data files (JSON) to `app/phones`
249+
* Added phone images to `app/img/phones/`
250+
* Added phone data files (JSON) to `app/phones/`
251+
* Added [Bootstrap](http://twitter.github.com/bootstrap/) files to `app/css/` and `app/img/`
250252

251253

252254

@@ -265,9 +267,9 @@ Now let's go to {@link step_01 step 1} and add some content to the web app.
265267

266268
<ul doc:tutorial-nav="0"></ul>
267269

268-
Move elsewhere:
269-
270+
<div style="display: none">
270271
Note: During the bootstrap the injector and the root scope will then be associated with the
271272
element on which the `ngApp` directive was declared, so when debugging the app you can retrieve
272273
them from browser console via `angular.element(rootElement).scope()` and
273274
`angular.element(rootElement).injector()`.
275+
</div>

‎docs/content/tutorial/step_02.ngdoc

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,14 @@ the `PhoneListCtrl` __controller__:
7575
__`app/js/controllers.js`:__
7676
<pre>
7777
function PhoneListCtrl($scope) {
78-
$scope.phones = [{"name": "Nexus S",
79-
"snippet": "Fast just got faster with Nexus S."},
80-
{"name": "Motorola XOOM™ with Wi-Fi",
81-
"snippet": "The Next, Next Generation tablet."},
82-
{"name": "MOTOROLA XOOM™",
83-
"snippet": "The Next, Next Generation tablet."}];
78+
$scope.phones = [
79+
{"name": "Nexus S",
80+
"snippet": "Fast just got faster with Nexus S."},
81+
{"name": "Motorola XOOM™ with Wi-Fi",
82+
"snippet": "The Next, Next Generation tablet."},
83+
{"name": "MOTOROLA XOOM™",
84+
"snippet": "The Next, Next Generation tablet."}
85+
];
8486
}
8587
</pre>
8688

@@ -120,7 +122,7 @@ __`test/unit/controllersSpec.js`:__
120122
<pre>
121123
describe('PhoneCat controllers', function() {
122124

123-
describe('PhoneListCtrl', function() {
125+
describe('PhoneListCtrl', function(){
124126

125127
it('should create "phones" model with 3 phones', function() {
126128
var scope = {},
@@ -163,7 +165,7 @@ execute the tests and report the results in the terminal.
163165
Chrome: Runner reset.
164166
.
165167
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)
166-
Chrome 11.0.696.57 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)
168+
Chrome 19.0.1084.36 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)
167169

168170
Yay! The test passed! Or not...
169171

‎docs/content/tutorial/step_03.ngdoc

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,27 @@ We made no changes to the controller.
3232
__`app/index.html`:__
3333
<pre>
3434
...
35-
Fulltext Search: <input ng-model="query">
36-
37-
<ul class="phones">
38-
<li ng-repeat="phone in phones | filter:query">
39-
{{phone.name}}
40-
<p>{{phone.snippet}}</p>
41-
</li>
42-
</ul>
35+
<div class="container-fluid">
36+
<div class="row-fluid">
37+
<div class="span2">
38+
<!--Sidebar content-->
39+
40+
Search: <input ng-model="query">
41+
42+
</div>
43+
<div class="span10">
44+
<!--Body content-->
45+
46+
<ul class="phones">
47+
<li ng-repeat="phone in phones | filter:query">
48+
{{phone.name}}
49+
<p>{{phone.snippet}}</p>
50+
</li>
51+
</ul>
52+
53+
</div>
54+
</div>
55+
</div>
4356
...
4457
</pre>
4558

@@ -54,7 +67,7 @@ list. This new code demonstrates the following:
5467
name of the input box to a variable of the same name in the data model and keeps the two in sync.
5568

5669
In this code, the data that a user types into the input box (named __`query`__) is immediately
57-
available as a filter input in the list repeater (`phone in phones | filter(`__`query`__`)`). When
70+
available as a filter input in the list repeater (`phone in phones | filter:`__`query`__). When
5871
changes to the data model cause the repeater's input to change, the repeater efficiently updates
5972
the DOM to reflect the current state of the model.
6073

@@ -86,6 +99,7 @@ describe('PhoneCat App', function() {
8699
browser().navigateTo('../../app/index.html');
87100
});
88101

102+
89103
it('should filter the phone list as user types into the search box', function() {
90104
expect(repeater('.phones li').count()).toBe(3);
91105

‎docs/content/tutorial/step_04.ngdoc

Lines changed: 34 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,21 @@ The most important differences between Steps 3 and 4 are listed below. You can s
2525
__`app/index.html`:__
2626
<pre>
2727
...
28-
<ul class="controls">
29-
<li>
30-
Search: <input ng-model="query">
31-
</li>
32-
<li>
33-
Sort by:
34-
<select ng-model="orderProp">
35-
<option value="name">Alphabetical</option>
36-
<option value="age">Newest</option>
37-
</select>
38-
</li>
39-
</ul>
40-
41-
<ul class="phones">
42-
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
43-
{{phone.name}}
44-
<p>{{phone.snippet}}</p>
45-
</li>
46-
</ul>
28+
Search: <input ng-model="query">
29+
Sort by:
30+
<select ng-model="orderProp">
31+
<option value="name">Alphabetical</option>
32+
<option value="age">Newest</option>
33+
</select>
34+
35+
...
36+
37+
<ul class="phones">
38+
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
39+
{{phone.name}}
40+
<p>{{phone.snippet}}</p>
41+
</li>
42+
</ul>
4743
...
4844
</pre>
4945

@@ -72,18 +68,18 @@ necessary!
7268

7369
__`app/js/controller.js`:__
7470
<pre>
75-
/* App Controllers */
76-
7771
function PhoneListCtrl($scope) {
78-
$scope.phones = [{"name": "Nexus S",
79-
"snippet": "Fast just got faster with Nexus S.",
80-
"age": 0},
81-
{"name": "Motorola XOOM™ with Wi-Fi",
82-
"snippet": "The Next, Next Generation tablet.",
83-
"age": 1},
84-
{"name": "MOTOROLA XOOM™",
85-
"snippet": "The Next, Next Generation tablet.",
86-
"age": 2}];
72+
$scope.phones = [
73+
{"name": "Nexus S",
74+
"snippet": "Fast just got faster with Nexus S.",
75+
"age": 0},
76+
{"name": "Motorola XOOM™ with Wi-Fi",
77+
"snippet": "The Next, Next Generation tablet.",
78+
"age": 1},
79+
{"name": "MOTOROLA XOOM™",
80+
"snippet": "The Next, Next Generation tablet.",
81+
"age": 2}
82+
];
8783

8884
$scope.orderProp = 'age';
8985
}
@@ -114,11 +110,11 @@ __`test/unit/controllerSpec.js`:__
114110
<pre>
115111
describe('PhoneCat controllers', function() {
116112

117-
describe('PhoneListCtrl', function() {
118-
var scope, $browser, ctrl;
113+
describe('PhoneListCtrl', function(){
114+
var scope, ctrl;
119115

120116
beforeEach(function() {
121-
scope = {};
117+
scope = {},
122118
ctrl = new PhoneListCtrl(scope);
123119
});
124120

@@ -147,7 +143,7 @@ following output.
147143
Chrome: Runner reset.
148144
..
149145
Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms)
150-
Chrome 11.0.696.57 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)
146+
Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)
151147

152148

153149
Let's turn our attention to the end-to-end test.
@@ -157,15 +153,14 @@ __`test/e2e/scenarios.js`:__
157153
...
158154
it('should be possible to control phone order via the drop down select box',
159155
function() {
160-
161-
// narrow the dataset to make the test assertions shorter
156+
//let's narrow the dataset to make the test assertions shorter
162157
input('query').enter('tablet');
163158

164159
expect(repeater('.phones li', 'Phone List').column('phone.name')).
165160
toEqual(["Motorola XOOM\u2122 with Wi-Fi",
166161
"MOTOROLA XOOM\u2122"]);
167162

168-
select('orderProp').option('alphabetical');
163+
select('orderProp').option('Alphabetical');
169164

170165
expect(repeater('.phones li', 'Phone List').column('phone.name')).
171166
toEqual(["MOTOROLA XOOM\u2122",
@@ -183,12 +178,9 @@ Angular's server}.
183178

184179
# Experiments
185180

186-
<div style="display:none">
187-
!!!!! TODO(i): we need to fix select/option to support unknown option !!!!!
188181
* In the `PhoneListCtrl` controller, remove the statement that sets the `orderProp` value and
189-
you'll see that the ordering as well as the current selection in the dropdown menu will default to
190-
"Alphabetical".
191-
</div>
182+
you'll see that Angular will temporarily add a new "unknown" option to the drop-down list and the
183+
ordering will default to unordered/natural order.
192184

193185
* Add an `{{orderProp}}` binding into the `index.html` template to display its current value as
194186
text.

0 commit comments

Comments
 (0)