Angular.js, Ionic apps

Miquel Martín edited this page Oct 27, 2016 · 9 revisions

This plugin is designed to support Ionic apps (which are based in Angular.js) in three simple steps (doesn't need ngCordova):

  • Install the plugin as usual (see here):
    ionic plugin add cordova-admob
  • Include the following script in your index.html (just it, no need to copy any file: the plugin is in charge to copy the script when the app is prepared):
    <script src="lib/angular-admob/angular-admob.js"></script>
  • Call AdMob from your Ionic app. Here is a quick example:
    var app = angular.module('myApp', ['admobModule']);

    app.config(['admobSvcProvider', function (admobSvcProvider) {
      // Optionally you can configure the options here:
      admobSvcProvider.setOptions({
        publisherId:          "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",  // Required
        interstitialAdId:     "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",  // Optional
        tappxIdiOS:           "/XXXXXXXXX/Pub-XXXX-iOS-IIII",            // Optional
        tappxIdAndroid:       "/XXXXXXXXX/Pub-XXXX-Android-AAAA",        // Optional
        tappxShare:           0.5                                        // Optional
      });

      // Optionally configure the events prefix (by default set to 'admob:')
      admobSvcProvider.setPrefix('myTag~');
    }]);


    app.run(['admobSvc', function (admobSvc) {
      // Also you could configure the options here (or in any controller):
      // admobSvcProvider.setOptions({ ... });

      admobSvc.createBannerView();
      // You could also call admobSvc.createBannerView(options);


      // Handle events:
      $rootScope.$on(admobSvc.events.onAdOpened, function onAdOpened(evt, e) {
        console.log('adOpened: type of ad:' + e.adType);
      });
    }]);

For events handling you could also use the 'mytag' + eventName format (note the change from admobSvc.events to 'myTag~' + admob.events):

    var app = angular.module('myApp', ['admobModule']);

    app.config(['admobSvcProvider', function (admobSvcProvider) {
      // Optionally configure the events prefix (by default set to 'admob:')
      admobSvcProvider.setPrefix('myTag~');
    }]);


    app.run(['admobSvc', function (admobSvc) {
      // Handle events:
      $rootScope.$on('myTag~' + admob.events.onAdOpened, function onAdOpened(evt, e) {
        console.log('adOpened: type of ad:' + e.adType);
      });

      // The default prefix for events is 'admob:'
      // $rootScope.$on('admob:' + admob.events...
    }]);

And here it goes an example on how to manage interstitials:

angular.module('myApp', ['admobModule'])

    .constant('AdmobConfig', {
        bannerId: /(android)/i.test(navigator.userAgent) ? "ca-app-pub-XXXXXXXXXXXXXXXX/ANDROID_BANNER_ID" : "ca-app-pub-XXXXXXXXXXXXXXXX/IOS_BANNER_ID",
        interstitialId: /(android)/i.test(navigator.userAgent) ? "ca-app-pub-XXXXXXXXXXXXXXXX/ANDROID_INTERSTITIAL_ID" : "ca-app-pub-XXXXXXXXXXXXXXXX/IOS_INTERSTITIAL_ID",
    })

    .config(function (admobSvcProvider, AdmobConfig) {
        admobSvcProvider.setOptions({
            publisherId: AdmobConfig.bannerId,
            interstitialAdId: AdmobConfig.interstitialId,
            autoShowInterstitial: false,
        });
    })

    .run(function ($rootScope, $ionicPlatform, $timeout, admobSvc) {
        admobSvc.requestInterstitialAd();

        $rootScope.isInterstitialAvailable = false;
        $rootScope.isAppForeground = false;

        $rootScope.$on(admobSvc.events.onAdLoaded, function onAdLoaded(evt, e) {
            if ($rootScope.isAppForeground) {
                if (e.adType === admobSvc.AD_TYPE.INTERSTITIAL) {
                    $rootScope.isInterstitialAvailable = true;
                }
            }
        });

        $rootScope.$on(admobSvc.events.onAdOpened, function onAdOpened(evt, e) {
            if ($rootScope.isAppForeground) {
                if (e.adType === admobSvc.AD_TYPE.INTERSTITIAL) {
                    $rootScope.isInterstitialAvailable = false;
                    $timeout(admobSvc.requestInterstitialAd, 1); // Immediately request next interstitial
                }
            }
        });

        $ionicPlatform.on('pause', function onPause() {
            if ($rootScope.isAppForeground) {
                $rootScope.isAppForeground = false;
            }
        });
        $ionicPlatform.on('resume', function onResume() {
            if (!$rootScope.isAppForeground) {
                $timeout(admobSvc.requestInterstitialAd, 1);
                $rootScope.isAppForeground = true;
            }
        });
    })

    .controller('YourController', function ($rootScope, admobSvc) {
        var vm = this;

        vm.pleaseShowInterstitial = function () {
            if ($rootScope.isInterstitialAvailable) {
                admobSvc.showInterstitialAd();
            }
        };
    });