博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular基础(七) HTTP & Routing
阅读量:6822 次
发布时间:2019-06-26

本文共 1927 字,大约阅读时间需要 6 分钟。

hot3.png

 

0?wx_fmt=png

一、HTTP

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

 

<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>

</div>

<divid="content">

  <router-outlet></router-outlet>

</div>

使用[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中的参数。

 

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

 

 

 

 

转载于:https://my.oschina.net/u/2327858/blog/1523842

你可能感兴趣的文章
ssh 连接非22端口服务器的方法:
查看>>
Linux基础入门
查看>>
org.hibernate.hql.internal.ast.QuerySyntaxException: user is not mapped
查看>>
图解排序算法之快速排序-双端探测法
查看>>
mysql
查看>>
11月15日云栖精选夜读:分布式服务框架Dubbo疯狂更新!阿里开源要搞大事情?...
查看>>
Druid数据库连接池就这么简单
查看>>
Python最假的库:Faker
查看>>
IDE 插件新版本发布,开发效率 “biu” 起来了
查看>>
阿里云安全肖力:安全基础建设是企业数字化转型的基石
查看>>
Redis 基础、高级特性与性能调优
查看>>
BZT52C15S资料
查看>>
Laravel Telescope入门教程(上)
查看>>
Linux配置ip 及网络问题排查
查看>>
AndroidStudio用Cmake方式编译NDK代码(cmake配置.a库)
查看>>
OSChina 周四乱弹 ——黑丝短裙java程序员同事
查看>>
设置iptables之后不能正常访问ftp解决方法
查看>>
移动端rem布局
查看>>
jsp与iframe跨域访问的一个方法
查看>>
ViewPager + Fragment 取消预加载
查看>>