Angular.js, Ionic apps

---

title: Angular.js & Ionic apps description: Angular.js, Ionic apps url: /angular-ionic contributors:

• appfeel
• bitgenoma
• marcpascualsanchez
• miqmago

---

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();
            }
        };
    });