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