diff options
Diffstat (limited to 'docs/content/tutorial/step_01.ngdoc')
| -rwxr-xr-x | docs/content/tutorial/step_01.ngdoc | 57 | 
1 files changed, 42 insertions, 15 deletions
| diff --git a/docs/content/tutorial/step_01.ngdoc b/docs/content/tutorial/step_01.ngdoc index 4f0640c9..a0fac338 100755 --- a/docs/content/tutorial/step_01.ngdoc +++ b/docs/content/tutorial/step_01.ngdoc @@ -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> + | 
