AngularJS动态路由

##前言

AngularJS是一款开源 JavaScript函式库，由Google维护，用来协助单一页面应用程式运行的。它的目标是透过MVC模式 (MVC) 功能增强基于浏览器的应用，使开发和测试变得更加容易

本例子使用的是AngularJS 1.2.2版本。

##简单的动态路由
AngularJS提供动态路由控制，就是根据地址栏链接不同调用不同的模板来呈现在页面。
使用动态路由需要调用ngRoute模块,ngRoute模块为angular应用提供了路由选择、深链接服务和指令。

####安装
在主页面（一般是index.html页面）引用如下两个js文件

<script src="angular.js">
<script src="angular-route.js">

####路由选择定义
创建一个app.js文件：

/**
 * Created by Arthur WANG on 14-8-2.
 */
var app = angular.module('app', ['ngRoute']);//创建名为app的模块

//配置动态路由
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/about', {//当解析到/about路径的时候，会调用viws/about.html模板和使用aboutCtrl控制器
            templateUrl: 'views/about.html',
            controller: 'aboutCtrl'
        })
        .when('/contact', {
            templateUrl: 'views/contact.html',
            controller: 'contactCtrl'
        }).otherwise({//其他路径时跳转到主页
            redirectTo: '/'
        });
}]);

在主页面中引用以上js文件。

####控制器
这里，我们打算进入about页面时调用aboutCtrl控制器。所以我们创建一个aboutCtrl.js，如下所示：
/**

 * Created by Arthur WANG on 14-8-2.
 */
app.controller('aboutCtrl', ['$scope', function ($scope) {
    $scope.author = "Arthur WANG";
    $scope.name = "AngularJS";
}]);

####视图
路径/about将会调用views/about.html，在视图里面填上要呈现的内容。

####主页面
在主页面里，依次引用上面写的js文件

<script src="app.js"></script>
<script src="controllers/aboutCtrl.js"></script>

同时，建议将ng-app=”app”指令放置在<html>标签上。
然后在需要动态替换视图的地方添加如下代码：

<!--Div.ng-view将会被模板替换-->
<div ng-view></div>

这样，一个简单的AngularJS动态路由就搭建完毕。

##随路由改变而变化的页面标题

如果想要路由变化的时候，页面title也跟着变化，可以如下设置：

1、为每个$routeProvider的条件添加title属性:

$routeProvider
    .when('/about', {//当解析到/about路径的时候，会调用viws/about.html模板和使用aboutCtrl控制器
        title: '关于',
        templateUrl: 'views/about.html',
        controller: 'aboutCtrl'
    })
    .otherwise({
        title: '首页',
        redirectTo: '/'
    });

2、在app.js的后面添加如下代码：

//页面title跟着变化
app.run(['$location','$rootScope',function($location,$rootScope){
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.title;
    });
}]);

3、主页面的title修改为如下：

<title ng-bind="'AngularJS&mdash;' + title"></title>

在这里，请注意，必须把ng-app指令设置到<html>标签处，这样子AngularJS才会将这个页面解析出来。

##One route,many views

以上的例子是一个路由对应一个视图，在这种情况下，如果有许多路由和视图，就得在app.js里面配置很多路由条件，每次新增一个路由视图的时候都得配置路由条件。

其实，Github上有位牛人另辟蹊径，整出了一个One route,many views的例子，详情请移步ngDynamicRouting项目。

ps:本示例已经放在Github上，地址为ngDynamicRoutingDEMO，欢迎指正。

##参考

常见前端MVC框架比较
AngularJS官网，建议翻墙看