blob: d96eaeb306873863173421fcaef736b685e41813 (
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
79
80
81
82
83
84
85
86
87
88
|
@workInProgress
@ngdoc overview
@name Tutorial: Step 1
@description
<table id="tutorial_nav">
<tr>
<td id="previous_step">{@link tutorial Previous}</td>
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-1/app Example}</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_00 Next}</td>
</tr>
</table>
Now that we have the basic ingredients in place, let's add some basic information about two cell
phones to our app.
Note: We will usually include only the new code that we added for each step. In this and
subsequent examples, we will leave out code from the previous step that hasn't changed, for
example:
...
<html xmlns:ng="http://angularjs.org">
...
Let's add the following code to `index.html`:
__`app/index.html`:__
<pre>
<head>
...
<title>Google Phone Gallery</title>
...
</head>
...
<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>
## Discussion:
* It's a static web page! We displayed info about two phones! Yay.
* For those of you playing along at home on your own web servers, did you switch to Step 1 and
refresh your browsers?
* __{@link tutorial Using Git:}__
From your `angular-phonecat` directory, run this command:
git checkout step-1
* __{@link tutorial Using Snapshots:}__
From `[install directory]/sandbox`, run this command:
./goto_step.sh 1
* Now would be a good time to open up `app/index.html` in your browser and see the current state
of our "application". It's not very exciting, but that's ok.
When you're ready, let's move on and start using some angular features to turn this static page
into a dynamic web app.
<table id="tutorial_nav">
<tr>
<td id="previous_step">{@link tutorial Previous}</td>
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-1/app Example}</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_00 Next}</td>
</tr>
</table>
|
