上一篇:Angular2入门系列教程-服务


  上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由

  为了编写样式方便,我们这篇文章开始引入第三方的css库materializecss,引入方法直接在index.html中普通引用就可以了

  众所周知,Angular出现的目的就是解决web编程的一些限制,让我们编写的网页能像App一样运作,我们现在称之为单页面应用(SPA),单页面应用程序有诸多好处,譬如页面响应快,良好的前后端分离,对服务器压力小等等,当然也有不利于SEO等缺点。

  而实现SPA最重要的那当然是路由,Angular2提供的路由可以让我们在页面间随意的切换而不用刷新页面,下面开始我们的路由之旅

  假设你已经跟上了我们的进度,那就在src/app目录下建立一个app.routing.ts的文件,代码如下

  

import {RouterModule,Routes} from "@angular/router";
import {NgModule} from "@angular/core"; import { AppComponent } from './app.component';
import { ArticleComponent } from './article/article.component';
import { ArticledetailComponent } from './articledetail/articledetail.component'; const routes:Routes=[
{ path: 'home',component: AppComponent},
{ path: 'article',component: ArticleComponent},
{ path: 'articledetail/:id',component: ArticledetailComponent},
{ path: '',redirectTo:"/home",pathMatch: 'full'}
]; @NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}

  让我们来看看这个app.routing.ts干了什么事情

  首先我们需要使用语句 import {RouterModule,Routes} from "@angular/router"; 导入我们的路由模块RouterModule以获取路由的支持,然后导入了Routes,这是一个路由的配置数组,我们需要使用它来配置我们的路由

  接下来我们将我们的组件都导入了进来,使用一个Routes类型的变量去配置路由,方式就如上所写,其中我们看到{ path: 'articledetail:id',component: ArticledetailComponent},中的id,这种路由的访问链接就是http://****.com/articledetail/id

  最后,我们使用NgModule装饰器去描述导入和导出的情况,这样,我们的路由表就配置好了,只要在app.module.ts中导任意就可以使用了,顺便细心的朋友可能发现了,我们将BlogService也放到这里去,这样,我们在任意地方都可以使用BlogService了

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app.routing'; import {BlogService} from './data/blog.service'; import { AppComponent } from './app.component';
import { ArticleComponent } from './article/article.component';
import { ArticledetailComponent } from './articledetail/articledetail.component'; @NgModule({
declarations: [
AppComponent,
ArticleComponent,
ArticledetailComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
],
providers: [BlogService],
bootstrap: [AppComponent]
})
export class AppModule { } 

  那么具体要怎么使用路由呢?

  上面配置显示我们将AppComponent组件作为了路由起点,那我们就在这个组件里面做些事情

  App.Component.html

  

<div class="container">
<a routerLink="/article" class="btn waves-effect waves-light">博客列表</a>
<a routerLink="/articledetail/1" class="btn waves-effect waves-light">最多阅读</a>
</div>
<router-outlet></router-outlet>

  我们看到有两个新东西,一个是routerLink,这个就像我们原本的a标签的href,是指定Angular路由的一个东西

  第二个就是router-outlet标签,这个是个导航容器,导航过后,新的组件将会在这里展现

  修该过后,我们需要修改articleDetailComponent的代码以支持路由传参的id

  articldetail.component.ts

  

import { Component, OnInit,Input } from '@angular/core';
import {ActivatedRoute,Params} from '@angular/router';
import { Location } from '@angular/common';
import {BLOGS,Blog} from '../data/blog';
import {BlogService} from '../data/blog.service' import 'rxjs/add/operator/switchMap'; @Component({
selector: 'article-detail',
templateUrl: './articledetail.component.html',
styleUrls:['./articledetail.component.css']
}) export class ArticledetailComponent implements OnInit {
@Input() blog:Blog;
constructor(
private bService: BlogService,
private route: ActivatedRoute,
private location: Location
) {} ngOnInit() {
let id=this.route.params
.switchMap((params: Params) => params['id'])
.subscribe(x=>this.blog=this.bService.getSelectedBlog(+x))
}
back()
{
this.location.back();
}
}

  我们添加了ActivatedRoute,Params用以获取路由参数,由于Angular的路由参数是一个Observable对象,我们使用switchMap去处理它,你现在不用去关心这些,因为,在之后的学习中,我们会专门学习Observable

  然后我们添加了一个返回方法,点击就可以返回上一级

  看html代码

  

<div class="articledetail" *ngIf="blog">
<h2>文章明细</h2>
<div class="content">
<div class="row">
<span >ID</span>
<span>{{blog.id}}</span>
</div>
<div class="row">
<span >Title</span>
<input type="text" class="myInput" [(ngModel)]="blog.title"/>
</div>
<div class="row">
<button class="btn" (click)="back()">返回列表</button>
</div>
</div>
</div>

  这样,我们的明细就可以显示了。

  程序到此还不完全,我们当然还要处理下ArticleComponnet组件,改动很少,只用改动一点儿html代码就行了

  article.component.html

  

<div class="article">
<ul class="articleList">
<li *ngFor="let blog of blogList" [routerLink]="['/articledetail',blog.id]" >
<a>
{{blog.id}}:{{blog.title}}
</a>
</li>
</ul>
<div>
</div>

  这里使用的[routerLink]=[]的方式,第一个是路由地址,第二个是参数,就是我们的id

  处理完了,我们可以来看看效果了

  

  看到这里,你是否觉得有点。。。生硬,那么我们来为路由加一点儿动画

  我们只处理下articleDetail组件

  

