javascript
AngularJS（九）：路由
本文也同步發(fā)表在我的公眾號“我的天空”
?
?
?
AngularJS路由
?
AngularJS路由可以讓我們通過不同的URL訪問不同頁面（似乎是廢話），其價值主要體現(xiàn)在單頁面的web應(yīng)用中（single page web application，SPA），在移動端的web開發(fā)中，幾乎都是SPA的形式。我們先通過一個簡單的示例來了解AngularJS路由，隨后再做進(jìn)一步的學(xué)習(xí)。請看示例：
?
<html>
?<head>
? <title>AngularJS_23</title>
? <script src="Angular.js"></script>
? <script src="angular-route.min.js"></script>
?</head>
?<body ng-app="myApp">
???? <ul>
???????? <li><a href="#/">首頁</a></li>
???????? <li><a href="#/news">新聞</a></li>
???????? <li><a href="#/sport">體育</a></li>
?? ? </ul>
?? ? <div ng-view></div>
?</body>
?<script>
??? var app=angular.module("myApp",['ngRoute']);
? ? app.config(function($routeProvider){
?? ??? ?$routeProvider
?? ??? ?.when('/',{template:'這是首頁'})
?? ??? ?.when('/news',{template:'這是新聞頁面'})
?? ??? ?.when('/sport',{template:'這是體育頁面'})
?? ??? ?.otherwise({redirectTo:'/'});
?? ?});
?</script>
</html>
示例代碼AngularJS_23.html
運(yùn)行該頁面，當(dāng)點(diǎn)擊不同的鏈接時在DIV中顯示不同的內(nèi)容。分析以上代碼，看看我們新增加了哪些部分：
?
首先，AngularJS路由功能的實(shí)現(xiàn)是在anguler-route中實(shí)現(xiàn)的，所以我們引入了angular-route.min.js。其次我們觀察a標(biāo)簽里的href地址格式，其均是由#開頭的，AngularJS中URL的形式是通過“# 標(biāo)記”來實(shí)現(xiàn)的。隨后在顯示內(nèi)容的DIV中，我們使用了ng-view指令，該DIV可以看成一個容納頁面的容器。另外在控制器代碼中由于要引入外部模塊，所以我們在模塊app的聲明中引入了“ngRoute”。
?
接下來便是實(shí)現(xiàn)路由的關(guān)鍵代碼app.config()，AngularJS通過config函數(shù)來配置路由，我們將$routeProvider引入到配置函數(shù)config()，并通過$routeProvider的when()或otherwise()函數(shù)來定義我們的路由規(guī)則，函數(shù)包含兩個參數(shù)，第一個是URL或URL正則，第二個為路由配置對象，由于本例中只是簡單的顯示些文字，因此直接設(shè)置template就可以了。otherwise()函數(shù)定義所有未在when()中配置路由的其他url的路由規(guī)則，本例中直接設(shè)置redirctTo參數(shù)。
?
接下里我們學(xué)習(xí)路由配置對象，由于上一例中我們只是簡單的演示路由，因此路由配置對象設(shè)置的比較簡單，完整的路由配置對象格式為：
?
$routeProvider.when(url, {
??? template: string,
??? templateUrl: string,
??? controller: string, function 或 array,
??? controllerAs: string,
??? redirectTo: string, function,
??? resolve: object<key, function>
});
?
各參數(shù)說明：
template：如果我們只需要在ng-view中顯示簡單的html內(nèi)容，就使用該參數(shù)，如上一例所示。
templateUrl：如果需要在ng-view中顯示頁面，則該參數(shù)為頁面的url。
controller：在當(dāng)前模板上執(zhí)行的controller函數(shù)。
controllerAs：controller函數(shù)的別名。
redirectTo：重定向的地址，如上一列中的otherwise()函數(shù)所示。
resolve：指定當(dāng)前controller所依賴的其他模塊。
?
接下里我們演示一個更復(fù)雜的示例，我們先準(zhǔn)備兩個子頁面：
?
<h1>這是新聞頁面</h1>
<ul><li ng-repeat="new in news">{{new}}</li></ul>
示例代碼route_news.html
?
<h1>這是體育頁面</h1>
<ul><li ng-repeat="sport in sports">{{sport}}</li></ul>
示例代碼route_sport.html
?
由于子頁面是嵌套在主頁面的ng-view中，所以只需要DOM元素就可以了，這兩個頁面都很簡單，使用ng-repeat來展示相應(yīng)數(shù)組的內(nèi)容，這個是我們之前已經(jīng)掌握的知識點(diǎn)了。
?
接下來是主頁面：
?
<body ng-app="myApp">
???? <ul>
???????? <li><a href="#/">首頁</a></li>
???????? <li><a href="#/news">新聞</a></li>
???????? <li><a href="#/sport">體育</a></li>
?? ? </ul>
?? ? <div ng-view></div>
?</body>
?<script>
??? var app=angular.module("myApp",['ngRoute']);
?? ?app.controller("ctr_news",function($scope){
?? ??? ?$scope.news=['新聞一','新聞二'];
?? ?})
?? ?.controller("ctr_sport",function($scope){
?? ??? ?$scope.sports=['體育內(nèi)容一','體育內(nèi)容二'];
?? ?})
?? ?.config(function($routeProvider){
?? ??? ?$routeProvider
?? ??? ?.when('/',{
?? ??? ??? ?template:'這是首頁'
?? ??? ?})
?? ??? ?.when('/news',{
?? ??? ??? ?templateUrl:'route_news.html',
?? ??? ??? ?controller:'ctr_news'
?? ??? ?})
?? ??? ?.when('/sport',{
?? ??? ??? ?templateUrl:'route_sport.html',
?? ??? ??? ?controller:'ctr_sport'
?? ??? ?})
?? ??? ?.otherwise({redirectTo:'/'});
?? ?});
?</script>
示例代碼AngularJS_24.html
?
主頁面的html部分與之前的示例完全一樣，我們主要看控制器代碼中。首先在config()函數(shù)中，我們在“新聞頁面”與“體育頁面”的路由配置中，使用了templateUrl來加載子頁面，同時用controller來設(shè)置了其相應(yīng)的控制器，新聞頁面的控制器名為“ctr_news”，這樣我們就可以在主頁面中通過控制器“ctr_news”來訪問并設(shè)置新聞頁面的DOM了，在這里我們是初始化了一個數(shù)組“news”,這樣在子頁面中就可以使用該數(shù)組，并渲染新聞頁面里的li元素，同時體育頁面的處理也完全一樣。
?
app.controller("ctr_news",function($scope){
?? ??? ?$scope.news=['新聞一','新聞二'];
?? ?})
?
當(dāng)然，我們也可以不對子頁面設(shè)置單獨(dú)的控制器，而是統(tǒng)一由主頁面的控制器處理，不過這樣不利于整體代碼的架構(gòu)，不建議這樣寫。
?
<body ng-app="myApp" ng-controller="ctr">
???? <ul>
???????? <li><a href="#/">首頁</a></li>
???????? <li><a href="#/news">新聞</a></li>
???????? <li><a href="#/sport">體育</a></li>
?? ? </ul>
?? ? <div ng-view></div>
?</body>
?<script>
??? var app=angular.module("myApp",['ngRoute']);
?? ?app.controller("ctr",function($scope){
?????? //所有的數(shù)據(jù)在主頁面的控制器中來處理
?? ??? ?$scope.news=['新聞一','新聞二'];
?? ??? ?$scope.sports=['體育內(nèi)容一','體育內(nèi)容二'];
?? ?})
?? ?.config(function($routeProvider){
?? ??? ?$routeProvider
?? ??? ?.when('/',{
?? ??? ??? ?template:'這是首頁'
?? ??? ?})
?? ??? ?.when('/news',{
?? ??? ??? ?templateUrl:'route_news.html'
?? ??? ?})
?? ??? ?.when('/sport',{
?? ??? ??? ?templateUrl:'route_sport.html'
?? ??? ?})
?? ??? ?.otherwise({redirectTo:'/'});
?? ?});
?</script>
示例代碼AngularJS_25.html
?
該系列的示例代碼
?
https://github.com/panyongwow/angularJS
?
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的AngularJS（九）：路由的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 作用域、执行环境、闭包（四）
- 下一篇： JSP页面中使用超链接进行传输参数（参数