AngularJS Web Application Development Blueprints

Adding contacts to the Address Book

Now that we have our Address Book displaying our contacts nicely, let's now create a form to add contacts.

Let us add the markup for the Add a Contact form in the index.html file within the body tag as follows:

<div class="wrapper">
   <h2>Add a Contact</h2>
   Name: <input type="text" ng-model="newPerson.name"></input> 
   Phone: <input type="text" ng-model="newPerson.phone"></input>
   City: <input type="text" ng-model="newPerson.city"></input>
         <button ng-click="Save()">Save</button>
   </div>	

The preceding code is rather straightforward. We create a new div and reuse the wrapper class to style it.

We are adding the three textboxes for the name, phone, and city attributes. We bind these three textboxes to a model object called ...