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 默里, Felipe Coury, AriLerner ,
Carlos Taborda

 

 

 

 

相关文章

网站地图xml地图