Angular基础(七) HTTP & Routing
一、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
Angular基础(七) HTTP & Routing的更多相关文章
- Bootstrap <基础七>按钮
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <butto ...
- C#_02.16_基础七_.NET表达式&运算符
C#_02.16_基础七_.NET表达式&运算符 一.字面量: 字面量和变量的关系来理解字面量会比较简单: 因此字面量是源代码中键入已知的(我们知道它是多少的)值.也可以理解是等号右边的非创建 ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...
- Java基础七-正则表达式
Java基础七-正则表达式 一.定义: 特定的符号的组合 二.作用: 用于操作字符串数据 三.优缺点 简化代码,但是阅读性差 四.引入 4.1 问题 判断一个号码是否是QQ号? 不是零开头 6-15位 ...
- 第214天:Angular 基础概念
一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...
- Angular基础---->AngularJS的使用(一)
AngularJS主要用于构建单页面的Web应用.它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单.今天,我们就开始Angular环境的搭建和第一个实 ...
- day 72 Django基础七之Ajax
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策略与 ...
- day 60 Django基础七之Ajax
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策 ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
{Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) Django基础七之 ...
随机推荐
- fiddler 使用方法汇总
作为网络开发人员,怎能不使用一些抓包工具呢?fiddler是个不错的选择. 不过,一般情况下,我们往往使用浏览器自带的控制台的[网络]选项就可以达到查看数据的通信情况了,当然,一些浏览器不容易捕捉的事 ...
- [EXP]Drupal < 8.5.11 / < 8.6.10 - RESTful Web Services unserialize() Remote Command Execution (Metasploit)
## # This module requires Metasploit: https://metasploit.com/download # Current source: https://gith ...
- C# 使用PrintDocument类打印标签
最近做了一个项目,使用不干胶标签贴在RFID抗金属标签上,那么就会出现标签打印的问题,该如何打印呢?后来经过网上冲浪发现,其实打印标签和打印A4纸的方法一样,只不过就是布局.设置纸张大小的问题. 本文 ...
- 关于微信JS SDK接口wx.previewImage预览接口的使用
然后后之前的项目,突然往微信上迁移了,一些微信的接口没怎么用过,比较陌生,这次的功能是想调用微信的接口,实现图片放大的功能, 就找到官方文档:http://qydev.weixin.qq.com/wi ...
- Golang GC原理
一.内存泄漏 内存泄露,是从操作系统的角度上来阐述的,形象的比喻就是“操作系统可提供给所有进程的存储空间(虚拟内存空间)正在被某个进程榨干”,导致的原因就是程序在运行的时候,会不断地动态开辟的存储空间 ...
- EOS生产区块:解析插件producer_plugin
producer_plugin是控制区块生产的关键插件. 关键字:producer_plugin,同步区块的处理,pending区块,生产区块,最后不可逆区块,生产循环,生产安排,水印轮次,计时器,确 ...
- jQuery检查复选框是否被选
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- mybatis教程1(基本使用)
官方网站 一.什么是 MyBatis ? MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果 ...
- Asp.Net4.5 mvc4(二) 页面创建与讲解
一.Contorl 通过目录结构我们可以看到contorllers类的命名方式 命名规则:前缀+Controller. 在看看contorller中的action方法 using System; us ...
- css中的float属性以及清除方法 (2011-09-03 17:36:26)
CSS里面的浮动属性是布局的常用工具,只有真正了解它并熟练使用才能将它的优点发挥到极致. 许多页面中都有文字绕图效果,并且各区块分布得错落有置,很多朋友在自学CSS布局时为了做出这些效果往往会被div ...