mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 15:40:22 +00:00
88 lines
2.5 KiB
Text
Executable file
88 lines
2.5 KiB
Text
Executable file
@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>
|