Picking and adding a contact

Your app sometimes may need to access the device contact list for searching, picking, or adding a contact. This ability can save users time instead of requesting them to enter the information manually.

In this section, you will learn how $cordovaContacts works. Also the app will demonstrate the Ionic tabs feature by creating a navigation view container that has two tabs (a Find tab for picking a contact and an Add tab for saving a contact). Then UI-Router will wire each tab to a specific template. The following is the screenshot of the app:

How to do it...

Here are the steps to follow this recipe:

1. Create a blank Ionic app (for example, Contacts) and change the directory to that folder:

   $ ionic start Contacts blank
   

2. Install the Contacts plugin:

   $ cordova plugin add org.apache.cordova.contacts
   

3. Install ngCordova:

   $ bower install ngCordova
   

4. Open index.html and add ngCordova in the header:

   <script src="lib/ngCordova/dist/ng-cordova.js"></script>

5. You will...