AngularJS 教程
AngularJS 路由
本章節(jié)我們將為大家介紹 AngularJS 路由。
AngularJS 路由允許我們通過不同的 URL 訪問不同的內(nèi)容。
通過 AngularJS 可以實(shí)現(xiàn)多視圖的單頁 Web 應(yīng)用（single page web application，SPA）。
通常我們的 URL 形式為 http://json.cn/first/page，但在單頁 Web 應(yīng)用中 AngularJS 通過 #! + 標(biāo)記 實(shí)現(xiàn)，例如：
http://json.cn/#!/first http://json.cn/#!/second http://json.cn/#!/third
注意 Angular1.6 之前的版本是通過 # + 標(biāo)記 實(shí)現(xiàn)路由。
當(dāng)我們點(diǎn)擊以上的任意一個(gè)鏈接時(shí)，向服務(wù)端請的地址都是一樣的 (http://json.cn/)。 因?yàn)?#! 號之后的內(nèi)容在向服務(wù)端請求時(shí)會(huì)被瀏覽器忽略掉。 所以我們就需要在客戶端實(shí)現(xiàn) #! 號后面內(nèi)容的功能實(shí)現(xiàn)。 AngularJS 路由就通過 #! + 標(biāo)記 幫助我們區(qū)分不同的邏輯頁面并將不同的頁面綁定到對應(yīng)的控制器上。
在以上圖形中，我們可以看到創(chuàng)建了兩個(gè) URL： /ShowOrders 和 /AddNewOrder。每個(gè) URL 都有對應(yīng)的視圖和控制器。
接下來我們來看一個(gè)簡單的實(shí)例：
AngularJS 實(shí)例
運(yùn)行代碼 ?
實(shí)例解析：
1、載入了實(shí)現(xiàn)路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模塊作為主應(yīng)用模塊的依賴模塊。
angular.module('routingDemoApp',['ngRoute'])3、使用 ngView 指令。
<div ng-view></div>
該 div 內(nèi)的 HTML 內(nèi)容會(huì)根據(jù)路由的變化而變化。
4、配置 $routeProvider，AngularJS $routeProvider 用來定義路由規(guī)則。
module.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'這是首頁頁面'}) .when('/computers',{template:'這是電腦分類頁面'}) .when('/printers',{template:'這是打印機(jī)頁面'}) .otherwise({redirectTo:'/'}); }]);
AngularJS 模塊的 config 函數(shù)用于配置路由規(guī)則。通過使用 configAPI，我們請求把$routeProvider注入到我們的配置函數(shù)并且使用$routeProvider.whenAPI來定義我們的路由規(guī)則。
$routeProvider 為我們提供了 when(path,object) & otherwise(object) 函數(shù)按順序定義所有路由，函數(shù)包含兩個(gè)參數(shù):
- 第一個(gè)參數(shù)是 URL 或者 URL 正則規(guī)則。
- 第二個(gè)參數(shù)是路由配置對象。
路由設(shè)置對象
AngularJS 路由也可以通過不同的模板來實(shí)現(xiàn)。
$routeProvider.when 函數(shù)的第一個(gè)參數(shù)是 URL 或者 URL 正則規(guī)則，第二個(gè)參數(shù)為路由配置對象。路由配置對象語法規(guī)則如下：
$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ù)：
.when('/computers',{template:'這是電腦分類頁面'})templateUrl:
如果我們只需要在 ng-view 中插入 HTML 模板文件，則使用該參數(shù)：
$routeProvider.when('/computers', { templateUrl: 'views/computers.html', });以上代碼會(huì)從服務(wù)端獲取 views/computers.html 文件內(nèi)容插入到 ng-view 中。
controller:
function、string或數(shù)組類型，在當(dāng)前模板上執(zhí)行的controller函數(shù)，生成新的scope。
controllerAs:
string類型，為controller指定別名。
redirectTo:
重定向的地址。
resolve:
指定當(dāng)前controller所依賴的其他模塊。
實(shí)例
AngularJS 實(shí)例
運(yùn)行代碼 ?