Ionic - Cordova Integration

Cordova offers ngCordova, which is set of wrappers specifically designed to work with AngularJS.

Installing ngCordova

When you the start Ionic app, you will notice that it is using bower. It can be used for managing ngCordova plugins. If you have bower installed skip this step, if you do not have it, then you can install it in the command prompt window.

C:\Users\Username\Desktop\MyApp> npm install -g bower

Now we need to install ngCordova. Open your app in the command prompt window. The following example is used for the app that is located on the desktop and is named MyApp.

C:\Users\Username\Desktop\MyApp> bower install ngCordova

Next, we need to include ngCordova to our app. Open index.html file and add the following scripts. It is important to add these scripts before cordova.js and after ionic scripts.

<script src = "lib/ngCordova/dist/ng-cordova.js"></script>

Now, we need to inject ngCordova as angular dependency. Open your app.js file and add the ngCordova to angular module. If you have used one of the Ionic template apps, you will notice that there is injected ionic, controllers and services. In that case, you will just add ngCordova at the end of the array.

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

You can always check the plugins that are already installed by typing the following command.

C:\Users\Username\Desktop\MyApp> cordova plugins ls

Now, we can use the Cordova plugins. You can check all the other plugins here.