Static Templates

Note: If you skipped ahead to this section, click here to download a zip of the tutorial at this point.

Let's create a purely static HTML page and then examine how we can turn this HTML code into a template that Angular 1 will use to dynamically display the same result with any set of data.

Add this template HTML to client/main.html:

1.1 Add some static HTML the to main page client/main.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
  <li>
    <span>Dubstep-Free Zone</span>
    <p>
      Can we please just for an evening not listen to dubstep.
    </p>
  </li>
  <li>
    <span>All dubstep all the time</span>
    <p>
      Get it on!
    </p>
  </li>
</ul>

Next we'll dynamically generate the same list using Angular 1.