Skip to content

Angular.js, Ionic apps

Miquel Martín edited this page Apr 27, 2015 · 17 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 com.admob.google
  • 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('myTag~' + admobSvc.events.onAdOpened, function onAdOpened(evt, e) {
        console.log('adOpened: type of ad:' + e.adType);
      });

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