Angular 2
Inyección de Dependencia y Servicios.
Buscar..
Servicio de ejemplo
servicios / my.service.ts
import { Injectable } from '@angular/core'; @Injectable() export class MyService { data: any = [1, 2, 3]; getData() { return this.data; } }
El registro del proveedor de servicios en el método bootstrap hará que el servicio esté disponible globalmente.
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from 'app.component.ts'; import { MyService } from 'services/my.service'; bootstrap(AppComponent, [MyService]);
En la versión RC5, el registro del proveedor de servicios global se puede realizar dentro del archivo del módulo. Para obtener una única instancia de su servicio para toda su aplicación, el servicio debe ser declarado en la lista de proveedores en el módulo de su aplicación. app_module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { routing, appRoutingProviders } from './app-routes/app.routes'; import { HttpModule} from '@angular/http'; import { AppComponent } from './app.component'; import { MyService } from 'services/my.service'; import { routing } from './app-resources/app-routes/app.routes'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, routing, RouterModule, HttpModule ], providers: [ appRoutingProviders, MyService ], bootstrap: [AppComponent], }) export class AppModule {}
Uso en MyComponent
componentes / my.component.ts
Enfoque alternativo para registrar proveedores de aplicaciones en componentes de aplicaciones. Si agregamos proveedores a nivel de componente siempre que el componente se represente, se creará una nueva instancia del servicio.
import { Component, OnInit } from '@angular/core'; import { MyService } from '../services/my.service'; @Component({ ... ... providers:[MyService] // }) export class MyComponent implements OnInit { data: any[]; // Creates private variable myService to use, of type MyService constructor(private myService: MyService) { } ngOnInit() { this.data = this.myService.getData(); } }
Ejemplo con Promise.resolve
servicios / my.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
data: any = [1, 2, 3];
getData() {
return Promise.resolve(this.data);
}
}
getData()
ahora actúa como una llamada REST que crea una Promesa, que se resuelve de inmediato. Los resultados pueden ser portátiles dentro de .then()
y también se pueden detectar errores. Esta es una buena práctica y convención para métodos asíncronos.
componentes / my.component.ts
import { Component, OnInit } from '@angular/core';
import { MyService } from '../services/my.service';
@Component({...})
export class MyComponent implements OnInit {
data: any[];
// Creates private variable myService to use, of type MyService
constructor(private myService: MyService) { }
ngOnInit() {
// Uses an "arrow" function to set data
this.myService.getData().then(data => this.data = data);
}
}
Probando un servicio
Dado un servicio que puede iniciar sesión un usuario:
import 'rxjs/add/operator/toPromise';
import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
interface LoginCredentials {
password: string;
user: string;
}
@Injectable()
export class AuthService {
constructor(private http: Http) { }
async signIn({ user, password }: LoginCredentials) {
const response = await this.http.post('/login', {
password,
user,
}).toPromise();
return response.json();
}
}
Se puede probar así:
import { ConnectionBackend, Http, HttpModule, Response, ResponseOptions } from '@angular/http';
import { TestBed, async, inject } from '@angular/core/testing';
import { AuthService } from './auth.service';
import { MockBackend } from '@angular/http/testing';
import { MockConnection } from '@angular/http/testing';
describe('AuthService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpModule],
providers: [
AuthService,
Http,
{ provide: ConnectionBackend, useClass: MockBackend },
]
});
});
it('should be created', inject([AuthService], (service: AuthService) => {
expect(service).toBeTruthy();
}));
// Alternative 1
it('should login user if right credentials are passed', async(
inject([AuthService], async (authService) => {
const backend: MockBackend = TestBed.get(ConnectionBackend);
const http: Http = TestBed.get(Http);
backend.connections.subscribe((c: MockConnection) => {
c.mockRespond(
new Response(
new ResponseOptions({
body: {
accessToken: 'abcdef',
},
}),
),
);
});
const result = await authService.signIn({ password: 'ok', user: 'bruno' });
expect(result).toEqual({
accessToken: 'abcdef',
});
}))
);
// Alternative 2
it('should login user if right credentials are passed', async () => {
const backend: MockBackend = TestBed.get(ConnectionBackend);
const http: Http = TestBed.get(Http);
backend.connections.subscribe((c: MockConnection) => {
c.mockRespond(
new Response(
new ResponseOptions({
body: {
accessToken: 'abcdef',
},
}),
),
);
});
const authService: AuthService = TestBed.get(AuthService);
const result = await authService.signIn({ password: 'ok', user: 'bruno' });
expect(result).toEqual({
accessToken: 'abcdef',
});
});
// Alternative 3
it('should login user if right credentials are passed', async (done) => {
const authService: AuthService = TestBed.get(AuthService);
const backend: MockBackend = TestBed.get(ConnectionBackend);
const http: Http = TestBed.get(Http);
backend.connections.subscribe((c: MockConnection) => {
c.mockRespond(
new Response(
new ResponseOptions({
body: {
accessToken: 'abcdef',
},
}),
),
);
});
try {
const result = await authService.signIn({ password: 'ok', user: 'bruno' });
expect(result).toEqual({
accessToken: 'abcdef',
});
done();
} catch (err) {
fail(err);
done();
}
});
});