We can manage a phone contact using cordovaContacts plugin. Like WhatsApp and Hike, we can also access all the contacts and manipulate them. We can add or update or delete a contact. In this tutorial, we are going to see how to get all contact and display them as a list.

Start ionic project using.


ionic start contactapp blank

Then go to contactapp folder.


cd contactapp

Then add cordovaContacts plugin.


cordova plugin add cordova-plugin-contacts

Download ngCordova using

https://github.com/driftyco/ng-cordova/archive/master.zip

Include ngCordova js file in index.html.


<script type="text/javascript" src="js/ng-cordova.min.js" ></script>

Add controller.


<body ng-app="starter" ng-controller="contactctrl" >

Add ngCordova to app.js.


angular.module('starter', ['ionic','ngCordova'])

Now we going to get all contacts when the user clicks a button and display them in a list.

Add button inside <ion-content> tag.


<button class="button button-positive" ng-click="getAllContacts()" >All Contacts</button>

Create getAllContacts function inside your controller.


controller('contactctrl',function($scope,$ionicPlatform,$cordovaContacts){

$scope.items=[];

$scope.getAllContacts=function()

{

$scope.items=[];

$cordovaContacts.find({filter:'',multiple:true}).then(function(allContacts) 
{ //omitting parameter to .find() causes all contacts to be returned

    for(i=0;i<allContacts.length;i++)

    {

    item=allContacts[i];    

    $scope.items.push({name:item.displayName,phone_no:item.phoneNumbers[0].value});

    }

    });

}

})

That’s all. To generate apk.


ionic platform add android

ionic build android

Tested Device

Samsung J7 Android Lolipop

Source

APK