diferencia - observable angular 4 ejemplo

Cómo usar el servicio angular 2 con Ionic 2

Question

Soy nuevo en Ionic 2. Leí en 2 documentos angulares, ese servicio debe ser inyectado durante la aplicación de arranque. Pero no pude ver ninguna cosa de arranque mientras revisaba el tutorial de Ionic 2.

Cualquier ayuda es muy apreciada.

Answer 1

No se usa Bootstrap () en Ionic2, solo se usa @App para declarar su aplicación. Aún necesita declarar su servicio en su componente @Page.

Crea tu servicio

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;
}
}

Luego úsala en tu @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

Actualización de RC:

A partir de Ionic2 RC, ahora los servicios deberían incluirse en la matriz de providers del @NgModule para que esos servicios funcionen como singleton (lo que significa que la misma instancia se usará en toda la aplicación).

@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 {}

Respuesta anterior (2.0.0-beta.8)

Por si acaso, si esto pudiera ayudar a otros desarrolladores de Ionic2 , con el lanzamiento de 2.0.0-beta.8 , ahora podemos usar ionicBootstrap para hacer que nuestros servicios funcionen como singletons lo que significa que la misma instancia se usará en toda la aplicación .

Los cambios necesarios para hacer esto son mínimos; sus servicios serán los mismos

/* 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;
}
}

Pero en lugar de inyectarlo como provider en su Component (lo que causará que se cree una nueva instancia del service cada vez component se cargue el component )

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()
}
}

Solo tiene que incluirlo en el ionicBootstrap de su archivo app.ts , para garantizar que se use la misma instancia del servicio en toda la aplicación.

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

Guía de estilo angular:

Siguiendo la Guía de Estilo Angular2

Proporcione servicios al inyector angular 2 en el componente superior donde se compartirán.

¿Por qué? El inyector angular 2 es jerárquico.

¿Por qué? Al proporcionar el servicio a un componente de nivel superior, esa instancia se comparte y está disponible para todos los componentes secundarios de ese componente de nivel superior .

¿Por qué? Esto es ideal cuando un servicio comparte métodos o estados.

Y

Funcionará. Simplemente no es una mejor práctica. La opción del proveedor de arranque está destinada a configurar y anular los propios servicios preregistrados de Angular, como su soporte de enrutamiento .

Entonces, en lugar de registrar el servicio en el ionicBootstrap , tendríamos que registrarlo en el componente superior de nuestra aplicación (si queremos usar la misma instancia en toda la aplicación ), así:

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