Angular2 DI
•Transferir como PPTX, PDF•
0 gostou•125 visualizações
為什麼需要依賴注入? Angular2 依賴注入 注入器提供商 依賴注入令牌
Recomendados
Mais conteúdo relacionado
Último
Último (20)
Destaque
Destaque (20)
Angular2 DI
- 1. 依賴注入 亂馬客 依 ng2 官網範例學習 內容來自於 ng2 官網 Sample: ng2-DI
- 2. Live Demo
- 3. • 為什麼需要依賴注入?
- 10. • Angular 依賴注入
- 19. provide: Logger, useClass: EvenBetterLogger, deps: [UserService]
- 24. • 依賴注入令牌
- 27. primitives
- 32. provide: Logger, useClass: EvenBetterLogger, deps: [UserService]
- 34. DEPENDENCY INJECTION IN ANGULAR 2 Angular 2 Components and Providers: Classes, Factories &Values BYPASSING PROVIDERS IN ANGULAR 2 HOST ANDVISIBILITY IN ANGULAR 2'S DEPENDENCY INJECTION ng2-DI
Notas do Editor
- https://angular.cn/docs/ts/latest/guide/dependency-injection.html
- https://angular.cn/docs/ts/latest/guide/dependency-injection.html#
- https://angular.cn/docs/ts/latest/guide/dependency-injection.html# 表單: https://angular.cn/resources/live-examples/forms/ts/plnkr.html
- https://angular.cn/docs/ts/latest/guide/dependency-injection.html#
- import { Injectable} from '@angular/core'; import { Hero } from 'hero'; @Injectable() export class HeroService{ getHeroes() : Hero[] { return [ { id: 11, isSecret: false, name: 'Mr. Nice' }, { id: 12, isSecret: false, name: 'Narco' }, { id: 13, isSecret: false, name: 'Bombasto' }, { id: 14, isSecret: false, name: 'Celeritas' }, { id: 15, isSecret: false, name: 'Magneta' }, { id: 16, isSecret: false, name: 'RubberMan' }, { id: 17, isSecret: false, name: 'Dynama' }, { id: 18, isSecret: true, name: 'Dr IQ' }, { id: 19, isSecret: true, name: 'Magma' }, { id: 20, isSecret: true, name: 'Tornado' }]; }}
- http://plnkr.co/edit/cJBcQlnIOVP5X0EZBpHk?p=preview
- import {ReflectiveInjector } from '@angular/core';import { HeroService } from './hero.service';@Component({ moduleId: module.id, selector: 'hero-form', templateUrl: 'hero-form.component.html' })export class HeroFormComponent { Heroes:Hero[]; constructor(private heroService: HeroService) { //this.Heroes = heroService.getHeroes(); let injector = ReflectiveInjector.resolveAndCreate([HeroService]); let svc = injector.get(HeroService); this.Heroes = svc.getHeroes(); }
- https://angular.cn/docs/ts/latest/guide/dependency-injection.html#
- 使用 object literal 的方式，下次要換其他的 class， 可以直接換 useClass 的設定，如果那個 class 繼承自 HeroService … useValue, useFactory http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html
- 每個 component 都有自已的 injector , 要 provider 時，會先從 local injector 開始找，找不到再往上search so…如果自已有，上面也有，就會建立自已的 provider 哦!
- https://angular.cn/docs/ts/latest/guide/dependency-injection.html# http://blog.thoughtram.io/angular/2016/05/23/opaque-tokens-in-angular-2.html
- App.component