How to use angular 2 service with Ionic 2?

Question

I am new to Ionic 2. I read in angular 2 docs, that service needs to be injected while bootstrap application. But could not see any bootstrap thing while going through Ionic 2 tutorial.

Any help is highly appreciated.

Answer 1

There is no use of Bootstrap() in Ionic2, only use of @App to declare your app. You still need to declare your service in your @Page component.

Create your service

import {Injectable} from "angular2/core";
import {Http} from "angular2/http";

@Injectable()
export class DataService {
  constructor(http: Http) {
    this.http = http;
    this.data = null;
  }

  retrieveData() {
    this.http.get('./mocks/test.json')
    .subscribe(data => {
      this.data = data;
    });
  }

  getData() {
    return this.data;
  }
}

Then use it in your @Page

import {Page} from 'ionic/ionic';
import {DataService} from './service';

@Page({
  templateUrl: 'build/test.html',
  providers: [DataService]
})
export class TestPage {
  constructor(data: DataService) {
    data.retrieveData()
  }
}

Answer 2

RC Update:

As of Ionic2 RC, now the services should be included in the providers array from the @NgModule to make those services work as singletons (meaning that the same instance will be used in the entire application).

@NgModule({
  declarations: [
    MyApp,

    // Pages
    Page1,
    Page2,

    // Pipes
    MyCustomPipe,

    // Directives
    MyCustomDirective,
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,

    // Pages
    Page1,
    Page2
  ],
  providers: [ DataService, NavigationService, Storage, ... ] // <- here!
})
export class AppModule {}

---

Old answer (2.0.0-beta.8)

Just in case if this could help other Ionic2 developers, with the release of 2.0.0-beta.8, now we can use ionicBootstrap to make our services work as singletons meaning that the same instance will be used in the entire application.

The changes needed to do this are minimum; your services will remain the same

/* Notice that the imports have slightly changed*/
import {Injectable} from "@angular/core";
import {Http} from "@angular/http";
import 'rxjs/Rx';

@Injectable()
export class DataService {
  constructor(http: Http) {
    this.http = http;
    this.data = null;
  }

  retrieveData() {
    this.http.get('./mocks/test.json')
    .subscribe(data => {
      this.data = data;
    });
  }

  getData() {
    return this.data;
  }
}

But instead of injecting it as a provider in your Component (which will cause a new instance of the service to be created everytime the component is loaded)

import {Component} from '@angular/core';
import {DataService} from './service';

@Component({
  templateUrl: 'build/test.html'
  /* This should not be done anymore */
  /* providers: [DataService] */
})
export class TestPage {
  constructor(data: DataService) {
    data.retrieveData()
  }
}

Just include it in the ionicBootstrap of your app.ts file, in order to ensure that the same instance of the service will be used in the entire application.

ionicBootstrap(MyApp, [DataService], {});

---

Angular Style Guide:

Following Angular2 Style Guide

Do provide services to the Angular 2 injector at the top-most component where they will be shared.

Why? The Angular 2 injector is hierarchical.

Why? When providing the service to a top level component, that instance is shared and available to all child components of that top level component.

Why? This is ideal when a service is sharing methods or state.

And

It will work. It's just not a best practice. The bootstrap provider option is intended for configuring and overriding Angular's own preregistered services, such as its routing support.

So Instead of registering the service in the ionicBootstrap, we'd have to register it in the top-most component of our App (if we want to use the same instance in the entire application), like this:

@Component({
  templateUrl: 'build/app.html',
  directives: [...],
  providers: [..., DataService]
})
class MyApp{ 
  // ...
}