Cordova Contact API example with AngularJS and Onsen UI

This tutorial is divide into three parts.

1. Designing the template with onesen ui
2. cordova contact plugin
3. rendering the contact with angularl

First we will design the layout in onsen UI for the application.So first we will create a page holder. Onsen UI provides <ons-navigator> component to serve this purpose.As the page holder is created by <ons-navigator>.Now lets create a page by using <ons-page>.One thing i would like to clear before proceeding ahead <ons-page>  should be used as root element of the page. The whole page will be encapsulated within <ons-page>.We want to show the contact image  to right side and the contact information to left side.For doing this lets create a row by using <ons-row align="center">. Now devide this row into two columns by using <ons-col>.As we have now two equally devide layouts at the center.

Now lets create the placeholder for the contact information by using simple <div> component.Now lets add a button at the end to envoke some method. For creating a button in onen UI we need <ons-button> component. Lets add this component just before where page gets close i.e. before </ons-page>. So the final template of the app will be

<ons-navigator>
    <ons-page>

          <h3></h3>
          <ons-row align="center">

              <div class="Demo">
            <ons-col>
               

               <div class="Demo">
              </div>
              <hr />
               

               <div class="Demo">
               </div>
               <hr />
               

              <div class="Demo">
              </div>
            </ons-col>

            <ons-col>

          <ons-button ng-click="pickAcontact()">Pick contact</ons-button>
               
              </div>
            </ons-col>
          </ons-row>

</ons-navigator>

    </ons-page>

  Now our template is ready lets quickly add some css rules.

.item {

      padding: 10px;

      line-height: 1;
    }

      background-color: #ccc;
    .item-thum {

      height: 50px;
      width: 50px;

    .item-title {
      border-radius: 4px;
    }

      font-weight: 500;
      font-size: 15px;
    }
    .item-desc {

      line-height: 1.3;
      font-size: 14px;
      color: #666;
      margin: 4px 0 0 0;

      font-size: 12px;
      padding: 0 30px 0 0;
    }
    .item-label {
      color: #999;
      float: right;

      overflow: hidden;
    }
    .col {
      border: 1px solid #ccc;
      background: #fff;
      padding: 4px;

      padding: 8px;
      color: #999;
    }

    .page__content {
      background-color: #f6f6f6;
    }

    h3 {

    
      color: #666;

      font-size: 17px;

}

  Now lets jump to the contact plugin of the cordova.First add the plugin by using "cordova plugin add org.apache.cordova.contacts" command. once the plugin is added into the application we can move ahead with this plugin . Lets quickly check whether plugin installed correctly by using cordova plugin ls.it will list the all installed plugin.

  Cordova provide navigator.contacts.pickContact api to access the contact from contact list. navigator.contacts.pickContact  takes two arguments first a success callback or a error callback.

   navigator.contacts.pickContact(function(contact){
    // contact can accessed here

   }).
   },function (err){

    //error callcback

   So  now lets play with angularJS.First of all define app ,module. Now create a controller. I have created a controller "AppController".Now create a method pickAcontact and bind this to button we created while designing the layouts by using ng-click directive.Now inside this methode call the pickContact api and on the success callback of the api add the result to $scope.contact. which we will use in the template. Now come cak to template and make data binding.The final html will be.

<ons-navigator>
    <ons-page>

          <h3></h3>
          <ons-row align="center">

              <div class="Demo">
            <ons-col>

              </div>
                {{ contact.name.formatted }}
              <hr />

                {{ contact.emails[0].value }}             
               <div class="Demo">
                {{ contact.phoneNumbers[0].value }} 

                {{ contact.addresses[0].postalCode }} <br />
               </div>
               <hr />
               <div class="Demo">

                {{ contact.addresses[0].streetAddress }} <br />
                {{ contact.addresses[0].locality }} <br />
                {{ contact.addresses[0].region }} <br />

              <div class="Demo">
                {{ contact.addresses[0].country }}
              </div>
            </ons-col>

            <ons-col>

          <ons-button ng-click="pickAcontact()">Pick contact</ons-button>
                <img ng-src = "{{contact.photos[0].value}}" />
              </div>
            </ons-col>
          </ons-row>
    </ons-page>

  </ons-navigator>

  Come back to controller , after assigning the contact value to $scope.contact call the  $scope.$apply() ,  $scope.$apply(); will let the angular know there has been some changes made in values.