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
當我們點擊以上的任意一個連結時，向服務端請的地址都是一樣的 (http://runoob.com/)。 因為 # 號之後的內容在向服務端請求時會被瀏覽器忽略掉。 所以我們就需要在用戶端實現 # 號後面內容的功能實現。 AngularJS 路由 就通過 # + 標記 協助我們區分不同的邏輯頁面並將不同的頁面綁定到對應的控制器上。
在以上圖形中，我們可以看到建立了兩個 URL： /ShowOrders 和 /AddNewOrder。每個 URL 都有對應的視圖和控制器。
接下來我們來看一個簡單的執行個體：
<html> <head> <meta charset="utf-8"> <title>AngularJS 路由執行個體 - 菜鳥教程</title> </head> <body ng-app='routingDemoApp'> <h2>AngularJS 路由應用</h2> <ul> <li><a href="#/">首頁</a></li> <li><a href="#/computers">電腦</a></li> <li><a href="#/printers">印表機</a></li> <li><a href="#/blabla">其他</a></li> </ul> <div ng-view></div> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> <script> angular.module('routingDemoApp',['ngRoute']) .config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'這是首頁頁面'}) .when('/computers',{template:'這是電腦分類頁面'}) .when('/printers',{template:'這是印表機頁面'}) .otherwise({redirectTo:'/'}); }]); </script> </body></html>
運行結果：
AngularJS 路由應用
執行個體解析：
1、載入了實現路由的 js 檔案：angular-route.js。
2、包含了 ngRoute 模組作為主應用模組的相依模組。
angular.module('routingDemoApp',['ngRoute'])
3、使用 ngView 指令。
<div ng-view></div>
該 div 內的 HTML 內容會根據路由的變化而變化。
配置 $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所依賴的其他模組。
執行個體
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script><script type="text/javascript">angular.module('ngRouteExample', ['ngRoute']).controller('HomeController', function ($scope) { $scope.$route = $route;}).controller('AboutController', function ($scope) { $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> </head><body ng-app="ngRouteExample" class="ng-scope"> <script type="text/ng-template" id="embedded.home.html"> <h1> Home </h1> </script> <script type="text/ng-template" id="embedded.about.html"> <h1> About </h1> </script> <div> <div id="navigation"> <a href="#/home">Home</a> <a href="#/about">About</a> </div> <div ng-view=""> </div> </div></body></html>
運行結果：
Home About
Home
以上就是對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
