##前言
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—' + title"></title>
在这里,请注意,必须把ng-app
指令设置到<html>
标签处,这样子AngularJS才会将这个页面解析出来。
##One route,many views
以上的例子是一个路由对应一个视图,在这种情况下,如果有许多路由和视图,就得在app.js
里面配置很多路由条件,每次新增一个路由视图的时候都得配置路由条件。
其实,Github上有位牛人另辟蹊径,整出了一个One route,many views
的例子,详情请移步ngDynamicRouting项目。
ps
:本示例已经放在Github上,地址为ngDynamicRoutingDEMO,欢迎指正。
##参考
- 常见前端MVC框架比较
- AngularJS官网,建议翻墙看