ion plugin contact

   Projemize buradaki ayarları yaptıktan sonra devam edelim. Contact Plugini telefon rehberimizdeki kişilerie erişmemizi sağlar.

Plugin sayfası: http://ngcordova.com/docs/plugins/contacts/

proje dizinimize gelip terminalden plugini ekleyelim:

$ cordova plugin add cordova-plugin-contacts


ilk öncelikle rehberimizdeki kişileri çekip uygulamada listeleyelim

Sayfa bağlantısını yapalım:

www/templates/contact.html

<ion-view view-title="Contact">
  <ion-content>

   <div class="item">
    <div class="input-group-addon"><i class="fa fa-search"></i></div>

        <input type="text" class="form-control" placeholder="Search da Fish" ng-model="searchcontact">


   </div>
   <div class="list">

    <a class="item item-avatar" ng-repeat="item in $root.contacts | orderBy : 'displayName'| filter:searchcontact " ng-click="showContact($index)">
      <img src="{{item.photos[0].value|| missingPhoto}}"/>
      <h2>{{item.displayName}}</h2>
      <p>{{item.phoneNumbers[0].value}}</p>
      </a>

   </div>

  </ion-content>

</ion-view>


=>  search contact ile listede arama yapabiliyoruz, orderBy ilede sıralayabiliyoruz


www/templates/menu.html

 <ion-list>
           *
           *
         <ion-item menu-close ui-sref="app.contact">
          Contact
        </ion-item>
          *
          *
 </ion-list>


www/js/app.js  içerisine aşağıdaki kodları yazalım

.state('app.contact',{
    url:'/contact',
    views: {
        'menuContent': {
          templateUrl: 'templates/contact.html',
          controller:'ContactCtrl'
        }
      }
})
 
www/js/controller.js içerisine:

     *
     *
 .controller('AppCtrl', function($scope) {
   $scope.missingPhoto='img/ionic.png';
   })
   *
   *

//ionic loading verileri cekerken  bekletmemizi sağlayacak
.controller('ContactCtrl',function($scope, $cordovaContacts, $ionicLoading, $state){
    $ionicLoading.show({
      template: 'Rehber Yükleniyor..'
    }).then(function(){});
 
    $scope.hide=function(){
      $ionicLoading.hide().then(function(){})
    }
 
    //$root global değişken için , diğer controllerlardan erişmek için
    $cordovaContacts.find({filter:'',hasPhoneNumber :true}).then(function(allContacts){
      $scope.$root.contacts=allContacts;

      $scope.hide();
    })

 
})


buraya kadar yaptıgımız kişi listemizi uygulamada listeletmek, listelerken kişilerin resmini adını ve telefon numarasını aldık.

Kişilere tıklayınca ayrı bir sayfada daha ayrıntılı görmek için contactshow oluşturalım.


www/templates/contactshow.html

<ion-view view-title="ContactShow">
  <ion-content>
   <div class="list-card">
     <div class="item">
      <h2>{{contact.displayName}}</h2>
        <p>{{contact.phoneNumbers[0].value}}</p>
     </div>
     <div class="item item-image">
      <img src="{{contact.photos[0].value|| missingPhoto}}"/>
     </div>

   </div>

  </ion-content>

</ion-view>

www/js/app.js

  .state('app.contactshow',{

    url:'/contactshow:id',

    views: {

        'menuContent': {

          templateUrl: 'templates/contactshow.html',

          controller:'ContactshowCtrl'

        }

      }

})

www/js/controller.js sayfasını aşağıdaki gibi güncelleyelim:

//ionic loading verileri cekerken  bekletmemizi sağlayacak

.controller('ContactCtrl',function($scope, $cordovaContacts, $ionicLoading, $state){

    $ionicLoading.show({

      template: 'Rehber Yükleniyor..'

    }).then(function(){});

   

    $scope.hide=function(){

      $ionicLoading.hide().then(function(){})

    }

  

    //$root global değişken için , diğer controllerlardan erişmek için 

    $cordovaContacts.find({filter:'',hasPhoneNumber :true}).then(function(allContacts){

      $scope.$root.contacts=allContacts;

      $scope.hide();

    })

    //sayfalara gidebilmek için 

    $scope.showContact=function(index){

        $state.go('app.contactshow',{'id':index});

    }

})

.controller('ContactshowCtrl',function($scope,$cordovaContacts, $stateParams){

   $scope.contactId=$stateParams.id;

   $scope.contact=$scope.$root.contacts[$scope.contactId];

})

çalıştırıp bakalım:

Kişi listenizdeki her bir kişi aşağıdaki gibi listelenecek