Angular.js, Ionic apps

AngularJS APP support

AngularJS (also known as Angular 1) is the prior version of Angular 2 and forward versions. This plugin also supports Ionic apps which still use 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({
        bannerAdId:         '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', {
        bannerAdId: /(android)/i.test(navigator.userAgent) ? 'ca-app-pub-XXXXXXXXXXXXXXXX/ANDROID_BANNER_ID' : 'ca-app-pub-XXXXXXXXXXXXXXXX/IOS_BANNER_ID',
        interstitialAdId: /(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({
            bannerAdId: AdmobConfig.bannerAdId,
            interstitialAdId: AdmobConfig.interstitialAdId,
            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();
            }
        };
    });