Angular2 路由模塊簡介
Angular2路由模塊簡介
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></pre>
然后是AngularJS基礎代碼，app.js：
'use strict';
angular.module('webApp', ['ngNewRouter'])
.controller('AppController', ['$router', AppController]);
AppController.$routeConfig = [
];
function AppController ($router) {
}</pre>
構件component
AngularJS 1.3之前，在配置一個路由頁面時，一般會包括一個HTML模板，一個控制器和一套路由配置。路由配置中，要指定相應的HTML模板和控制器名稱。在新的路由策略中，這些被構件（component）所取代，一個構件包括以下幾部分：
- 獨立的目錄，目錄名就是構件名
- 目錄內，與目錄同名的一個js文件，用它來存儲模塊和控制器代碼
- 目錄內，與目錄同名的HTML文件 </ul>
比如，像下面這樣：
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示例';
}</pre>
終于不再$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', ['$router', 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'} |
</tr>
</tbody>
</table>
1 |
<a ng-link='index' class="navbar-brand">Angular2的路由</a> |
</tr>
</tbody>
</table>
{path: '/articles/:id', component: 'articles'} |
</tr>
</tbody>
</table>
<li><a ng-link='articles({id: 1})'>AngularJS常用插件與指令收集</a></li> |
</tr>
</tbody>
</table>
來自：http://chensd.com/2015-06/Angular-New-Router.html