<!-- This is a partial, and is templated by AngularJS -->
<div>
    <!-- Standard HTML form, with the submit function bound to the register() function defined in the the controller -->
    <form name="regForm" class="form-horizontal" ng-submit="register()">
        <h2>Member Registration</h2>
        <fieldset>
            ...
        </fieldset>
    </form>
    ....
</div>

⁠

Figure 4.1. Form Generated with AngularJS

<fieldset>
            <legend>Register a member:</legend>
            <!-- Each input is bound to a property on the prototype newMember object -->
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Name:</label>
                <div class="col-sm-10">
                    <input type="text" name="name" id="name"  ng-model="newMember.name" placeholder="Your Name" required autofocus/>
                    <span class="error help-block" ng-show="regForm.name.$error.required">required</span>
                    <span class="error help-block" ng-show="errors.name">{{errors.name}}</span>
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">Email:</label>
                <div class="col-sm-10">
                    <input type="email" name="email" id="email" ng-model="newMember.email" placeholder="Your Email" required />
                    <span class="error help-block" ng-show="regForm.email.$error.required">required</span>
                    <span class="error help-block" ng-show="regForm.email.$error.email">not a valid email</span>
                    <span class="error help-block" ng-show="errors.email">{{errors.email}}</span>
                </div>
            </div>
            <div class="form-group">
                <label for="phoneNumber" class="col-sm-2 control-label">Phone #:</label>
                <div class="col-sm-10">
                    <input type="tel" name="phoneNumber" id="phoneNumber" ng-model="newMember.phoneNumber" ng-pattern="/^[0-9]{10,12}$/" placeholder="Your Phone #" required />
                    <span class="error help-block" ng-show="regForm.phoneNumber.$error.required">required</span>
                    <span class="error help-block" ng-show="regForm.phoneNumber.$error.pattern">must be between 10 and 12 digits</span>
                    <span class="error help-block" ng-show="errors.phoneNumber">{{errors.phoneNumber}}</span>
                </div>
            </div>
            ....
</fieldset>

<fieldset>
            ...
            <!-- We output a list of success messages (appropriately styled!) for the form. -->
            <ul ng-hide="!successMessages" class="success">
                <li ng-repeat="message in successMessages">{{message}}</li>
            </ul>

            <!-- Output the list of error messages if any. -->
            <ul ng-hide="!errorMessages" class="error">
                <li ng-repeat="message in errorMessages">{{message}}</li>
            </ul>
            ...
</fieldset>

<!-- This is a partial, and is templated by AngularJS -->
<div>
    ...
    <!-- A list of registered members -->
    <h2>Members</h2>
    <!-- If there are no members registered, instead of showing the table, we show a simple message. -->
    <em ng-show="members.length == 0">No registered members.</em>
    <div class="table-responsive">
        <table ng-hide="members.length == 0" class="table table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone #</th>
                    <th>REST URL</th>
                </tr>
            </thead>
            <!-- The table is built using the AngularJS repeat function, iterating over the members variable, and ordering by the property specified in the orderBy variable -->
            <tr ng-repeat="member in members | orderBy:orderBy">
                <td>{{member.id}}</td>
                <td>{{member.name}}</td>
                <td>{{member.email}}</td>
                <td>{{member.phoneNumber}}</td>
                <td><a href="rest/members/{{member.id}}">/rest/members/{{member.id}}</a>
                </td>
        </table>
    </div>
    ...
</div>

<!-- This is a partial, and is templated by AngularJS -->
<div>
    ...
    <div>
        <!-- The table has a button to manually refresh the values, in case, for example, someone else adds a member -->
        <input type="button" ng-click="refresh()" name="refresh"
            id="refresh" value="Refresh" class="btn btn-default" />
    </div>
</div>