step_01.html

<a href='http://github.com/angular/angular.js/edit/master/docs/content/tutorial/step_01.ngdoc' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this doc</a>


<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>
<ul>
<li>The page now contains a list with information about two phones.</li>
</ul>
<div doc-tutorial-reset="1"></div>


<p><strong><code>app/index.html</code>:</strong></p>
<pre><code class="lang-html">  &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;</code></pre>
<h1 id="experiments">Experiments</h1>
<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>
<h1 id="summary">Summary</h1>
<p>This addition to your app uses static HTML to display the list. Now, let&#39;s go to <a href="tutorial/step_02">step 2</a> to learn how to use AngularJS to dynamically generate the same list.</p>
<ul doc-tutorial-nav="1"></ul>