import { Component, OnInit,Input ,HostBinding,
trigger, transition, animate,
style, state } from '@angular/core';
import {ActivatedRoute,Params} from '@angular/router';
import { Location } from '@angular/common';
import {BLOGS,Blog} from '../data/blog';
import {BlogService} from '../data/blog.service' import 'rxjs/add/operator/switchMap'; @Component({
selector: 'article-detail',
templateUrl: './articledetail.component.html',
styleUrls:['./articledetail.component.css'], animations: [
trigger('routeAnimation', [
state('*',
style({
opacity: 1,
transform: 'translateX(0)'
})
),
transition(':enter', [
style({
opacity: 0,
transform: 'translateY(-100%)'
}),
animate('0.2s ease-in')
]),
transition(':leave', [
animate('.5s ease-out', style({
opacity: 0,
transform: 'translateY(100%)'
}))
])
])
]
}) export class ArticledetailComponent implements OnInit {
@HostBinding('@routeAnimation') get routeAnimation() {
return true;
} @HostBinding('style.display') get display() {
return 'block';
} @HostBinding('style.position') get position() {
return 'absolute';
}
@Input() blog:Blog;
constructor(
private bService: BlogService,
private route: ActivatedRoute,
private location: Location
) {} ngOnInit() {
let id=this.route.params
.switchMap((params: Params) => params['id'])
.subscribe(x=>this.blog=this.bService.getSelectedBlog(+x))
}
back()
{
this.location.back();
}
}

  这里不打算讲解Animate,因为,之后我们会专门介绍Angular2的动画

  现在这里放一个空的链接:Angular2入门系列教程:Angular2动画

  来看看效果吧

  

  文章的介绍就到这里,有疑问可以给我留言

  更新ing。。。


  项目已经放到了gitbub上,地址 https://github.com/SeeSharply/LearnAngular

  本文章的提交 https://github.com/SeeSharply/LearnAngular/tree/bba4d45b63621a7fc8fd556aa1fc49d397a00552

Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数的更多相关文章

  1. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  2. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  3. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  4. Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

    一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...

  5. Angular2入门系列教程3-多个组件,主从关系

    上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...

  6. Angular2入门系列教程2-项目初体验-编写自己的第一个组件

    上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...

  7. ASP.NET MVC 入门系列教程

    ASP.NET MVC 入门系列教程 博客园ASP.NET MVC 技术专题 http://kb.cnblogs.com/zt/mvc/ 一个居于ASP.NET MVC Beta的系列入门文章,有朋友 ...

  8. Qt快速入门系列教程目录

    Qt快速入门系列教程目录

  9. Android视频录制从不入门到入门系列教程(一)————简介

    一.WHY Android SDK提供了MediaRecorder帮助开发者进行视频的录制,不过这个类很鸡肋,实际项目中应该很少用到它,最大的原因我觉得莫过于其输出的视频分辨率太有限了,满足不了项目的 ...

随机推荐

  1. 人类大脑只开发了10%? I don&#39;t think so.

    既然程序执行时有些部分是彼此互斥的(在程序的一次执行中,执行了这部分就不会去执行另一部分),那么所谓的 人类大脑只开发了10%? 是不是其实只是程序互斥的一种体现. 而往往"智商" ...

  2. php curl 的用法 转载

    curl 是使用URL语法的传送文件工具,支持FTP.FTPS.HTTP HTPPS SCP SFTP TFTP TELNET DICT FILE和LDAP.curl 支持SSL证书.HTTP POS ...

  3. Windows服务器nginx+tomcat服务负载均衡

    一.安装两个tomcat服务自启动 1. 解压两个tomcat,名称为分别1,2 2. 配置环境变量 3. 修改文件server.xml中的三个端口号,使得两个tomcat不冲突 (1)<Ser ...

  4. js正则验证邮箱格式

    首先总结一下邮箱的格式,邮箱由@分隔,左侧为用户名,右侧为邮箱域名,用户名可以由字母.数字._.-以及.组成,但是必须是以字母或数字开头,邮箱的域名是由字母.数字.-和.组成的,但是必须以.加上字母的 ...

  5. 别跟我谈EF抵抗并发,敢问你到底会不会用EntityFramework

    前言 一直以来写的博文都是比较温婉型的博文,今天这篇博文算是一篇批判性博文,有问题欢迎探讨,如标题,你到底会不会用EntityFramework啊. 你到底会不会用EntityFramework啊 面 ...

  6. 亿万第一至二季/全集Billions迅雷下载

    英文全名Billions,第1季(2016)Showtime. 本季看点:<亿万>讲述了纽约市政治与经济领域.关于金钱的一场较量.故事主要描述两个华尔街重量级人物之间的战争.精明.强硬的检 ...

  7. 【CF662A】Gambling Nim 线性基

    [CF662A]Gambling Nim 题意:n长卡牌,第i张卡牌正面的数字是$a_i$,反面的数字是$b_i$,每张卡牌等概率为正面朝上或反面朝上.现在Alice和Bob要用每张卡牌朝上的数字玩N ...

  8. 阿里云ECS服务器自定义端口无法访问问题记录

    记住阿里云ECS服务器有个安全组!!! 购买了阿里云服务器的时候,购买界面那里是可以勾选默认的几个端口是否开启的,服务器默认勾了22端口,使用户能登录服务器. 当我们在服务器里面配置nginx,开启自 ...

  9. HBase学习之路 (四)HBase的API操作

    Eclipse环境搭建 具体的jar的引入方式可以参考http://www.cnblogs.com/qingyunzong/p/8623309.html HBase API操作表和数据 import ...

  10. 前端之css样式02

    一.float属性 block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度.block元素可以设置width.height.mar ...