AngulerJS學習（三）路由

2024-04-27 15:19:32

字體：大中小

來源：轉載

供稿：網友

簡介

AngularJS 路由允許我們通過不同的 URL 訪問不同的內容。通過 AngularJS 可以實現多視圖的單頁Web應用（single page web application，SPA）。通常我們的URL形式為 http://runoob.com/first/page，但在單頁Web應用中 AngularJS 通過 # + 標記實現，例如： http://runoob.com/#/firsthttp://runoob.com/#/secondhttp://runoob.com/#/third當我們點擊以上的任意一個鏈接時，向服務端請的地址都是一樣的 (http://runoob.com/)。因為 # 號之后的內容在向服務端請求時會被瀏覽器忽略掉。所以我們就需要在客戶端實現 # 號后面內容的功能實現。 AngularJS 路由就通過 # + 標記幫助我們區分不同的邏輯頁面并將不同的頁面綁定到對應的控制器上。

路由設置

路由功能主要是 $routePRovider 服務與 ng-view 實現。ng-view的實現原理，是根據路由的切換，動態編譯html模板——compile(html)(scope)。語法規則：$routeProvider.when(url, { template: string, templateUrl: string, controller: string, function 或 array, controllerAs: string, redirectTo: string, function, resolve: object <key, function>}).otherwise();when()：配置路徑和參數；otherwise：配置其他的路徑跳轉，可以想成default；template：如果我們只需要在 ng-view 中插入簡單的 HTML 內容，則使用該參數；.when('/computers',{template:'這是電腦分類頁面'})templateUrl：如果我們只需要在 ng-view 中插入 HTML 模板文件，則使用該參數；$routeProvider.when('/computers', { templateUrl: 'views/computers.html'});controller：對應路徑的控制器函數，或者名稱；controllerAs：string類型，為controller指定別名；redirectTo：重定向的地址；resolve：該屬性會以鍵值對對象的形式，給路由相關的控制器綁定服務或者值。然后把執行的結果值或者對應的服務引用，注入到控制器中。如果resolve中是一個promise對象，那么會等它執行成功后，才注入到控制器中，此時控制器會等待resolve中的執行結果；reloadOnSearch：設置是否在只有地址改變時，才加載對應的模板；search和params改變都不會加載模板；caseInsensitiveMatch：路徑區分大小寫；

常用事件：

$ routeChangeStart：這個事件會在路由跳轉前觸發；$ routeChangeSuccess：這個事件在路由跳轉成功后觸發；$ routeChangeError：這個事件在路由跳轉失敗后觸發；

使用

1、引入對應的js文件。

angular.js 和 angular-route.js，angular.js必須放在前邊。因為 angular-route.js 會使用到 window.angular 這個參數，而這個參數只有在加載完 angular 才會出現。

2、HTML

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script type="text/Javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-route.min.js"></script> <script type="text/javascript" src="index.js"></script></head><body ng-app="Demo"> <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></body></html>

3、JS/Route

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

上一篇：MyBatis(九) resultType 和 resultMap 總結

下一篇：平時遇到的問題及其解決方案