標籤：logs 初始化 wow 控制器 hub 數組 nbsp key 定向
本文也同步發表在我的公眾號“我的天空”
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
AngularJS（九）：路由
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
