X Tutup
Skip to content

Commit 9d91173

Browse files
krculpIgorMinar
krculp
authored and
IgorMinar
committed
Latest greatest tutorial udpates.
1 parent 525e444 commit 9d91173

File tree

13 files changed

+379
-202
lines changed

13 files changed

+379
-202
lines changed

‎docs/content/tutorial/index.ngdoc‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ developing a typical web app. For this tutorial, we modified the angular-seed as
1818

1919
* Removed the example app
2020
* Added phone images to `app/img/phones`
21-
* Added phone data files (JSON) to `app/phones`
21+
* Added phone data files (JSON) to `app/phones`
2222

23-
Note: Using the angular seed app isn't required for building angular apps, but doing so helps
24-
you get started quickly and makes the development and testing process much easier.
23+
**Note**: Using the angular seed app isn't required for building angular apps, but doing so helps
24+
you get started quickly and makes the development and testing process much easier.
2525

2626
When you finish the tutorial you will be able to:
2727

@@ -46,36 +46,38 @@ To run the tutorial app and tests on your machine you will need the following:
4646

4747
* A Mac or Linux machine (required by the tutorial scripts, not angular)
4848
* An http server running on your system. If you don't already have one installed, you can install
49-
`node.js` ({@link https://github.com/joyent/node/wiki/Installation node.js install}) or another
50-
http sever (such as Apache, etc.).
51-
* Java. This is only required for if you want to run tests via JsTestDriver.
49+
`node.js` ({@link https://github.com/joyent/node/wiki/Installation node.js install guide}) or
50+
another http sever (such as Apache, etc.).
51+
* Java. This is required for running tests with JsTestDriver.
5252
* A web browser.
5353
* A text editor.
5454

55-
# Using Git
5655

57-
The following instructions are for developers who are comfortable with Git versioning system:
56+
# Working with the code
57+
58+
There are two ways that you can you follow this tutorial and hack on the code:
59+
60+
## Using Git
61+
62+
The following instructions are for developers who are comfortable with the Git versioning system:
5863

5964
1. Check to be sure you have all of the <a href="#PreReqs">prerequisites</a> on your system.
6065

6166
2. Clone the angular-phonecat repository located at {@link
62-
https://github.com/angular/angular-phonecat angular-phonecat} by running the following command in
63-
a terminal:
67+
https://github.com/angular/angular-phonecat GitHub} by running the following command in a terminal:
6468

65-
git clone git://github.com/angular/angular-phonecat.git
69+
git clone git://github.com/angular/angular-phonecat.git
6670

6771
This will create a directory called `angular-phonecat` in the current directory.
6872

6973
3. Change your current directory to `angular-phonecat`.
7074

71-
cd angular-phonecat
75+
cd angular-phonecat
7276

7377
The tutorial instructions assume you are running all commands from this directory.
7478

75-
Read the Tutorial Navigation section, then navigate to Step 0.
76-
7779

78-
# Using Snapshots
80+
## Using Snapshots
7981

8082
Snapshots are the sets of files that reflect the state of the tutorial app at each step. These
8183
files include the HTML, CSS, and JavaScript for the app, plus Jasmine JavaScript files and Java
@@ -84,18 +86,21 @@ knowledge of Git. You can download and install the snapshot files as follows:
8486

8587
1. Check to be sure you have all of the <a href="#PreReqs">prerequisites</a> on your system.
8688

87-
2. Navigate to [*the angular server*], download and then unzip [*the snapshot file*] to an
88-
[*install-dir*].
89+
2. {@link TODO Download the zip archive} with all files and unzip them into `[tutorial-dir]`
90+
directory.
8991

90-
3. Change directories to [*install-dir*]/sandbox.
9192

92-
cd [*install-dir*]/sandbox
93+
3. Change directories to `[tutorial-dir]/sandbox`.
94+
95+
cd [tutorial-dir]/sandbox
9396

94-
Read the Tutorial Navigation section, then navigate to step-0.
9597

9698
# Tutorial Navigation
9799

98100
To see the app running on the angular server, click the "Live Demo" link at the top or bottom of
99101
any tutorial page. To view the code differences between tutorial steps, click the Code Diff link
100102
at top or bottom of each tutorial page. In the Code Diff, additions are highlighted in green;
101-
deletions are highlighted in red.
103+
deletions are highlighted in red.
104+
105+
106+
Let's get going and proceed to {@link tutorial/step_00 step 0}.

‎docs/content/tutorial/step_00.ngdoc‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,25 @@
88
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-0/app Live Demo}</td>
99
<td id="tut_home">{@link tutorial Tutorial Home}</td>
1010
<td id="code_diff">Code Diff</td>
11-
<td id="next_step">{@link tutorial.step_0 Next}</td>
11+
<td id="next_step">{@link tutorial.step_01 Next}</td>
1212
</tr>
1313
</table>
1414

1515
You are now ready to build the phone cat application. In this step, you will become familiar with
16-
the most important source code files, learn how to start the web services, and run the application
17-
in the browser.
16+
the most important source code files, learn how to start the development servers bundled with
17+
angular-seed, and run the application in the browser.
1818

1919
1. Do one of the following:
2020

2121
* Git users: In the `angular-phonecat` directory, run this command:
2222

2323
git checkout step-0
2424

25-
* Snapshot users: In the `[install directory]/sandbox` directory, run this command:
25+
* Snapshot users: In the `[tutorial-dir]/sandbox` directory, run this command:
2626

2727
./goto_step.sh 0
2828

29-
This resets your workspace to Step 0 of the tutorial app.
29+
This resets your workspace to Step 0 of the tutorial app.
3030

3131
2. To see the app running in a browser, do one of the following:
3232
* __For node.js users:__
@@ -36,8 +36,7 @@ This resets your workspace to Step 0 of the tutorial app.
3636

3737
* __For other http servers:__
3838
1. Configure the server to serve the files in the `angular-phonecat` directory.
39-
2. Run `./scripts/web-server.js` to start the app server.
40-
3. Navigate in your browser to
39+
2. Navigate in your browser to
4140
http://localhost:[*port-number*]/[*context-path*]/app/index.html.
4241

4342
You can now see the app in the browser. It's not very exciting, but that's OK.
@@ -75,9 +74,11 @@ versions older than 9 (regardless of whether you are using XHTML or HTML).
7574
registers a callback that will be executed by the browser when the containing HTML page is fully
7675
downloaded. When the callback is executed, angular looks for the {@link
7776
angular.directive.ng:autobind ng:autobind} attribute. If `ng:autobind` is found, it signals
78-
angular to bootstrap and compile and manage the whole html page.
77+
angular to bootstrap, compile, and manage the whole html page.
78+
79+
# Summary
7980

80-
Now let's go to Step 1 and add some content to the web app.
81+
Now let's go to step 1 and add some content to the web app.
8182

8283
<table id="tutorial_nav">
8384
<tr>

‎docs/content/tutorial/step_01.ngdoc‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
In this step you will add some basic information about two cell phones to our app.
1717

18-
1. Do one of the following to reset your workspace to Step 1; be aware that this will throw away
18+
1. Do one of the following to reset your workspace to step 1; be aware that this will throw away
1919
any changes you might have made to the tutorial files:
2020

2121
* Git users run:
@@ -27,8 +27,8 @@ any changes you might have made to the tutorial files:
2727
./goto_step.sh 1
2828

2929
2. Refresh your browser or check the app out on {@link
30-
http://angular.github.com/angular-phonecat/step-1/app, our server}. Your page now contains a list
31-
with information about two phones.
30+
http://angular.github.com/angular-phonecat/step-1/app anglar's server}. The page now contains a
31+
list with information about two phones.
3232

3333
The most important changes are listed below. You can see the full diff on {@link
3434
https://github.com/angular/angular-phonecat/compare/step-0...step-1 GitHub}:
@@ -53,7 +53,16 @@ __`app/index.html`:__
5353
...
5454
</pre>
5555

56-
This addition to your app uses static HTML to display the list. Now, let's go to Step 2 to learn
56+
# Experiments
57+
58+
* Try adding more static html to `index.html`. For example:
59+
60+
<p>Total number of phones: 3</p>
61+
62+
63+
# Summary
64+
65+
This addition to your app uses static HTML to display the list. Now, let's go to step 2 to learn
5766
how to use angular to dynamically generate the same list.
5867

5968
<table id="tutorial_nav">

‎docs/content/tutorial/step_02.ngdoc‎

Lines changed: 57 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,17 @@ of {@link http://en.wikipedia.org/wiki/Model–View–Controller the MVC design
2121
the code and separate concerns. With that in mind, let's use a little angular and JavaScript to
2222
add Model, View, and Controller components to our app.
2323

24-
1. Reset your workspace to Step 2 using:
24+
1. Reset your workspace to step 2 using:
2525

26-
git checkout --force step-2
27-
or
26+
git checkout --force step-2
2827

29-
./goto_step.sh 2
28+
or
29+
30+
./goto_step.sh 2
3031

3132
2. Refresh your browser or check the app out on {@link
32-
http://angular.github.com/angular-phonecat/step-2/app our server}. The app now contains a list
33-
with 3 phones.
33+
http://angular.github.com/angular-phonecat/step-2/app angular's server}. The app now contains a
34+
list with 3 phones.
3435

3536
The most important changes are listed below. You can see the full diff on {@link
3637
https://github.com/angular/angular-phonecat/compare/step-1...step-2 GitHub}:
@@ -67,9 +68,9 @@ and `{{phone.snippet}}`:
6768
`<li>` tag as the template.
6869

6970
* The curly braces around `phone.name` and `phone.snippet` are an example of {@link
70-
angular.markup angular markup}. The curly braces are shorthand for the angular directive
71-
{@link angular.directive.ng:bind ng:bind}. They indicate to angular that these are template
72-
binding points. Binding points are locations in the template where angular creates
71+
angular.markup angular markup}. The curly markup is shorthand for the angular directive {@link
72+
angular.directive.ng:bind ng:bind}. `ng:bind` directives indicates to angular that these are
73+
template binding points. Binding points are locations in the template where angular creates
7374
data-binding between the View and the Model. In angular, the View is a projection of the Model
7475
through the HTML template. This means that whenever the model changes, angular refreshes the
7576
appropriate binding points, which updates the view.
@@ -102,7 +103,7 @@ data, and logic components:
102103
(`PhoneListCtrl`).
103104
* We instantiated our data within the scope of our controller function, and our template
104105
binding points are located within the block bounded by the `<body
105-
ng:controller="PhoneListCtrl>` tag.
106+
ng:controller="PhoneListCtrl">` tag.
106107

107108
Angular uses scopes, along with the information contained in the template, data model, and
108109
controller to keep the Model and View separated but in sync: any changes to the model are
@@ -139,26 +140,59 @@ writing tests. Although Jasmine is not required by angular, we used it to write
139140
tutorial. You can learn about Jasmine on the {@link http://pivotal.github.com/jasmine/ Jasmine
140141
home page} and on the {@link https://github.com/pivotal/jasmine/wiki Jasmine wiki}.
141142

142-
angular-seed project is pre-configured to run all unit tests using {@link
143+
The angular-seed project is pre-configured to run all unit tests using {@link
143144
http://code.google.com/p/js-test-driver/ JsTestDriver}. To run the test, do the following:
144145

145-
1. In a _separate_ terminal window or tab, go to the `angular-phonecat` directory and run
146-
`./scripts/test-server.sh` to start the test web server.
146+
1. In a _separate_ terminal window or tab, go to the `angular-phonecat` directory and run
147+
`./scripts/test-server.sh` to start the test web server.
148+
149+
2. Open a new browser tab or window, navigate to http://localhost:9876, and choose "strict mode".
150+
At this point, you can leave this tab open and forget about it. JsTestDriver will use it to
151+
execute our tests and report the results in the terminal.
152+
153+
3. Execute the test by running `./scripts/test.sh`
154+
155+
You should see the following or similar output:
156+
157+
Chrome: Runner reset.
158+
.
159+
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)
160+
Chrome 11.0.696.57 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)
161+
162+
Yay! The test passed!
163+
164+
# Experiments
165+
166+
* Add another binding to `index.html`. For example:
167+
168+
<p>Total number of phones: {{phones.length}}</p>
169+
170+
* Create a new model property in the controller and bind to it from the template. For example:
171+
172+
this.hello = "Hello, World!"
173+
174+
* Create a repeater that constructs a simple table:
175+
176+
<table>
177+
<tr><th>row number</th></tr>
178+
<tr ng:repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
179+
</table>
180+
181+
Now, make the list 1-based by incrementing `i` by one in the binding:
147182

148-
2. Open a new browser tab or window, navigate to http://localhost:9876, and choose "strict
149-
mode". At this point, you can leave this tab open and forget about it. JsTestDriver will
150-
use it to execute our tests and report the results in the terminal.
183+
<table>
184+
<tr><th>row number</th></tr>
185+
<tr ng:repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
186+
</table>
151187

152-
3. Execute the test by running `./scripts/test.sh`
188+
* Make the unit test fail by changing the `toBe(3)` statement to `toBe(4)`, and rerun the
189+
`./scripts/test.sh` script.
153190

154-
You should see the following or similar output:
155191

156-
Chrome: Runner reset.
157-
.
158-
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)
159-
Chrome 11.0.696.57 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)
192+
# Summary
160193

161-
Yay! The test passed! Now, let's go to Step 3 to learn how to add full text search to the app.
194+
You now have a dynamic app that features separate model, view, and controller components, and
195+
you're testing as you go. Now, let's go to step 3 to learn how to add full text search to the app.
162196

163197

164198
<table id="tutorial_nav">

‎docs/content/tutorial/step_03.ngdoc‎

Lines changed: 45 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ eye on it, and quickly detects regressions.
2020

2121
1. Reset your workspace to Step 3 using:
2222

23-
git checkout --force step-3
23+
git checkout --force step-3
2424

25-
or
25+
or
2626

27-
./goto_step.sh 3
27+
./goto_step.sh 3
2828

2929
2. Refresh your browser or check the app out on {@link
30-
http://angular.github.com/angular-phonecat/step-3/app our server}. The app now has a search box.
31-
The phone list on the page changes depending on what a user types into the search box.
30+
http://angular.github.com/angular-phonecat/step-3/app angular's server}. The app now has a search
31+
box. The phone list on the page changes depending on what a user types into the search box.
3232

3333
The most important changes are listed below. You can see the full diff on {@link
3434
https://github.com/angular/angular-phonecat/compare/step-2...step-3
@@ -71,15 +71,15 @@ sync.
7171
When changes to the data model cause the repeater's input to change, the repeater efficiently
7272
updates the DOM to reflect the current state of the model.
7373

74-
* Use of `$filter`. The `{@link angular.Array.filter $filter}` method, uses the `query` value, to
74+
* Use of `$filter`. The {@link angular.Array.filter $filter} method, uses the `query` value, to
7575
create a new array that contains only those records that match the `query`.
7676

77-
* `ng:repeat` automatically updates the view in response to the changing number of phones returned
78-
by the `$filter`. The process is completely transparent to the developer.
77+
`ng:repeat` automatically updates the view in response to the changing number of phones returned
78+
by the `$filter`. The process is completely transparent to the developer.
7979

8080
## Test
8181

82-
In Step 2, we learned how to write and run unit tests. Unit tests are perfect for testing
82+
In step 2, we learned how to write and run unit tests. Unit tests are perfect for testing
8383
controllers and other components of our application written in JavaScript, but they can't easily
8484
test DOM manipulation or the wiring of our application. For these, an end-to-end test is a much
8585
better choice.
@@ -117,17 +117,48 @@ angular's end-to-end test runner}.
117117

118118
To run the end-to-end test, open the following in a new browser tab:
119119

120-
* node.js users: http://localhost:8000/test/e2e/runner.html
120+
* node.js users: {@link http://localhost:8000/test/e2e/runner.html}
121121
* users with other http servers:
122-
http://localhost:[*port-number*]/[*context-path*]/test/e2e/runner.html
123-
* casual reader: http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html
122+
`http://localhost:[*port-number*]/[*context-path*]/test/e2e/runner.html`
123+
* casual reader: {@link http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html}
124124

125125
This test verifies that the search box and the repeater are correctly wired together. Notice how
126126
easy it is to write end-to-end tests in angular. Although this example is for a simple test, it
127127
really is that easy to set up any functional, readable, end-to-end test.
128128

129-
Now that you've verified everything, go to Step 4 to learn how to add sorting capability to the
130-
phone list app.
129+
# Experiments
130+
131+
* Display the current value of the `query` model by adding a `{{query}}` binding into the
132+
`index.html` template, and see how it changes when you type in the input box.
133+
134+
* Change `index.html` to reflect the current search query in the html title by replacing the title
135+
tag in the head section with:
136+
137+
<title>Google Phone Gallery: {{query}}</title>`
138+
139+
If you reload the page, you won't see the expected result. This is because the "query" model
140+
lives in the scope defined by:
141+
142+
<body ng:controller="PhoneListCtrl">
143+
144+
In order to be able to bind to the query mode from `<title>`, we need to move the
145+
`ng:controller` declaration to an element that is a common parent for both the body and title
146+
elements. In our case that's the html element:
147+
148+
<html ng:controller="PhoneListCtrl">
149+
150+
* Make the end-to-end test fail by changing the first `toBe(3)` statement to `toBe(4)`, and
151+
refresh the end-to-end test runner tab in the browser to rerun the test.
152+
* Add a `wait();` statement into the end-to-end test and rerun it. You'll see the runner pausing,
153+
giving you the opportunity to explore the state of your application displayed in the browser. The
154+
app is live! Change the search query to prove it. This is great for troubleshooting end-to-end
155+
tests.
156+
157+
158+
# Summary
159+
160+
With full text search under our belt and a test to verify it, let's go to step 4 to learn how to
161+
add sorting capability to the phone app.
131162

132163
<table id="tutorial_nav">
133164
<tr>

0 commit comments

Comments
 (0)
X Tutup