由于该模块已经停止针对 AngularJS 1.4.7 及以下版本的维护，请不要再在项目中使用。**由于该模块已经停止针对 AngularJS 1.4.7 及以下版本的维护，请不要再在项目中使用。
Angular2虽然还没有正式发布，但全新设计的路由模块已经提前面世，它从AngularJS 1.4开始支持。相对于老的ngRoute，使用更方便，配置更简单，更加注重约定。新的路由模块被命名为Angualar New Router，以前的ui-view被新的ng-viewport取而代之，另外引入了component的概念。我们用一个例子来对它做一个简单的了解。
基础代码
先来构建基础的HTML和JS代码，index.html代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Angular New Router Test</title>
</head>
<body ng-app="webApp" ng-controller="AppController as app">
<div class="container">
<ng-viewport></ng-viewport>
</div>
<script src="../lib/angular2/angular.js"></script>
<script src="../lib/angular-new-router/dist/router.es5.js"></script>
<script src="./app.js"></script>
</body>
</html>
'use strict';
angular.module('webApp',['ngNewRouter'])
.controller('AppController',['$router',AppController]);
AppController.$routeConfig = [
];
function AppController ($router) {
}
构件component
AngularJS 1.3之前，在配置一个路由页面时，一般会包括一个HTML模板，一个控制器和一套路由配置。路由配置中，要指定相应的HTML模板和控制器名称。在新的路由策略中，这些被构件（component）所取代，一个构件包括以下几部分：
比如，像下面这样：
home/
├── home.html
└── home.js
单从上面这几部分来讲，可能看不出来构件的优势，但在路由配置的时候，你根本不用指定HTML文件，也不用指定控制器名字，只需要直接使用构件名——也就是目录名就行了。像这样：
{path: '/',component: 'home'}
配置的代码简化了许多，而你所需要做的，就是遵循约定，使用约定来取代配置。先来看看home.js文件，它包括控制器和模块代码：
angular.module('webApp.home',[])
.controller('HomeController',["$router",HomeController]);
function HomeController($router) {
this.AppName = 'Angular New Router示例';
}
终于不再$scope满天飞了，控制器更符合面向对象的概念，使用了this。以前在HTML中，是直接使用控制器内的变量，再在，需要指定构件名了，如下：
<div class="page-header"> <h3>{{home.AppName}}</h3> </div>
构件的js文件，需要使用<script>来导入，另外还要在app.js的主模块中，加入对构件模块的依赖，如下：
angular.module('webApp',['ngNewRouter','webApp.home','webApp.articles']
)
.controller('AppController',AppController]);
在上面的index.html文件中，曾经为BODY元素指定了控制器：
<body ng-app="webApp" ng-controller="AppController as app">
</body>
如果要使用AppController中的变量，则需要像下面这样：
<span>{{app.AppName}}</span>
路由的配置
ngRoute中的路由配置，结构还是比较复杂的——反正我每次都是从现成的路由配置文件复制过来，不然可真记不住。但新的路由模块配置，相当简单方便，其实刚刚我们已经看过一行了，再来看看完整的代码：
AppController.$routeConfig = [
{path: '/',component: 'home'}
];
没错，直接设置控制器的属性就行了。还可以在控制器代码内配置：
function AppController($router) {
$router.config([
{path: '/index',redirectTo: '/'}
]);
}
以前的url属性，现在叫path了，单从字面意思上讲，其实用path更准确。如果要设置某个路由直接跳转到另外一个，使用redirectTo即可：
AppController.$routeConfig = [
{path: '/',component: 'home'},{path: '/index',redirectTo: '/'}
];
当然，你也可以直接设置别名：
{path: '/',component: 'home',as: 'home'}
基本上，一个路由只需要一条无需换行的代码便可以配置完成了。
指向路由的链接
ngRoute中是使用ui-sref来创建链接，现在增加了一个ng-link，虽然名字变了，但用法其实差不多，使用如下：
<a ng-link='index' class="navbar-brand">Angular2的路由</a>
ng-viewport
实在不知道这个viewport怎么个翻译，查了下有道，居然叫视口——好吓人的感觉。
其实，它和以前的ui-view差不多，用法如下：
<ng-viewport></ng-viewport>
<div ng-viewport></div>
<div ng-viewport="content"></div>
这三种都行。最后一种用于有多个构件需要加载的情况。
路由参数
路由参数和以前相比，没什么变化，它在路由中的配置如下：
{path: '/articles/:id',component: 'articles'}
在控制器中，也还是使用$routeParams，如下：
angular.module('webApp.articles',[])
.controller("ArticlesController",['$routeParams','$router',ArticlesController]);
function ArticlesController($routeParams,$router){
this.id = $routeParams.id || @H_411_502@0;
}
链接的格式也没有变化，仍然使用：
<li><a ng-link='articles({id: 1})'>AngularJS常用插件与指令收集</a></li>
打完收功。
