diff options
| author | Igor Minar | 2011-05-02 10:16:50 -0700 |
|---|---|---|
| committer | Igor Minar | 2011-06-06 22:28:38 -0700 |
| commit | 6181ca600d3deced0a054551ff6c704bc17d6b7d (patch) | |
| tree | bd67f96eea18164c751a08c74d6124cddcc9d890 /docs/content/tutorial/step_01.ngdoc | |
| parent | 11e9572b952e49b01035e956c412d6095533031a (diff) | |
| download | angular.js-6181ca600d3deced0a054551ff6c704bc17d6b7d.tar.bz2 | |
new batch of tutorial docs
Diffstat (limited to 'docs/content/tutorial/step_01.ngdoc')
| -rwxr-xr-x | docs/content/tutorial/step_01.ngdoc | 157 |
1 files changed, 69 insertions, 88 deletions
diff --git a/docs/content/tutorial/step_01.ngdoc b/docs/content/tutorial/step_01.ngdoc index e22adc20..b9c171d2 100755 --- a/docs/content/tutorial/step_01.ngdoc +++ b/docs/content/tutorial/step_01.ngdoc @@ -1,88 +1,69 @@ -@workInProgress
-@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 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_02 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.step_00 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_02 Next}</td>
- </tr>
-</table>
+@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, our server}. Your 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> + +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> |