/app/public/js/libs/angular/docs/partials/tutorial/step_01.html

 1<h1><code ng:non-bindable=""></code>
 2<span class="hint"></span>
 3</h1>
 4<div><ul doc-tutorial-nav="1"></ul>
 5
 6<p>In order to illustrate how angular enhances standard HTML, you will create a purely <em>static</em> HTML
 7page and then examine how we can turn this HTML code into a template that angular will use to
 8dynamically display the same result with any set of data.</p>
 9
10<p>In this step you will add some basic information about two cell phones to an HTML page.</p>
11
12<div doc-tutorial-reset="1">
13</div>
14
15<p>The page now contains a list with information about two phones.</p>
16
17<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>
18
19<p><strong><code>app/index.html</code>:</strong>
20<pre class="prettyprint linenums">
21  &lt;ul&gt;
22    &lt;li&gt;
23      &lt;span&gt;Nexus S&lt;/span&gt;
24      &lt;p&gt;
25        Fast just got faster with Nexus S.
26      &lt;/p&gt;
27    &lt;/li&gt;
28    &lt;li&gt;
29      &lt;span&gt;Motorola XOOM�&#x201E;? with Wi-Fi&lt;/span&gt;
30      &lt;p&gt;
31        The Next, Next Generation tablet.
32      &lt;/p&gt;
33    &lt;/li&gt;
34  &lt;/ul&gt;
35</pre>
36
37<h2>Experiments</h2>
38
39<ul>
40<li><p>Try adding more static HTML to <code>index.html</code>. For example:</p>
41
42<pre><code>  &lt;p&gt;Total number of phones: 2&lt;/p&gt;
43</code></pre></li>
44</ul>
45
46<h2>Summary</h2>
47
48<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 AngularJS to dynamically generate the same list.</p>
49
50<ul doc-tutorial-nav="1"></ul></div>