Introduction to AngularJS (part 1) : static templates

To illustrate how angularJS enhances standard HTML, we will first create a static HTML page template and then convert that static HTML page template into an angularJS template that displays dynamically.

In this step, we add the basic information of the two phones to the HTML page, and reset the working directory to step 1 with the following command.

git checkout -f step-1

Please edit the app/index.html file, add the following code to the index.html file, and then run the application to see the effect.

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>

practice

Try adding multiple static HTML code to index.html, for example:

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

conclusion

This step adds a static HTML cell phone list to the application, now let's go to step 2 to see how to dynamically generate the same list using AngularJS.