Service
Service is Angular prepared DI module.
Like spring or other DI support framework, Angular is also support several level Injectable.
To add Injectable annotation, the class supports injectable module.
Sample 1 – Module Level Inject
Module level inject means that adding service into module.ts
Service
simpleservice.service.ts
import { Injectable } from '@angular/core'; @Injectable() export class SimpleService { created: Date; constructor() { this.created = new Date(); } show() { return this.created.toLocaleString(); } }
Component
simpleservice.component.ts
import { Component } from '@angular/core'; import { SimpleService } from './simpleservice.service'; @Component({ selector: 'app-root', template: ` <div>SimpleService : {{current}}</div> ` }) export class SimpleServiceComponent { current: string; constructor(private simpleService: SimpleService) { this.current = simpleService.show(); } }
Module
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { SimpleService } from './simpleservice.service'; import { SimpleServiceComponent } from './simpleservice.component'; @NgModule({ imports: [ CommonModule, BrowserModule, FormsModule ], declarations: [ SimpleServiceComponent ], providers: [ SimpleService ], bootstrap: [ SimpleServiceComponent ] }) export class AppModule {}
Sample 2 – Local Level Inject
Local level inject means that import service only the component you want to import
Service is not declared in app.module.ts(module file)
local/localservice.service.ts
import { Injectable } from '@angular/core'; @Injectable() export class LocalService { created: Date; constructor() { this.created = new Date(); } show() { return this.created.toLocaleString(); } }
localservice.component.ts
import { Component } from '@angular/core'; import { LocalService } from './local/localservice.service'; @Component({ selector: 'app-root', providers: [ {provide: LocalService, useClass: LocalService} ], template: ` <div>LocalService : {{current}}</div> ` }) export class LocalServiceComponent { current: string; constructor(private localService: LocalService) { this.current = localService.show(); } }
コメント