依赖注入 DI (Dependency Injection) system
依赖:当模块a需要模块b才能运行时,模块b是模块a的依赖。
p192, p169
Dependency Injection Parts
注册一个依赖时,需要绑定到sth识别这个依赖。
识别就是 token。
依赖注入 3个部分
1,provider,把新的实例,注册在这里,就可以提供给注入器
2,injector 注入器 保存之前创造的实例,如果没有请求的实例,会创建一个并添到注入器中,通过provider,
3,dependecy 被注入
注册依赖,在provider中,描述依赖被如何注入,注入
组件与组件之间的运用
p174 标准做法
- 用 NgModule 注册需要注入的 也就是providers
- 用装饰 decorators (通常在 constructor) 定义注入内容
在NgModule注册
user-demo/user-demo.module.ts
import { UserService } from '../services/user.service';
@NgModule({
imports: [
CommonModule
],
providers: [
UserService // <-- added right here
],
declarations: []
})
注入组件 在constructor中导入 p195, p198
user-demo.component.ts
export class UserDemoComponent {
userName: string;
constructor(private userService: UserService) {
}
本质上就是注册 provider:[],注入(导入)?
正确的注册 provider 很关键
providers: [ UserService ]
就是告诉Angular 当UserService注入时,提供一个单个实体(singleton instance ——
默认class就是UserService
等于:
providers: [
{ provide: UserService, useClass: UserService }
]
provide
是token用来identify
useClass
是how and what to inject
provide相当于全局开放UserService class 和这个UserServiceg token
当第一个注入时,也就是第一次实体产生时,DI会触发constructor。
当有API的URL是,
注册
providers: [
{ provide: 'API_URL', useValue: 'http://my.api.com/v1' }
]
注入时,不能直接写
constructor(apiUrl: 'API_URL') {
}
import { Inject } from '@angular/core';
export class AnalyticsDemoComponent {
constructor(@Inject('API_URL') apiUrl: string) {
}
}
p178 p201 配置服务
记录事件
useFactory p181 p204
HTTP
Angular使用内置HTTP库来请求外部API
HTTP请求需要异步同步,JS通常用以下3中方法:
1, Callbacks
2, Promises
3, Observables
Angular用的是Observables来处理异步同步。
如何导入和启用HttpModule
p187 p210
通过注入方式启用
从@angular/http
导入HttpModule
在app.module.ts
注册并导入
import { HttpModule } from '@angular/http';
...
@NgModule({
declarations: [
...],
imports: [
...
HttpModule
],
在组件中注入
import {Http, Response} from '@angular/http';
class MyFooComponent {
constructor(public http: Http) {
}
makeRequest(): void {
...
}
}
request API连接 p189 p212
在component导入对应的组件后,
使用一个get API request
组件controller写法如下
import { Component, OnInit } from '@angular/core';
import {Http, Response} from '@angular/http'; //导入
@Component({
selector: 'app-simple-http',
templateUrl: './simple-http.component.html'
})
export class SimpleHttpComponent implements OnInit {
data: Object;
loading: boolean;
constructor(private http: Http) { //局部注入
}
ngOnInit() {
}
//api get request
makeRequest(): void {
this.loading = true;
this.http.request('http://jsonplaceholder.typicode.com/posts/1')
.subscribe((res: Response) => {
this.data = res.json();
this.loading = false;
});
}
}
this.http.request()
发送GET请求
http.request
返回的是 Observable
(会在后面数据结构讲)
通过subscribe
进行改变
this.data = res.json();
get会返回一个responce对象,通过提取这个对象的body并且转化成json格式。
赋予目标对象this.data
并且把laoding设为false
在html中启用
<h2>Basic Request</h2>
<button type="button" (click)="makeRequest()">Make Request</button>
<div *ngIf="loading">loading...</div> //绑定loading
<pre>{{data | json}}</pre> //转化json格式?
YouTube 探索组件 p193 p215
探索,出现结果。需要如下组件p216 p194
- searchResult : hold the search date
- YouTubeSearchService: mangage the API request
- SearchBoxComponent: use the Youtube service
- SearchResultComponent: 渲染结果模版
- YouTubeSearchComponent: 父组件,渲染list of results
@angular/http API p212 p235
posy request
RequestOptions
• method
• headers
• body
• mode
• credentials
• cache
• url
• search