AngularJS 路由

本章節我們将為大家介紹 AngularJS 路由。

AngularJS 路由允許我們通過不同的 URL 通路不同的内容。

通過 AngularJS 可以實作多視圖的單頁 Web 應用（single page web application，SPA）。

通常我們的 URL 形式為

http://runoob.com/first/page ，但在單頁 Web 應用中 AngularJS 通過 #! + 标記 實作，例如：

http://runoob.com/#!/first     http://runoob.com/#!/second     http://runoob.com/#!/third

注意 Angular1.6 之前的版本是通過 # + 标記 實作路由。

當我們點選以上的任意一個連結時，向服務端請的位址都是一樣的 (http://runoob.com/)。因為 #! 号之後的内容在向服務端請求時會被浏覽器忽略掉。是以我們就需要在用戶端實作 #! 号後面内容的功能實作。 AngularJS 路由就通過

幫助我們區分不同的邏輯頁面并将不同的頁面綁定到對應的控制器上。

在以上圖形中，我們可以看到建立了兩個 URL： /ShowOrders 和 /AddNewOrder。每個 URL 都有對應的視圖和控制器。

接下來我們來看一個簡單的執行個體：

AngularJS 執行個體

<!DOCTYPE html>

<html>

<head>

<title>AngularJS 路由執行個體 - 菜鳥教程</title>

</head>

<h2>AngularJS 路由應用</h2>

<ul>

</ul>

angular.module('routingDemoApp',['ngRoute'])

.config(['$routeProvider', function($routeProvider){

$routeProvider

.when('/',{template:'這是首頁頁面'})

.when('/computers',{template:'這是電腦分類頁面'})

.when('/printers',{template:'這是列印機頁面'})

.otherwise({redirectTo:'/'});

}]);

</script>

</body>

</html>

執行個體解析：

1、載入了實作路由的 js 檔案：angular-route.js。
2、包含了 ngRoute 子產品作為主應用子產品的依賴子產品。
```
angular.module('routingDemoApp',['ngRoute'])      
```
3、使用 ngView 指令。
```
<div ng-view></div>      
```
該 div 内的 HTML 内容會根據路由的變化而變化。

4、配置 $routeProvider，AngularJS $routeProvider 用來定義路由規則。

module.config(['$routeProvider', function($routeProvider){         $routeProvider             .when('/',{template:'這是首頁頁面'})             .when('/computers',{template:'這是電腦分類頁面'})             .when('/printers',{template:'這是列印機頁面'})             .otherwise({redirectTo:'/'});     }]);

AngularJS 子產品的 config 函數用于配置路由規則。通過使用 configAPI，我們請求把$routeProvider注入到我們的配置函數并且使用$routeProvider.whenAPI來定義我們的路由規則。

$routeProvider 為我們提供了 when(path,object) & otherwise(object) 函數按順序定義所有路由，函數包含兩個參數:

第一個參數是 URL 或者 URL 正則規則。
第二個參數是路由配置對象。

路由設定對象

AngularJS 路由也可以通過不同的模闆來實作。

$routeProvider.when 函數的第一個參數是 URL 或者 URL 正則規則，第二個參數為路由配置對象。

路由配置對象文法規則如下：

$routeProvider.when(url, {         template: string,         templateUrl: string,         controller: string, function 或 array,         controllerAs: string,         redirectTo: string, function,         resolve: object<key, function>     });

參數說明：

template: 如果我們隻需要在 ng-view 中插入簡單的 HTML 内容，則使用該參數：
```
.when('/computers',{template:'這是電腦分類頁面'})      
```
templateUrl: 如果我們隻需要在 ng-view 中插入 HTML 模闆檔案，則使用該參數：
```
$routeProvider.when('/computers', {         templateUrl: 'views/computers.html',     });      
```
以上代碼會從服務端擷取 views/computers.html 檔案内容插入到 ng-view 中。
controller: function、string或數組類型，在目前模闆上執行的controller函數，生成新的scope。
controllerAs: string類型，為controller指定别名。
redirectTo: 重定向的位址。
resolve: 指定目前controller所依賴的其他子產品。

執行個體

angular.module('ngRouteExample', ['ngRoute'])

.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})

.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})

.config(function ($routeProvider) {

$routeProvider.

when('/home', {

templateUrl: 'embedded.home.html',

controller: 'HomeController'

}).

when('/about', {

templateUrl: 'embedded.about.html',

controller: 'AboutController'

otherwise({

redirectTo: '/home'

});

</script>

</script>

<h1> About </h1>

<div>

<a href="#!/about">About</a>

</div>

</div>