详解angular笔记路由之angular-router

本文介绍了angular笔记路由之angular-router,分享给大家,具体如下:

创建项目

ng new router --routing
\\ 加routing参数
\\ 会新增一个app-routing.module.ts 文件

路由的基本使用

名称 简介
Routes 路由的配置,保存着哪一个URL对应展示哪一个组件和在哪一个RouterOutler展示
RouterOutler 在HTML中标记路由内容呈现的占位符指令
Router 运行时执行的路由对象,可以通过navigate()和navigateByUrl()方法来导航到指定路由
RouterLink 在HTML中声明导航的指令
ActivatedRoute 当前激活的路由对象,保存着当前路由信息,路由地址,路由参数

路由对象图示

路由基本配置

const routes:Routes = [
 {path:'',component:HomeComponent}, \\ 注意path里面不要加\线
 {path:'app',component:AdminComponent}
];

路由通配符配置

{path:'**',component:Code404Component}
// 配置里面加一条代表没有的都往这里,注意这里不能写在前面,不然angualr的路由会优先匹配这里

HTML里面跳转链接

<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/app']">后台</a>
<router-outlet></router-outlet>

在js里面跳转路由

<input type='button' value='跳转到后台' (click)="toApp()">
constructor(private router:Router){
 }
// 点击事件
 toApp(){
 this.router.navigate(['/app'])
 }

路由数据传递

1、在查询参数中传递数据

/app?id=2 => ActivatedRoute.queryParams[id]
//html写法
<a [routerLink]="['/app']" [queryParams]="{id:1}">后台</a>
// js写法
private appId:number
 constructor(private routerInfo:ActivatedRoute) { }

 ngOnInit() {
 this.appId = this.routerInfo.snapshot.queryParams['id']
 }

2、在路由路径中传递数据

{path:/app/:id} => /app/1 => ActivatedRoute.params[id]
// 必须先定义好
<a [routerLink]="['/app',1]">后台</a>

3、在路由配置中传递数据

复制代码 代码如下:

{path:/product,component:Appcomponent,data:[IsProd:true]}  => ActivatedRoute.data[0][IsProd]

参数快照和参数订阅

snapshot 是参数快照当路由进入该组件的时候,然后再点击按钮进入该路由路由里面的的ngOnInit()方法只执行一次,已经被激活,说以第二次这个不会被执行

ngOnInit() {
 this.appId = this.routerInfo.snapshot.queryParams['id']
 }

subscribe 是参数订阅,这个属于RxJs的东西

private appId:number

 constructor(private routerInfo:ActivatedRoute) { }

 ngOnInit() {
 this.routerInfo.params.subscribe((params:Params) => {
  this.appId = params['id']
 })
 }

重定向路由

{path:'',redirectTo:'/home',pathMatch:'full'},

子路由

{path:'home',component:HomeComponent,children:[
 {path:'',component:IndexComponent}
 ]},
// 记得去HomeComponent,里面添加<router-outlet></router-outlet>指令

辅助路由

// html 视图部分
<router-outlet></router-outlet>
<router-outlet name='aux'></router-outlet>
//路由配置部分
{path:'app',Appcomponet,outlet:'aux'}

路由守卫

只有当用户已经登录并拥有一些权限时才能进入

多表单组成的向导,如注册流程,只有满足条件才能进入下一个路由

用户执行操作没有保存,试图离开时候进行相关提示

名称 说明
CanAxtivate 处理导航到某路由
CanDeactivate 处理当前路由离开
Resolve 在路由激活前获取路由数据

1.CanAxtivate的使用

// 新建一个文件
import {CanActivate} from '@angular/router'
export class LoginGuard implements CanActivate{
 // 路由会根据这个方法的返回如果返回false就拒绝访问
 canActivate(){
 let isLOgin:boolean = true;
 return isLOgin;
 }
}

canActivate是一个数组,可以接收多个,当每一个都返回true时候才允许

// 修改路由配置,添加一个属性canActivate
{path:'home',component:HomeComponent,children:[
 {path:'',component:IndexComponent}
 ],canActivate:[LoginGuard]},
修改NgModule

providers:[LoginGuard]

2.CanDeactivate的使用

// 新建一个文件
import {CanDeactivate} from '@angular/router'
import {AppComponent} from "../app.component";

/**
 * 处理用户离开
 * 接收一个泛型
 */
export class OutGuard implements CanDeactivate<AppComponent>{
 // component 里面保存着AppComponent的数据
 canDeactivate(component:AppComponent){
 return window.confirm('您还没有保存确定要离开吗?')
 }
}

