43 lines
1.8 KiB
HTML
Executable file
43 lines
1.8 KiB
HTML
Executable file
<a href="http://github.com/angular/angular.js/edit/master/docs/content/tutorial/step_01.ngdoc" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable=""></code>
|
|
<div><span class="hint"></span>
|
|
</div>
|
|
</h1>
|
|
<div><div class="tutorial-page tutorial-1-static-template-page"><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>
|
|
<div doc-tutorial-reset="1">
|
|
</div>
|
|
|
|
|
|
<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>
|
|
<pre class="prettyprint linenums">
|
|
<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>
|
|
<h2>Experiments</h1>
|
|
<ul>
|
|
<li><p>Try adding more static HTML to <code>index.html</code>. For example:</p>
|
|
<pre><code> <p>Total number of phones: 2</p></code></pre>
|
|
</li>
|
|
</ul>
|
|
<h1>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 AngularJS to dynamically generate the same list.</p>
|
|
<ul doc-tutorial-nav="1"></ul></div></div>
|