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

https://bitbucket.org/kaiquewdev/front-in-sampa-example · HTML · 50 lines · 38 code · 12 blank · 0 comment · 0 complexity · 2c6ca4bc70f1a72f15845d05dbe373eb MD5 · raw file

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