angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用
今天我们要讲的是ng2的路由系统。
例子
例子是官网的例子,包含一个“危机中心”和“英雄列表”,都在一个app中,通过路由来控制切换视图。还包含了promise的用法,服务的用法等多个知识点。
源代码:
https://github.com/lewis617/angular2-tutorial/tree/gh-pages/router
运行方法:
在根目录下运行:
http-server
引入库文件设置base href
路由并不在ng2中,需要我们额外引入,另外我们需要设置base href,这是个什么东西呢?相当于我们后续所有url的“前缀”,因为我们的app默认是基于"HTML 5 pushState" 风格的路由,所以我们需要加上base href,来保证当我们导航到深层次的url时候,资源可以被正确加载:
index.html
<!-- Add the router library --> <script src="lib/router.dev.js"></script>
<!-- Set the base href --> <script>document.write('<base href="' + document.location + '" />');</script>
两种启动方法
app/main.ts
import {bootstrap} from 'angular2/platform/browser'; import {ROUTER_PROVIDERS} from 'angular2/router'; import {AppComponent} from './app.component'; // Add these symbols to override the `LocationStrategy` //import {provide} from 'angular2/core'; //import {LocationStrategy, // HashLocationStrategy} from 'angular2/router'; bootstrap(AppComponent, [ROUTER_PROVIDERS, //provide(LocationStrategy, // {useClass: HashLocationStrategy}) // .../#/crisis-center/ ]);
这种启动方法采取默认的"HTML 5 pushState" 风格,没有#号,但是存在一个弊端。就是当我们在子路经刷新浏览器时候,会出现404的错误。解决办法可以将所有的路由都指向根目录,但是我们使用了http-server,显然不太方便设置。(可以通过设置base href为“/“来解决!)所以还有另外一种风格,就是老式风格,和ng1一样的,带有#的路由风格,它的启动方法是:
import {bootstrap} from 'angular2/platform/browser'; import {ROUTER_PROVIDERS} from 'angular2/router'; import {AppComponent} from './app.component'; // Add these symbols to override the `LocationStrategy` import {provide} from 'angular2/core'; import {LocationStrategy, HashLocationStrategy} from 'angular2/router'; bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy}) // .../#/crisis-center/ ]);
如此一来,我们的app的路由就全部带上#了,当你刷新页面时候,也不会出现404的错误了,但是url的可读性没有"HTML 5 pushState" 风格好看。
ROUTER_DIRECTIVES、RouteConfig、routerLink、router-outlet
路由的编写很简单,我们只需要在我们的组件中进行配置就行了:
app/app.component.ts
import {Component} from 'angular2/core'; import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; import {CrisisCenterComponent} from './crisis-center/crisis-center.component'; import {HeroListComponent} from './heroes/hero-list.component'; import {HeroDetailComponent} from './heroes/hero-detail.component'; import {DialogService} from './dialog.service'; import {HeroService} from './heroes/hero.service'; @Component({ selector: 'my-app', template: ` <h1 class="title">Component Router</h1> <nav> <a [routerLink]="['CrisisCenter']">Crisis Center</a> <a [routerLink]="['Heroes']">Heroes</a> </nav> <router-outlet></router-outlet> `, providers: [DialogService, HeroService], directives: [ROUTER_DIRECTIVES] }) @RouteConfig([ { // Crisis Center child route path: '/crisis-center/...', name: 'CrisisCenter', component: CrisisCenterComponent, useAsDefault: true }, {path: '/heroes', name: 'Heroes', component: HeroListComponent}, {path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}, {path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter', 'CrisisDetail', {id:3}]} ]) export class AppComponent { }
上述代码我们干了几件事:
- 写了一个组件,包含一个h1,一个nav里面包含两个a,还有一个router-outlet组件
- 注入了两个服务,DialogService, HeroService(这一步不属于路由构建步骤)
- 注入了一个指令,ROUTER_DIRECTIVES
- 使用@RouteConfig,配置子路径和对应的子组件,当/crisis-center/时候,在router-outlet中显示CrisisCenterComponent组件,当/heroes时候,在router-outlet中显示HeroListComponent组件,以此类推
- 当导航到/disaster,重定向到'CrisisCenter'的'CrisisDetail'视图。'CrisisCenter', 'CrisisDetail'是父子视图关系,下面会讲到。
- 导出这个组件
好了我们的带有路由的组件编写好了,其实就是个可以切换视图的组件而已,就是这么简单。我们在浏览器中运行程序,点击nav中的heroes,就可以把子视图Heroes渲染出来了。
浏览器路径变为http://localhost:63342/angular2-tutorial/router/index.html/heroes,在原有的基础上加上了/heroes。
温习promise
当我们导航到heroes视图的时候,我们就进入了另一个子组件,这个组件需要一个heroes服务,里面用到了promise,我们在angular2系列教程(七)Injectable、Promise、Interface、使用服务讲过promise,然我们来温习promise:
app/heroes/hero.service.ts
import {Injectable} from 'angular2/core'; export class Hero { constructor(public id: number, public name: string) { } } @Injectable() export class HeroService { getHeroes() { return heroesPromise; } getHero(id: number | string) { return heroesPromise .then(heroes => heroes.filter(h => h.id === +id)[0]); } } var HEROES = [ new Hero(11, 'Mr. Nice'), new Hero(12, 'Narco'), new Hero(13, 'Bombasto'), new Hero(14, 'Celeritas'), new Hero(15, 'Magneta'), new Hero(16, 'RubberMan') ]; var heroesPromise = Promise.resolve(HEROES);
以上代码我们干了几件事:
- 写了一个Hero类
写了一个HeroService类,包含两个成员函数
- 写了一个数组HEROES,里面每一项都是一个hero类的实例,也就是个对象(引用类型)
- 定义了一个heroesPromise,将value设为数组HEROES,状态为resolved,随时可以使用then来获取value,也就是数组HEROES
温习promise,promise的两种构建方法:
- Promise.resolve()
- new Promise(),里面是个function,该function的参数是resolve和reject。
例子(chrome console):
更详细的的用法,可以看我之前讲的promise:angular2系列教程(七)Injectable、Promise、Interface、使用服务
两个服务:Router、RouteParams
我们的英雄服务写好了,然我们继续看英雄列表组件,当我们想要点击列表的某一项的时候,我们需要一个参数来导航到指定的英雄详情视图,这时候我们就需要RouteParams了,导航这个动作出发则需要Router服务:
app/heroes/hero-list.component.ts
// TODO SOMEDAY: Feature Componetized like CrisisCenter import {Component, OnInit} from 'angular2/core'; import {Hero, HeroService} from './hero.service'; import {Router, RouteParams} from 'angular2/router'; @Component({ template: ` <h2>HEROES</h2> <ul class="items"> <li *ngFor="#hero of heroes" [class.selected]="isSelected(hero)" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> ` }) export class HeroListComponent implements OnInit { heroes: Hero[]; private _selectedId: number; constructor( private _service: HeroService, private _router: Router, routeParams: RouteParams) { this._selectedId = +routeParams.get('id'); } isSelected(hero: Hero) { return hero.id === this._selectedId; } onSelect(hero: Hero) { this._router.navigate( ['HeroDetail', { id: hero.id }] ); } ngOnInit() { this._service.getHeroes().then(heroes => this.heroes = heroes) } }
以上代码,我们干了几件事:
- 渲染一个组件,包括一个列表
- 在构造函数中,将英雄服务HeroService、路由服务Router、路由参数RouteParams传给私有变量
- 写了三个成员函数用于处理相应的业务逻辑
- 其中this._router.navigate( ['HeroDetail', { id: hero.id }] );将app导航到了HeroDetail视图,并带上id参数
- 其中this._service.getHeroes().then(heroes => this.heroes = heroes),用于获取刚才的heroes数组,并将其传给this.heroes
Router服务的使用:this._router.navigate( ['HeroDetail', { id: hero.id }] );
RouteParams服务的使用:this._selectedId = +routeParams.get('id'); 其中routeParams.get('id')前面那个+代表将其转换为数字类型。
HeroService服务的使用: this._service.getHeroes().then(heroes => this.heroes = heroes)
引用类型和单例模式的妙用
我们继续看英雄详细视图:
app/heroes/hero-detail.component.ts
import {Component, OnInit} from 'angular2/core'; import {Hero, HeroService} from './hero.service'; import {RouteParams, Router} from 'angular2/router'; @Component({ template: ` <h2>HEROES</h2> <div *ngIf="hero"> <h3>"{{hero.name}}"</h3> <div> <label>Id: </label>{{hero.id}}</div> <div> <label>Name: </label> <input [(ngModel)]="hero.name" placeholder="name"/> </div> <p> <button (click)="gotoHeroes()">Back</button> </p> </div> `, }) export class HeroDetailComponent implements OnInit { hero: Hero; constructor( private _router:Router, private _routeParams:RouteParams, private _service:HeroService){} ngOnInit() { let id = this._routeParams.get('id'); this._service.getHero(id).then(hero => this.hero = hero); } gotoHeroes() { let heroId = this.hero ? this.hero.id : null; // Pass along the hero id if available // so that the HeroList component can select that hero. // Add a totally useless `foo` parameter for kicks. this._router.navigate(['Heroes', {id: heroId, foo: 'foo'} ]); } }
上述代码,我们仅仅是获取指定的英雄信息,并渲染出来。那么修改英雄信息是如何实现的呢?就是通过引用类型实现的。
我们知道,在js中,对象和数组是引用类型,也就意味着,当我们将某个对象传给别的变量的时候,仅仅是将对象的地址传给了那个变量,当我们修改那个变量时候,其实对象也被修改了。
在这个程序中,我们将hero对象传给this.hero,并将其双向数据绑定到input上:<input [(ngModel)]="hero.name" placeholder="name"/>,这样当我们改变input的值的时候,this.hero被改变,服务中的hero也被改变,因为是引用类型嘛,其实操作的都是一个对象。再有我们的服务是单例模式,所以全局的hero列表都被改变了。
让我们改变input的值,并点击back,我们发现英雄列表视图中的数据也被改变了,这就是引用类型和单例模式的妙用。
Route Parameters or Query Parameters?
当我们点击back返回时候,我们发现url变成了:http://localhost:63342/angular2-tutorial/router/index.html/heroes?id=11&foo=foo。也就是拥有了Query Parameters:?id=11&foo=foo。
为何会这样呢?因为我们指定了参数:this._router.navigate(['Heroes', {id: heroId, foo: 'foo'} ]);但是英雄列表视图有没有指定的id和foo的token,所以这两个变量是可选的,所以就自动生成了Query Parameters,好让我们进行select的css重绘。
在英雄详细视图中,我们使用了:id这个token。{path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}
这就是Route Parameters。它是必须的,我们必须要指定id这个参数。这就是Route Parameters 和 Query Parameters的比较。
这节课我们先讲到这里,下节课我们通过“危机中心”这个例子,继续讲解路由,将包含路由的嵌套、路由的生命周期等众多炫酷功能!
教程源代码及目录
如果您觉得本博客教程帮到了您,就赏颗星吧!
https://github.com/lewis617/angular2-tutorial
angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用的更多相关文章
- Service的两种启动方法
刚才看到一个ppt,介绍service的两种启动方法以及两者之间的区别. startService 和 bindService startService被形容为我行我素,而bindService被形容 ...
- angular2系列教程(八)In-memory web api、HTTP服务、依赖注入、Observable
大家好,今天我们要讲是angular2的http功能模块,这个功能模块的代码不在angular2里面,需要我们另外引入: index.html <script src="lib/htt ...
- Android(java)学习笔记227:服务(service)之服务的生命周期 与 两种启动服务的区别
1.之前我们在Android(java)学习笔记171:Service生命周期 (2015-08-18 10:56)说明过,可以回头看看: 2.Service 的两种启动方法和区别: (1)Servi ...
- Android(java)学习笔记170:服务(service)之服务的生命周期 与 两种启动服务的区别
1.之前我们在Android(java)学习笔记171:Service生命周期 (2015-08-18 10:56)说明过,可以回头看看: 2.Service 的两种启动方法和区别: (1)Servi ...
- IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法
IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法 IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法 两种方法只是形式 ...
- webpack4 系列教程(十二):处理第三方JavaScript库
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十二):处理第三方 JavaScript 库>原文地址.或者来我的小站看更多内容:godbm ...
- angular2系列教程(一)hello world
今天我们要讲的是angular2系列教程的第一篇,主要是学习angular2的运行,以及感受angular2的components以及模板语法. 例子 这个例子非常简单,是个双向数据绑定.我使用了官网 ...
- Unity3D脚本中文系列教程(十六)
Unity3D脚本中文系列教程(十五) ◆ function OnPostprocessAudio (clip:AudioClip):void 描述:◆ function OnPostprocess ...
- Unity3D脚本中文系列教程(十五)
http://dong2008hong.blog.163.com/blog/static/4696882720140322449780/ Unity3D脚本中文系列教程(十四) ◆ LightRend ...
随机推荐
- Sql Server系列:分区表操作
1. 分区表简介 分区表在逻辑上是一个表,而物理上是多个表.从用户角度来看,分区表和普通表是一样的.使用分区表的主要目的是为改善大型表以及具有多个访问模式的表的可伸缩性和可管理性. 分区表是把数据按设 ...
- Python高手之路【五】python基础之正则表达式
下图列出了Python支持的正则表达式元字符和语法: 字符点:匹配任意一个字符 import re st = 'python' result = re.findall('p.t',st) print( ...
- Winserver下的Hyper-v “未在远程桌面会话中捕获到鼠标”
异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 服务器相关的知识点:http://www.cnblogs.com/dunitia ...
- 网站定位之---根据IP获得区域
记得以前做一个培训机构网站时候需要定位,那时候用的搜狐的api,不是很精准. demo:https://github.com/dunitian/LoTCodeBase/tree/master/NetC ...
- 【翻译】MongoDB指南/CRUD操作(四)
[原文地址]https://docs.mongodb.com/manual/ CRUD操作(四) 1 查询方案(Query Plans) MongoDB 查询优化程序处理查询并且针对给定可利用的索引选 ...
- Modify Branding of FreeCAD
Modify Branding of FreeCAD eryar@163.com This article describes the Branding of FreeCAD. Branding me ...
- 从零开始编写自己的C#框架(27)——什么是开发框架
前言 做为一个程序员,在开发的过程中会发现,有框架同无框架,做起事来是完全不同的概念,关系到开发的效率.程序的健壮.性能.团队协作.后续功能维护.扩展......等方方面面的事情.很多朋友在学习搭建自 ...
- 深入研究Visual studio 2017 RC新特性
在[Xamarin+Prism开发详解三:Visual studio 2017 RC初体验]中分享了Visual studio 2017RC的大致情况,同时也发现大家对新的Visual Studio很 ...
- xss和sql注入原理学习
8.4 Web跨站脚本攻击 8.4.1 跨站脚本攻击的原理(1) 跨站脚本在英文中称为Cross-Site Scripting,缩写为CSS.但是,由于层叠样式表 (Cascading Style ...
- arcpy+PyQt+py2exe快速开发桌面端ArcGIS应用程序
前段时间有一个项目,大体是要做一个GIS数据处理工具. 一般的方法是基于ArcObjects来进行开发,因为我对ArcObjects不太熟悉,所以就思考有没有其他简单快速的方法来做. 在查看ArcGI ...