Angula路由

2017-08-13

路由

在web开发中，路由是指将 应用划分成多个分区，通常是按照从浏览器的URL衍生出来的规则进行分割。

为什么需要路由

在应用程序中定义路由非常有用，因为我们可以：

将应用程序划分为多个分区
维护应用程序的状态
基于某些规则保护应用分区

客户端路由与服务端路由

通常，在服务端负责路由的情况下，收到HTTP请求后，服务器会根据收到的URL来运行相应的控制器。

例如，在Express中，可以这样实现一个最简单的路由：


var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function (req, res, next) {
    res.render('index', {
        title: '三维可视化平台'
    });
});
module.exports = router;

上面的代码当你访问主页时，渲染index.ejs模板。可以认为服务端路由定义了应用的端点（URIS）以及如何响应客户端的请求。服务器接收一个请求，并路由到下一个控制器。该控制器根据路径和参数执行特定的任务。再来看下面这个例子：

/**
 * 地形路由(*.terrain)
 */
//加载依赖模块
var express = require('express');
var router = express.Router();
var terrainService = require('../server/terrainService');
/**
 * 地形服务器
 */
router.get('/terrain', function(req, res, next) {
    res.send('地形服务器正在运行……');
});
/**
 * 获取地形瓦片元数据
 */
router.get('/terrain/layer.json', function(req, res, next) {
    terrainService.getTerrainMetaData(res);
});
/**
 * 
 */
router.get('/terrain/:z/:x/:y', function(req, res, next) {
    var path = req.params.path;
    var z = req.params.z,
        x = req.params.x,
        y = req.params.y.split('.')[0];
    terrainService.getTerrain(z, x, y, res);
});
module.exports = router;

上面是一个简单的地形路由，服务端收到客户端发送的地形瓦片请求，这里的控制器就是回调函数，具体的处理包括解析客户端请求、处理客户端请求（包括与后台数据库操作等）、返回结果至客户端等等。

客户端路由在概念上很相似，但是实施方法不同。在客户端路由情况下，每次URL发生变化时，不一定会向服务器发送请求。我们把Angular应用叫作单页面应用程序（Single Page App，SPA），因为服务器只提供一个页面，负责渲染各种页面的是JavaScript。

此SPA非彼SPA，😆。详情请参考一种SPA（单页面应用）架构

Angular 中的路由

在Angular中，我们通过将 ==路径映射到处理它们的组件来配置路由。==

Angular 路由的组成部件

我们使用三种部件来配置Angular路由。

Routes：描述了应用程序支持的路由配置
RouterOutlet：这是一个“占位符”组件，告诉Angular要把每个路由的内容放在哪里。
RouterLink指令：用于创建各种路由链接

导入

为了使用 Angular路由，首先从 @angular/router库中导入一些常量。在app.module.ts中导入

1 2	import { RouterModule, Routes } from "@angular/router"; import { LocationStrategy, HashLocationStrategy } from "@angular/common";

现在，我们可以开始定义路由器配置了。

路由配置

为了定义应用的路由配置，首先创建一个Routes配置，然后使用RouterModule.forRoot(routes)来为应用程序提供使用路由必需的依赖。

/**
 * 路由配置
 */
const routes: Routes = [
  {
    path: "",
    redirectTo: "home",
    pathMatch: "full"
  },
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about",
    component: AboutComponent
  },
  {
    path: "contact",
    component: ContactComponent
  },
  {
    path: "contactus",
    redirectTo: "contact"
  }
];

path：指定该路由要处理的URL路径。
componet：用于链接当前路由路径与处理该路由的组件。
redirectTo：可选项。用于将当前路由重定向至另一个已知路由

==综上所述，路由配置的目的就是要指定组件要处理的路径==

这里我创建了三个最简单的组件，Home、About、Contact。完整的NgModule如下：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
//导入路由模块
import { RouterModule, Routes } from "@angular/router";
import { LocationStrategy, HashLocationStrategy } from "@angular/common";
//导入组件
import { AppComponent } from "./app.component";
import { HomeComponent } from "./home/home.component";
import { AboutComponent } from "./about/about.component";
import { ContactComponent } from "./contact/contact.component";
/**
 * 路由配置
 */
const routes: Routes = [
  {
    path: "",
    redirectTo: "home",
    pathMatch: "full"
  },
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about",
    component: AboutComponent
  },
  {
    path: "contact",
    component: ContactComponent
  },
  {
    path: "contactus",
    redirectTo: "contact"
  }
];
@NgModule({
  //组件声明
  declarations: [AppComponent, HomeComponent, AboutComponent, ContactComponent],
  //导入依赖
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes) //安装路由
  ],
  //依赖注入。暂时不懂
  //这个选项是一个数组,需要我们列出我们这个模块的一些需要共用的服务
  //然后我们就可以在这个模块的各个组件中通过依赖注入使用了.
  providers: [
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

使用 router-outlet调用RouterOutlet指令

当路由发生变化时，我们希望保留外部布局框架，只用路由的组件替换页面的局部内容。

为了指定Angular在页面的什么地方渲染各种路由的内容，我们使用RouterOutlet指令。

router-outlet元素标示了各个路由组件的内容应该放在哪里被渲染。

下面是顶层组件及其模板

app.component.ts

import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "Angular 路由实例";
}

组件视图模板：app.component.html

<div>
  <!-- 导航栏，固定顶部，应用外框 -->
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <!-- nav header -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-navbar" aria-expanded="false">
            <span class="sr-only">切换导航栏</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Angular 路由</a>
      </div>
      <!-- 导航栏菜单 -->
      <div class="collapse navbar-collapse" id="my-navbar">
        <ul class="nav navbar-nav">
          <li>
            <a [routerLink]="['home']">主页</a>
          </li>
        </ul>
        <!-- 右侧导航栏 -->
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a [routerLink]="['about']">关于我</a>
          </li>
          <li>
            <a [routerLink]="['contact']">联系我</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- 路由指定组件内容的渲染位置 -->
  <div class="container-fluid">
    <router-outlet></router-outlet>
  </div>
</div>