Setup

Prerequisites

Before getting started with Ionic Services, we expect you to be familiar with:

  • developing apps with the Ionic Framework
  • using the Ionic CLI
  • running your app on Android or iOS devices (push and deploy require physical devices)

Sign up

Before using an Ionic Services services, you’ll need an Ionic account. Signup for free. This is the same account used for Ionic View and Creator, so if you’ve used those in the past, you already have an account.

Installation

This guide assumes you’ve created an Ionic app already. If not, go ahead and create one before continuing.

Make sure you’re using at least node 4 and npm 3. You can verify this by running node -v and npm -v.

The Cloud Client allows you to interact with our services from your app and is available on npm. In the directory of your app, install the client:

$ npm install @ionic/cloud-angular --save

The Cloud Client allows you to interact with our services from your app.

$ npm install @ionic/cloud --save

Once installed, you’ll need to copy the bundled JavaScript file into your app’s www/lib directory:

$ cp [email protected]/cloud/dist/bundle/ionic.cloud.min.js www/lib

Then you can include it in your project’s index.html after the ionic.bundle.js include:

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic.cloud.min.js"></script>

Promises

We expect Promise to be defined globally. It is defined in iOS Safari and Android 4.4.4+ (caniuse.com/#feat=promises). If you need to support devices that don’t provide promises natively, a polyfill such as bluebird can be installed and included before the Ionic Framework bundle.

$ npm install bluebird --save
$ cp node_modules/bluebird/js/browser/bluebird.min.js www/lib

You can include it in your project’s index.html before the ionic.bundle.js include:

<script src="lib/bluebird.min.js"></script>

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic.cloud.min.js"></script>

Setup

App ID

Before you can configure your cloud settings, you’ll need to have an app ID. In your project directory, run:

$ ionic io init

This will automatically create an app in the Dashboard, and set the generated App ID in your ionic.config.json file.

If you’ve previously created an app on the Dashboard and you want to sync a local project, set the app ID in the ionic.config.json file.

Configuration

Angular bootstrapping changed just before the 2.0.0 release. Make sure you’re using the latest Ionic CLI and Framework.

In your src/app/app.module.ts file:

  • Define a CloudSettings object for your app’s cloud settings. Replace APP_ID with your app’s ID, which you can find in your ionic.config.json file.
  • Pass your cloud settings into CloudModule.forRoot(), which returns an NgModule (see Angular dependency injection and the Angular Modules guide) with all our providers. This means you don’t have to specify our classes in the providers: array of your components.
import { CloudSettings, CloudModule } from [email protected]/cloud-angular';

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'APP_ID'
  }
};

@NgModule({
  declarations: [ ... ],
  imports: [
    IonicModule.forRoot(MyApp),
    CloudModule.forRoot(cloudSettings)
  ],
  bootstrap: [IonicApp],
  entryComponents: [ ... ],
  providers: [ ... ]
})
export class AppModule {}

To provide your configuration, use angular dependency injection. In your www/js/app.js file:

  • Add the ionic.cloud module to your array of dependencies.
  • Inject $ionicCloudProvider into your config block and pass in your cloud configuration. Replace APP_ID with your app’s ID, which you can find in your ionic.config.json file.
angular.module('starter', ['ionic', 'ionic.cloud', 'starter.controllers', 'starter.services'])

.config(function($ionicCloudProvider) {
  $ionicCloudProvider.init({
    "core": {
      "app_id": "APP_ID"
    }
  });
})

.run(function($ionicPlatform) {
  ...
})

Now you’re all ready to start using Services.

Services

    API

      General