angular.js/docs/content/tutorial/step_01.ngdoc

@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 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.


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:


              ./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.


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>




# Experiments


* 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>
    <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>