a)Angular提供了自己的HTTP库来调用外部API,为了能够在等待API响应的过程中继续与界面交互,采用异步HTTP请求的方式。
b)Get请求,首先导入Http, Response,http.request方法返回Observable类型,所以可以使用Observable.subscribe来订阅请求响应,达到异步的效果。
import{ Http,Response } from '@angular/http';
//…
this.http.get('http://jsonplaceholder.typicode.com/gets/1')
.subscribe((res:Response)=> {
this.data =res.json();
});
c) 其它类型的请求,可以使用对应的方法,如http.Post\Delete\Put等,但Post之类的请求会要求第二个参数,以传入修改的内容:
this.http.post(
'http://jsonplaceholder.typicode.com/posts',
JSON.stringify({
body: 'bar',
title: 'foo',
userId: 1
}))
.subscribe((res: Response) => {
this.data = res.json();
});
这里将要提交的对象使用JSON.stringify进行了转换
二、Routing
a)Web应用会被划分为各种区域和层级,根据路由的规则,可以让URL访问到指定的内容。
定义路由的方式为:
import{ Routes,RouterModule } from '@angular/router';
…
constroutes:Routes = [
{ path:'home', component: AppComponent }
{ path:'contactus',redirectTo: 'home'},
]
//…
@NgModule({
//…
imports: [RouterModule.forRoot(routes)],
})
创建Routes配置对象后,使用RouterModule.forRoot(routes)安装配置。在配置对象中,path定义了路由要处理的URL,component指定了对应的符合对应路由的URL请求由哪个组件处理。还可以使用redirectTo进行重定向。
b)routerLink和router-outlet
Home
About Us
Contact Us
使用[routerLink]这样的语法来表示路由信息,点击超链接时页面不会重新加载,而是直接在router-outlet定义的区域展示新页面。
c) 带参数路由
//路由配置
constroutes:Routes = [
{ path:'home/:id', component: HomeComponent}
]
//使用
import{ActivatedRoute } from '@angular/router';
//…
exportclass HomeComponent{
id: string;
constructor(private route: ActivatedRoute) {
route.params.subscribe(params => {this.id = params['id'] });
}
}
配置路由时path采用 'home/:id'这样的形式,就可以处理home/1之类的url了,在url对应的处理组件的构造函数中注入ActivatedRoute类型,可通过它来取得url中的参数。