json 1

一、HTTP

a)Angular提供了温馨之HTTP库来调用外部API,为了能够以守候API响应的长河中继续与界面交互,采用异步HTTP请求的艺术。

b)Get请求,首先导入Http,
Response,http.request方法返回Observable类型,所以可以运用Observable.subscribe来订阅请求响应,达到异步的成效。

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>import{
Http, Response } from ‘@angular/http’;

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>…

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>this.http.get(‘http://jsonplaceholder.typicode.com/gets/1’)

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>.subscribe((res:Response)
=> {

 
this.data = res.json();

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>});

c)
其它品类的乞求,可以应用相应之法,如http.Post\Delete\Put等,但Post之类的伸手会要求第二只参数,以传播修改的始末:

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>this.http.post(

 
‘http://jsonplaceholder.typicode.com/posts’,

 
JSON.stringify({

   
body: ‘bar’,

   
title: ‘foo’,

   
userId: 1

 
}))

 
.subscribe((res: Response) => {

   
this.data = res.json();

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”> });

这边将付出的靶子下JSON.stringify进行了变。

 

二、Routing

a)Web应用会让分开为各种区域与层级,根据路由的条条框框,可以给URL访问到指定的情节。

定义路由的方式也:

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>import{
Routes, RouterModule } from ‘@angular/router’;

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>…

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>constroutes:
Routes = [

  {
path: ‘home’, component: AppComponent }

{
path: ‘contactus’,redirectTo: ‘home’},

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>]

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>…

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>@NgModule({

 

 
imports: [RouterModule.forRoot(routes)],

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>})

创Routes配置对象后,使用RouterModule.forRoot(routes)安装配置。在布局对象被,path定义了路由于要处理的URL,component指定了相应的适合对应路由的URL请求由哪个组件处理。还足以用redirectTo进行再次定向。

 

b)routerLink和router-outlet

 

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”><divclass=”page-header”>

 
<h1>Router Sample</h1>

 
<div>

   
<a[routerLink]=”[‘/home’]”>Home</a>

   
<a[routerLink]=”[‘/about’]”>About Us</a>

   
<a[routerLink]=”[‘/contactus’]”>Contact Us</a>

 
</div>

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”></div>

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”><divid=”content”>

 
<router-outlet></router-outlet>

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”></div>

使用[routerLink]这么的语法来表示程由于信息,点击超链接时页面不见面又加载,而是一直在router-outlet定义之区域展示新页面。

 

c)
带参数路由于

 

style=”font-size: 16px; font-family: 微软雅黑, sans-serif”>//路由安排

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>constroutes:
Routes = [

  {
path: ‘home/:id’, component: HomeComponent}

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>]

style=”font-size: 16px; font-family: 微软雅黑, sans-serif”>//使用

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>import{
ActivatedRoute } from ‘@angular/router’;

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>…

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>exportclass
HomeComponent {

  id:
string;

 
constructor(private route: ActivatedRoute) {

   
route.params.subscribe(params => {this.id = params[‘id’]
});

 
}

style=”font-family: 微软雅黑, sans-serif; font-size: 16px”>}

布路由时path采用
‘home/:id’这样的样式,就足以处理home/1之类的url了,在url对应之处理组件的构造函数中流入ActivatedRoute类型,可由此她来博取url中的参数。

 

学材料:The
Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner ,
Carlos Taborda

 

 

 

 

相关文章

网站地图xml地图