add new batch of tutorial docs and images

This commit is contained in:
Igor Minar
2011-05-10 17:45:42 -07:00
parent 3776e08db0
commit 3751f172b3
22 changed files with 1088 additions and 365 deletions

View File

@@ -1,11 +1,11 @@
@ngdoc overview
@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>
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>
@@ -13,38 +13,53 @@
</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:
In order to illustrate how angular enhances standard HTML, you will create a purely *static* HTML
page and then examine how we can turn this HTML code into a template that angular will use to
dynamically display the same result with any set of data.
* Git users run:
git checkout --force step-1
In this step you will add some basic information about two cell phones to an HTML page.
1. Reset the workspace to step 1.
* Git users run:
git checkout -f step-1
* Snapshot users run:
* 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.
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>
<span>Nexus S</span>
<p>
Fast just got faster with Nexus S.
</p>
</li>
<li>
<span>Motorola XOOM™ with Wi-Fi<span>
<span>Motorola XOOM™ with Wi-Fi</span>
<p>
The Next, Next Generation tablet.
</p>
@@ -53,26 +68,38 @@ __`app/index.html`:__
...
</pre>
# Experiments
* Try adding more static html to `index.html`. For example:
<p>Total number of phones: 3</p>
* Try adding more static HTML to `index.html`. For example:
<pre>
<p>Total number of phones: 2</p>
</pre>
# 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>
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>