一、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的更多相关文章

  1. Bootstrap <基础七>按钮

    任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <butto ...

  2. C#_02.16_基础七_.NET表达式&运算符

    C#_02.16_基础七_.NET表达式&运算符 一.字面量: 字面量和变量的关系来理解字面量会比较简单: 因此字面量是源代码中键入已知的(我们知道它是多少的)值.也可以理解是等号右边的非创建 ...

  3. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  4. Java基础七-正则表达式

    Java基础七-正则表达式 一.定义: 特定的符号的组合 二.作用: 用于操作字符串数据 三.优缺点 简化代码,但是阅读性差 四.引入 4.1 问题 判断一个号码是否是QQ号? 不是零开头 6-15位 ...

  5. 第214天:Angular 基础概念

    一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...

  6. Angular基础---->AngularJS的使用(一)

    AngularJS主要用于构建单页面的Web应用.它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单.今天,我们就开始Angular环境的搭建和第一个实 ...

  7. day 72 Django基础七之Ajax

    Django基础七之Ajax   本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策略与 ...

  8. day 60 Django基础七之Ajax

      Django基础七之Ajax   本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策 ...

  9. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)   Django基础七之 ...

随机推荐

  1. fiddler 使用方法汇总

    作为网络开发人员,怎能不使用一些抓包工具呢?fiddler是个不错的选择. 不过,一般情况下,我们往往使用浏览器自带的控制台的[网络]选项就可以达到查看数据的通信情况了,当然,一些浏览器不容易捕捉的事 ...

  2. [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 ...

  3. C# 使用PrintDocument类打印标签

    最近做了一个项目,使用不干胶标签贴在RFID抗金属标签上,那么就会出现标签打印的问题,该如何打印呢?后来经过网上冲浪发现,其实打印标签和打印A4纸的方法一样,只不过就是布局.设置纸张大小的问题. 本文 ...

  4. 关于微信JS SDK接口wx.previewImage预览接口的使用

    然后后之前的项目,突然往微信上迁移了,一些微信的接口没怎么用过,比较陌生,这次的功能是想调用微信的接口,实现图片放大的功能, 就找到官方文档:http://qydev.weixin.qq.com/wi ...

  5. Golang GC原理

    一.内存泄漏 内存泄露,是从操作系统的角度上来阐述的,形象的比喻就是“操作系统可提供给所有进程的存储空间(虚拟内存空间)正在被某个进程榨干”,导致的原因就是程序在运行的时候,会不断地动态开辟的存储空间 ...

  6. EOS生产区块:解析插件producer_plugin

    producer_plugin是控制区块生产的关键插件. 关键字:producer_plugin,同步区块的处理,pending区块,生产区块,最后不可逆区块,生产循环,生产安排,水印轮次,计时器,确 ...

  7. jQuery检查复选框是否被选

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. mybatis教程1(基本使用)

    官方网站 一.什么是 MyBatis ? MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果 ...

  9. Asp.Net4.5 mvc4(二) 页面创建与讲解

    一.Contorl 通过目录结构我们可以看到contorllers类的命名方式 命名规则:前缀+Controller. 在看看contorller中的action方法 using System; us ...

  10. css中的float属性以及清除方法 (2011-09-03 17:36:26)

    CSS里面的浮动属性是布局的常用工具,只有真正了解它并熟练使用才能将它的优点发挥到极致. 许多页面中都有文字绕图效果,并且各区块分布得错落有置,很多朋友在自学CSS布局时为了做出这些效果往往会被div ...