blob: 4f0640c9c369fb940e6bde8742ef4a15306c23df (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
@ngdoc overview
@name Tutorial: Step 1
@description
<table id="tutorial_nav">
<tr>
<td id="previous_step">{@link tutorial.step_00 Previous}</td>
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-1/app Live
Demo}</td>
<td id="tut_home">{@link tutorial Tutorial Home}</td>
<td id="code_diff">
{@link https://github.com/angular/angular-phonecat/compare/step-0...step-1 Code Diff}</td>
<td id="next_step">{@link tutorial.step_02 Next}</td>
</tr>
</table>
In this step you will add some basic information about two cell phones to our app.
1. Do one of the following to reset your workspace to step 1; be aware that this will throw away
any changes you might have made to the tutorial files:
* Git users run:
git checkout --force step-1
* Snapshot users run:
./goto_step.sh 1
2. Refresh your browser or check the app out on {@link
http://angular.github.com/angular-phonecat/step-1/app anglar's server}. The page now contains a
list with information about two phones.
The most important changes are listed below. You can see the full diff on {@link
https://github.com/angular/angular-phonecat/compare/step-0...step-1 GitHub}:
__`app/index.html`:__
<pre>
...
<ul>
<li>
<span>Nexus S<span>
<p>
Fast just got faster with Nexus S.
</p>
</li>
<li>
<span>Motorola XOOM™ with Wi-Fi<span>
<p>
The Next, Next Generation tablet.
</p>
</li>
</ul>
...
</pre>
# Experiments
* Try adding more static html to `index.html`. For example:
<p>Total number of phones: 3</p>
# Summary
This addition to your app uses static HTML to display the list. Now, let's go to step 2 to learn
how to use angular to dynamically generate the same list.
<table id="tutorial_nav">
<tr>
<td id="previous_step">{@link tutorial.step_00 Previous}</td>
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-1/app Live
Demo}</td>
<td id="tut_home">{@link tutorial Tutorial Home}</td>
<td id="code_diff">
{@link https://github.com/angular/angular-phonecat/compare/step-0...step-1 Code Diff}</td>
<td id="next_step">{@link tutorial.step_02 Next}</td>
</tr>
</table>
|
