ionic-plugin-toast

   Projemize buradaki ayarları yaptıktan sonra devam edelim. Toast Plugini  uygulama içinde kullanıcıya uyarı vermemizi sağlar.

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

proje dizinimize gelip terminalden plugini ekleyelim:

$ cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git

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

www/templates/toast.html oluşturalım:

<ion-view view-title="Toast">
  <ion-content>
  <br/>
   <h3>Toast Mesaj Uygulaması</h3>
  <br/>
    <button class="button button-calm" ng-click="toast1()">1.fonksiyon</button>
    <button class="button button-assertive" ng-click="toast2()">2.fonksiyon</button>
    <button class="button button-positive" ng-click="toast3()"> 3.fonksiyon</button>

  </ion-content>
</ion-view>

www/templates/menu.html içerisine  buton ekleyelim:

      <ion-list>

          *

          *

        <ion-item menu-close ui-sref="app.toast">

             Toast

        </ion-item>

         

    </ion-list>

www/js/app.js içerisine;

  .state('app.toast', {

      url: '/toast',

      views: {

        'menuContent': {

          templateUrl: 'templates/toast.html',

          controller:'ToastCtrl'

        }

      }

    });

www/js/controller.js içerisine:

.controller('ToastCtrl', function($scope, $cordovaToast) {

  $scope.toast1=function(){

    $cordovaToast.show('mesaj uyarısı','short','center')

    .then(function(success){

      //basarı durumu

    }, function(error)

    {

       //hata durumu

    });

  }

  $scope.toast2=function(){

    $cordovaToast.showShortTop('üst mesaj uyarı','short')

    .then(function(success){

      //basarı durumu

    }, function(error)

    {

       //hata durumu

    });

  }

  $scope.toast3=function(){

    $cordovaToast.showLongBottom('alt mesaj uyarısı','short')

    .then(function(success){

      //basarı durumu

    }, function(error)

    {

       //hata durumu

    });

  }

});

Ekran görüntüsü: