step_01.html

<h1>Tutorial: 1 - Static Template</h1>
<div class="tutorial-1-static-template"><ul doc:tutorial-nav="1"></ul>

<p>In order to illustrate how angular enhances standard HTML, you will create a purely <em>static</em> 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.</p>

<p>In this step you will add some basic information about two cell phones to an HTML page.</p><doc:tutorial-instructions step="1" show="true"></doc:tutorial-instructions><p>The page now contains a list with information about two phones.</p>

<p>The most important changes are listed below. You can see the full diff on <a href="https://github.com/angular/angular-phonecat/compare/step-0...step-1">GitHub</a>:</p>

<p><strong><code>app/index.html</code>:</strong></p><div ng:non-bindable><pre class="brush: js; html-script: true;">
...
  &lt;ul&gt;
    &lt;li&gt;
      &lt;span&gt;Nexus S&lt;/span&gt;
      &lt;p&gt;
        Fast just got faster with Nexus S.
      &lt;/p&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;span&gt;Motorola XOOM™ with Wi-Fi&lt;/span&gt;
      &lt;p&gt;
        The Next, Next Generation tablet.
      &lt;/p&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
...
</pre></div><h2>Experiments</h2>

<ul>
<li><p>Try adding more static HTML to <code>index.html</code>. For example:</p>

<pre><code>  &lt;p&gt;Total number of phones: 2&lt;/p&gt;
</code></pre></li>
</ul>

<h2>Summary</h2>

<p>This addition to your app uses static HTML to display the list. Now, let's go to <a href="#!/tutorial/step_02">step 2</a> to learn how to use angular to dynamically generate the same list.</p>

<ul doc:tutorial-nav="1"></ul></div>