# angular-router-example

**Repository Path**: jet_terry/angular-router-example

## Basic Information

- **Project Name**: angular-router-example
- **Description**: the project demos how to build routers in angular2 projects.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-07-21
- **Last Updated**: 2021-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AngularRouterExample

## 说明
本例是参照下列文档构建的：
https://angular.cn/docs/ts/latest/guide/router.html

## how to use:
1: git clone  
2: npm install  
3: json-server ./src/app/data.json  
4: ng serve  
5: open browser and navigate to http://localhost:4200/  
6: http://localhost:3000/heroes for json data

## 1、Angular应用所推荐的模式：关于分区和特性.
* 把每个特性放在自己的目录中。
* 每个特性都有自己的Angular特性模块。
* 每个特性区都有自己的根组件。
* 每个特性区的根组件中都有自己的路由出口及其子路由。
* 特性区的路由很少（或完全不）与其它特性区的路由交叉。

## 2、如何特定路由的出口? （弹出对话框compose-message为例）
  ### app.component.html中，内容如下：
  意思是：当用户点击此链接时，在路由出口popup中显示与compose路由相关联的组件。  
  `<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>`  
  `<router-outlet></router-outlet>`  
  `<router-outlet name="popup"></router-outlet>`  
  * 当有且只有一个无名出口时，外部对象中的这个outlets对象并不是必须的。  
  * 路由器假设这个路由指向了无名的主出口，并为我们创建这些对象。  
  * 当路由到一个命名出口时，我们就会发现一个以前被隐藏的真相： 我们可以在同一个RouterLink指令中为多个路由出口指定多个路由。  
  * 这里我们实际上没能这样做。要想指向命名出口，我们就得使用一种更强大也更啰嗦的语法。

  ### app-routing.module.ts中的内容如下：
  这个路由特定了一个出口，名字叫popup,在app.component.html中.
  意思是：当用户点击此链接时，在路由出口popup中显示与compose路由相关联的组件。  
  `{ path: 'compose', component: ComposeMessageComponent, outlet: 'popup' }`

## 3、路由守卫的使用场景:
  * 该用户可能无权导航到目标组件。
  * 可能用户得先登录（认证）。
  * 在显示目标组件前，我们可能得先获取某些数据。
  * 在离开组件前，我们可能要先保存修改。
  * 我们可能要询问用户：你是否要放弃本次更改，而不用保存它们？




#最后位置: 
https://angular.cn/docs/ts/latest/guide/router.html
搜索"清除第二路由"