I am developing an app in Ionic framework which displays all contacts from device to end User and gives option for selection of contacts. I am using ngCordova's $cordovaContacts module for fetching contacts.
This is the service code which fetches contacts from the device.
angular.module('starter.services').factory('ContactManager', function($cordovaContacts, $ionicLoading){
return {
getContacts: function() {
$ionicLoading.show({ template: "<div class='ion-ios7-reloading'></div>"});
var options = {};
options.filter = "";
options.multiple = true;
options.fields = ['displayName', 'name', 'phoneNumbers', 'emails'];
//get the phone contacts
return $cordovaContacts.find(options);
}
}
});
Below is controller code which assigns contacts to $scope.contacts variable
angular.module('starter.ctrls').controller('ShareCtrl', function($scope, ContactManager, $stateParams) {
$scope.contacts = [];
ContactManager.getContacts().then(function(_result){
alert("CONTACTS FETCHED: Now rendering in Template");
$scope.contacts = _result;
}, function(_error){
alert("Error: " + _error);
});
});
It works fine for 100-400 contacts. But for devices with around 1000 contacts, it takes lots of time to fetch contacts from plugin(CONTACTS FETCHED alert in controller is shown after 2-3 minutes). After fetching contacts from plugin it again takes 2-3 minutes to render in UI(using ng-repeat) and most of the times app hangs.
I also searched for pagination while fetching contacts but could not find any option to fetch contacts page wise in ngCordova documentation.
As of now I am testing on android and the app hangs in case of contacts count is around 1000.
How can I improve its performance?
I am a newbie to angular and ionic.
I Would recommend instead of loading 100-400 contacts in one shot display 100 contacts as the user scrolling down you can load the next 100 contacts. To achieve this you can use this plugin . http://binarymuse.github.io/ngInfiniteScroll/
If they are in the read only contacts you can use "BindOnce" Plugin which will improve the binding the scope once and keeps your browser light. https://github.com/Pasvaz/bindonce
Hope this helps.