ngRoute簡介
路由是AngularJS很重要的一環(huán)，它可以把你項目的頁面串聯(lián)起來，構(gòu)成一個項目，常用的路由有ngRoute和ui-route，我這里先講ngRoute。ngRoute是一個Module，提供路由和深層鏈接所需的服務(wù)和指令。
注意一點，和之前的文章不一樣，使用ngRoute之前你需要引入另外一個js文件angular-route.js：
<script src="script/angular.min.js"></script><script src="script/angular-route.min.js"></script>
ngRoute包含內(nèi)容如下：
| 名稱 | 類型 | 作用 |
|---|---|---|
| ngView | Directive | 路由的不同模板其實都是插入這個元素里 |
| $routeProvider | Provider | 路由配置 |
| $route | Service | 各個路由的url，view，controller |
| $routeParams | Service | 路由參數(shù) |
使用ngRoute的基本流程如下：
可以看下下面這個例子
color.html
<!DOCTYPE html><html><head> <meta charset="uft-8"/> <title></title></head><script src="script/angular.min.js"></script><script src="script/angular-route.min.js"></script><body ng-app="color"><p><a href="#/" rel="external nofollow" rel="external nofollow" >Main</a></p><a href="#red" rel="external nofollow" rel="external nofollow" >Red</a><a href="#green" rel="external nofollow" rel="external nofollow" >Green</a><div ng-view></div></body><script> var app = angular.module("color", ["ngRoute"]); app.config(function ($routeProvider) { $routeProvider .when("/", { templateUrl: "main.html", controller: 'mainController' }) .when("/red", { templateUrl: "red.html", controller: 'redController' }) .when("/green", { templateUrl: "green.html", controller: 'greenController' }) .otherwise('/'); }); app.controller('mainController',['$scope',function mainController($scope){ $scope.message='this is main page'; }]); app.controller('redController',['$scope',function mainController($scope){ $scope.message='this is red page'; }]); app.controller('greenController',['$scope',function mainController($scope){ $scope.message='this is green page'; }]);</script></html>red.html (其他頁面類似，就不重復(fù)了)
<div style="background: red">{{message}}</div>例子很簡單，我們就只講下路由的配置：
路由模塊化
可能你已經(jīng)注意到了上面的都寫在一起，如果項目越來越大，會不會很頭疼，那么是不是可以把它模塊化，每個模塊都有直接的module，controller，config等。模塊依賴的技術(shù)我們之前的module那篇文章已經(jīng)講過，那么就來看下帶有路由的情況下，怎么模塊化。
color.html:
<!DOCTYPE html><html><head> <meta charset="uft-8"/> <title></title></head><script src="script/angular.min.js"></script><script src="script/angular-route.min.js"></script><script src="red.js"></script><script src="green.js"></script><script src="main.js"></script><body ng-app="color"><p><a href="#/" rel="external nofollow" rel="external nofollow" >Main</a></p><a href="#red" rel="external nofollow" rel="external nofollow" >Red</a><a href="#green" rel="external nofollow" rel="external nofollow" >Green</a><div ng-view></div></body><script> var app = angular.module("color", ["ngRoute","Module.red","Module.main","Module.green"]); app.config(function ($routeProvider) { $routeProvider.otherwise('/'); });</script></html>可以看到我們的color.html文件是不是很簡潔，config的路由配置里只有一行$routeProvider.otherwise方法,但是module卻注入了除ngRoute外的三個module：”Module.red”,”Module.main”,”Module.green”，這其實是把path對應(yīng)的路由提取成模塊，使用了專門的js來處理它們，看起來和他們對應(yīng)的模板相對應(yīng)，我們來看下red.html對應(yīng)的模塊js：
red.js
angular.module('Module.red', ['ngRoute']) .config([ '$routeProvider', function ($routeProvider) { $routeProvider.when('/red', { templateUrl: 'red.html', controller: 'redController' }); } ]) .controller('redController', [ '$scope', function ($scope) { $scope.color='red'; $scope.message = 'This is red page'; } ]);路由的參數(shù)
那么路由怎么將參數(shù)傳入到模板頁呢？我們把上面的例子改造一下，通過例子來講解：
main.js
angular.module('Module.main', ['ngRoute']) .config([ '$routeProvider', function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'main.html', controller: 'mainController' }); } ]) .controller('mainController', [ '$scope', function ($scope) { $scope.message = 'This is main page'; $scope.colors=['blue','yellow','pink']; } ]);這里初始化了一個colors的數(shù)組，作為要傳遞的數(shù)據(jù)。
main.html
{{message}}<br><ul> <li ng-repeat="color in colors"> <a href="#/color/{{color}}" rel="external nofollow" >{{color}}</a> </li></ul>通過ng-repeat循環(huán)創(chuàng)建a鏈接，數(shù)組的元素通過鏈接傳入。
colorId.js
angular.module('Module.colorId', ['ngRoute']) .config([ '$routeProvider', function ($routeProvider) { $routeProvider .when('/color/:colorId', { templateUrl: 'colorId.html', controller: 'colorIdController' }); } ]) .controller('colorIdController', [ '$scope','$routeParams', function ($scope,$routeParams) { $scope.color = $routeParams.colorId; $scope.message = 'This is ' +$routeParams.colorId +' page'; } ]);這里定義了一個colorId的模塊，通過:colorId來匹配傳入的參數(shù)，這里匹配到的是數(shù)組中的元素。例如/color/blue，那么匹配到的就是blue。
colorId.html
<div style="background: {{color}}"> {{message}}</div>最后在colorId上呈現(xiàn)出來。
如果是多個參數(shù)可以直接一一接到后面比如/color/:colorId/:year/:month/:day,和后面的參數(shù)也一一匹配，如/color/pink/2017/3/13。
支持*號：/color/:color/largecode/:largecode*/edit匹配/color/brown/largecode/code/with/slashes/edit的話，color將會匹配到brown，largecode將匹配到code/with/slashes。
支持?號：/color/:color/largecode/:largecode?/edit可以匹配匹配/color/brown/largecode/code/edit，largecode將會匹配到code。
/color/:color/largecode/:largecode?/edit可以匹配匹配/color/brown/largecode/edit，largecode將會匹配到空值。
路由中的resolve
一個最常見的情景，頁面跳轉(zhuǎn)時要加載一些數(shù)據(jù)。有兩種方式可以做到：
個人更喜歡跳轉(zhuǎn)后加載的方式，因為更為友好，所以對resolve不太感冒，但我們還是講下resolve。
resolve是一個map對象:
看下例子：
news.html
<html><head> <meta charset="uft-8"/> <title></title></head><script src="script/angular.min.js"></script><script src="script/angular-route.min.js"></script><body ng-app="ngst-news"><div ng-controller="MainController"> <ul> <li ng-repeat="news in newsAarry"> <a href="#/newsDetail/{{news.id}}" rel="external nofollow" >{{news.title}}</a> </li> </ul> <div ng-view></div></div></body><script src="news.js" charset="UTF-8"></script><script src="newsDetail.js" charset="UTF-8"></script></html>news.js
var news = angular.module("ngst-news", ["ngst-newsDetail"]);news.controller("MainController", ["$scope", function ($scope) { $scope.newsAarry = [{"id": "1", "title": "遼寧人大副主任王陽 浙江寧波市長盧子躍被免職"}, {"id": "2", "title": "今冬小雨繽紛，荔枝園地濕潤壯旺荔枝果樹，下刀環(huán)剝最狠"}, {"id": "3", "title": "百度任原搜索渠道總經(jīng)理顧國棟為市場執(zhí)行總監(jiān)"}];}]);news頁面是一個新聞列表，在列表下面有個ng-view，點擊新聞列表鏈接下面的ng-view進行路由切換。
newsDetails.html
{{message}}newsDetails.js
var news = angular.module("ngst-newsDetail", ['ngRoute']);news.config(["$routeProvider", function ($routeProvider) { $routeProvider.when("/newsDetail/:newsId", { templateUrl: 'newsDetail.html', controller: 'newsDetailController', resolve: { content: ['$q', '$timeout', "$route", function ($q, $timeout, $route) { var deferred = $q.defer(); $timeout(function () { deferred.resolve('新聞詳情 id=' + $route.current.params.newsId); }, 1000); return deferred.promise; }] } }); }]) .controller("newsDetailController", ['$scope', 'content', function ($scope, content) { $scope.message = content; }]);這里使用$route.current.params來獲得參數(shù)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
