AngularJS Boots

Static template

To demonstrate how Angular enhances static HTML, you can create a pure static HTML page and then take a closer look at how we can turn this HTML code into a template so that Angular can be used to dynamically display the same results and display them in any dataset.

In this step, you'll add basic information about both phones to an HTML page.

• The page now contains a list with information about the two phones.

Reset the workspace to the first step

git checkout -f step-1

Refresh your browser or check this step online: Step 1 Live Demo

The most important differences between step zero and step 1 are listed below. You can see the full difference in GitHub.

app/index.html:

  <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>

Experiment

• Try adding index.html HTML to the index. Like what:

<p>Total number of phones: 2</p>

Summarize

Use static HTML for your app to display this list. Now, let's go to the second step Angular template to learn how to use AngularJS to dynamically generate the same list.

In the next section, we'll cover the AngularJS static template.