修改路由的配置

{path:'home',component:HomeComponent,children:[
 {path:'',component:IndexComponent}
 ],canActivate:[LoginGuard],canDeactivate:[OutGuard]},
providers:[LoginGuard,OutGuard]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-09-09

Angularjs中UI Router全攻略

首先给大家介绍angular-ui-router的基本用法. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofig); }) $stateProvider.state(stateName, stateConfig) stateName是string类型 stateCon

Angular2学习笔记——详解路由器模型(Router)

Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的业务组件.实际开发中大部分时间我们都需要处理业务组件.对于SPA应用来说,一个通用的问题就是如何控制页面的切换,解决这个问题的通用方法就是利用路由器来实现. 路由配置 现在我们先撇开Angular2来看看通用的路由器模型.通常来讲SPA应用需要路由配置信息: [ { path: '', pathMa

angularJS中router的使用指南

这几天看了angularjs和backbone,大看了解了knockout和emberjs,刚刚上网看到了一个angular的router的demo,现在顺便记下来 复制代码 代码如下: <!--- DEMO_INDEX.html --> <!doctype html> <head> <meta charset="utf-8"> <title>route</title> </head><br>

Angularjs中UI Router的使用方法

学习使用angular中,ui-route是其中的一个难点,简单使用没什么问题,但涉及到多级嵌套,就感觉有茫然,查了很多资料,踩过很多坑,到目前为止也不能说对ui-route有全面了解:这里只是把填补的几个坑记录一下备忘: 1.abstract的使用: $stateProvider .state('shop',{ resolve:{ "shoplist":function($http){ return $http({ url:"/bookApp/data/shoplist.p

详解angular2实现ng2-router 路由和嵌套路由

实现ng2-router路由,嵌套路由 首先配置angular2的时候router模块已经下载,只需要引入即可 import {RouterModule, Routes} from "@angular/router"; 我们要创建一个嵌套路由,所以需要创建以下文件 index.html app.module.ts app.component.ts home.component.ts list.component.ts list-one.component.ts list-two.com

angular基于路由控制ui-router实现系统权限控制

前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配

AngularJS ui-router (嵌套路由)实例

我们都知道,如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的.比如这样:<div ng-view></div>.一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板视图.比如这样: var bookStoreApp = angular.module('bookStoreApp', [ 'ngRoute', 'ngAnimate', 'bookStoreCtrls', ]); bookStoreApp.conf

vue多层嵌套路由实例分析

本文实例讲述了vue多层嵌套路由.分享给大家供大家参考,具体如下: 多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></scri

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

AngularJS 使用 UI Router 实现表单向导

我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Router,它能内嵌状态,为每个状态显示不同的view,我们能让多步表单变得相当的容易. 为了快速的理解UI Router是怎样工作的,看我们的文章:AngularJS使用UI-Router路由 让我们言归正传,开始创建我们的最棒的表单! 创建工程 创建工程有个模板结构. 需要个 布局文件 , 每个表单的视图文件, 格式文件, 以及JavaScri

AngularJS使用ui-route实现多层嵌套路由的示例

本文介绍了AngularJS使用ui-route实现多层嵌套路由的示例,分享给大家,具体如下: 一.预期实现效果: https://liyuan-meng.github.io/uiRouter-app/index.html (项目地址:https://github.com/liyuan-meng/uiRouter-app) 二.分析题目要求,给出依赖关系,构建项目 1. service: (1)根据条件查询people数据checkPeople.service,不给出条件则查询所有. (2)得到

全面解析vue router 基本使用(动态路由,嵌套路由)

路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 路由中有三个基本的概念 route,

vue router学习之动态路由和嵌套路由详解

本文主要参考:https://router.vuejs.org/zh-cn/essentials/nested-routes.html 本文的阅读前提是已经能够搭建一个vue前台程序并且运行.如果还么有搭建可以参考文章: http://www.jb51.net/article/111650.htm 好,下面上货. 首先介绍一下动态路由. 动态路由按照我的理解,就是说能够进行页面的跳转,比如说:下面的这个页面中: <template> <div id="app">

vue-router:嵌套路由的使用方法

模板抽离 我们已经学习过了Vue模板的另外定义形式,使用<template></template>. <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路

详解vue嵌套路由-query传递参数

在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> main.js 同样通过重定向来显示父路由 import Vue from 'vue' import VueRo