AngularJS入門教程之路由與多視圖詳解
在這一步，你將學習如何創(chuàng)建一個布局模板并且通過路由功能來構建一個具有多個視圖的應用。
請重置工作目錄：
git checkout -f step-7
注意到現(xiàn)在當你轉到app/index.html時，你會被重定向到app/index.html#/phones并且相同的手機列表在瀏覽器中顯示了出來。當你點擊一個手機鏈接時，一個手機詳細信息列表也被顯示了出來。
步驟6和步驟7之間最重要的不同在下面列出。你可以在GitHub里看到完整的差別。
多視圖，路由和布局模板
我們的應用正慢慢發(fā)展起來并且變得逐漸復雜。在步驟7之前，應用只給我們的用戶提供了一個簡單的界面（一張所有手機的列表），并且所有的模板代碼位于index.html文件中。下一步是增加一個能夠顯示我們列表中每一部手機詳細信息的頁面。
為了增加詳細信息視圖，我們可以拓展index.html來同時包含兩個視圖的模板代碼，但是這樣會很快給我們帶來巨大的麻煩。相反，我們要把index.html模板轉變成“布局模板”。這是我們應用所有視圖的通用模板。其他的“局部布局模板”隨后根據(jù)當前的“路由”被充填入，從而形成一個完整視圖展示給用戶。
AngularJS中應用的路由通過$routeProvider來聲明，它是$route服務的提供者。這項服務使得控制器、視圖模板與當前瀏覽器的URL可以輕易集成。應用這個特性我們就可以實現(xiàn)深鏈接，它允許我們使用瀏覽器的歷史(回退或者前進導航)和書簽。
關于依賴注入（DI），注入器（Injector）和服務提供者（Providers）
正如從前面你學到的，依賴注入是AngularJS的核心特性，所以你必須要知道一點這家伙是怎么工作的。
當應用引導時，AngularJS會創(chuàng)建一個注入器，我們應用后面所有依賴注入的服務都會需要它。這個注入器自己并不知道$http和$route是干什么的，實際上除非它在模塊定義的時候被配置過，否則它根本都不知道這些服務的存在。注入器唯一的職責是載入指定的服務模塊，在這些模塊中注冊所有定義的服務提供者，并且當需要時給一個指定的函數(shù)注入依賴（服務）。這些依賴通過它們的提供者“懶惰式”（需要時才加載）實例化。
提供者是提供（創(chuàng)建）服務實例并且對外提供API接口的對象，它可以被用來控制一個服務的創(chuàng)建和運行時行為。對于$route服務來說，$routeProvider對外提供了API接口，通過API接口允許你為你的應用定義路由規(guī)則。
AngularJS模塊解決了從應用中刪除全局狀態(tài)和提供方法來配置注入器這兩個問題。和AMD或者require.js這兩個模塊（非AngularJS的兩個庫）不同的是，AngularJS模塊并沒有試圖去解決腳本加載順序以及懶惰式腳本加載這樣的問題。這些目標和AngularJS要解決的問題毫無關聯(lián)，所以這些模塊完全可以共存來實現(xiàn)各自的目標。
App 模塊
app/js/app.js
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
為了給我們的應用配置路由，我們需要給應用創(chuàng)建一個模塊。我們管這個模塊叫做phonecat，并且通過使用configAPI，我們請求把$routeProvider注入到我們的配置函數(shù)并且使用$routeProvider.whenAPI來定義我們的路由規(guī)則。
注意到在注入器配置階段，提供者也可以同時被注入，但是一旦注入器被創(chuàng)建并且開始創(chuàng)建服務實例的時候，他們就不再會被外界所獲取到。
我們的路由規(guī)則定義如下
當URL 映射段為/phones時，手機列表視圖會被顯示出來。為了構造這個視圖，AngularJS會使用phone-list.html模板和PhoneListCtrl控制器。
當URL 映射段為/phone/:phoneId時，手機詳細信息視圖被顯示出來。這里:phoneId是URL的變量部分。為了構造手機詳細視圖，AngularJS會使用phone-detail.html模板和PhoneDetailCtrl控制器。
我們重用之前創(chuàng)造過的PhoneListCtrl控制器，同時我們?yōu)槭謾C詳細視圖添加一個新的PhoneDetailCtrl控制器，把它存放在app/js/controllers.js文件里。
$route.otherwise({redirectTo: '/phones'})語句使得當瀏覽器地址不能匹配我們?nèi)魏我粋€路由規(guī)則時，觸發(fā)重定向到/phones。
注意到在第二條路由聲明中:phoneId參數(shù)的使用。$route服務使用路由聲明/phones/:phoneId作為一個匹配當前URL的模板。所有以:符號聲明的變量（此處變量為phones）都會被提取，然后存放在$routeParams對象中。
為了讓我們的應用引導我們新創(chuàng)建的模塊，我們同時需要在ngApp指令的值上指明模塊的名字：
app/index.html
<!doctype html> <html lang="en" ng-app="phonecat"> ...
控制器
app/js/controllers.js
...
function PhoneDetailCtrl($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}
//PhoneDetailCtrl.$inject = ['$scope', '$routeParams'];
模板
$route服務通常和ngView指令一起使用。ngView指令的角色是為當前路由把對應的視圖模板載入到布局模板中。
app/index.html
<html lang="en" ng-app="phonecat"> <head> ... <script src="lib/angular/angular.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> </head> <body> <div ng-view></div> </body> </html>
注意，我們把index.html模板里面大部分代碼移除，我們只放置了一個<div>容器，這個<div>具有ng-view屬性。我們刪除掉的代碼現(xiàn)在被放置在phone-list.html模板中：
app/partials/phone-list.html
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
同時我們?yōu)槭謾C詳細信息視圖添加一個占位模板。
app/partials/phone-detail.html
TBD: detail view for {{phoneId}}
注意到我們的布局模板中沒再添加PhoneListCtrl或PhoneDetailCtrl控制器屬性！
測試
為了自動驗證所有的東西都良好地集成起來，我們需要寫一些端到端測試，導航到不同的URL上然后驗證正確地視圖被渲染出來。
...
it('should redirect index.html to index.html#/phones', function() {
browser().navigateTo('../../app/index.html');
expect(browser().location().url()).toBe('/phones');
});
...
describe('Phone detail view', function() {
beforeEach(function() {
browser().navigateTo('../../app/index.html#/phones/nexus-s');
});
it('should display placeholder page with phoneId', function() {
expect(binding('phoneId')).toBe('nexus-s');
});
});
你現(xiàn)在可以刷新你的瀏覽器，然后重新跑一遍端到端測試，或者你可以在AngularJS的服務器上運行一下。
練習
試著在index.html上增加一個{{orderProp}}綁定，當你在手機列表視圖上時什么也沒變。這是因為orderProp模型僅僅在PhoneListCtrl管理的作用域下才是可見的，這與<div ng-view>元素相關。如果你在phone-list.html模板中加入同樣的綁定，那么這個綁定會按你設想的那樣被渲染出來。
總結
設置路由并實現(xiàn)手機列表視圖之后，我們已經(jīng)可以進入步驟8來實現(xiàn)手機詳細信息視圖了。
以上就對AngularJS 路由和多視圖的資料整理，后續(xù)繼續(xù)補充相關知識，謝謝大家對本站的支持！
- Angularjs制作簡單的路由功能demo
- AngularJS 路由詳解和簡單實例
- 使用AngularJS對路由進行安全性處理的方法
- AngularJS路由實現(xiàn)頁面跳轉實例
- AngularJS 路由和模板實例及路由地址簡化方法(必看)
- AngularJS通過ng-route實現(xiàn)基本的路由功能實例詳解
- AngularJS監(jiān)聽路由的變化示例代碼
- 簡單講解AngularJS的Routing路由的定義與使用
- AngularJS監(jiān)聽路由變化的方法
- AngularJS基于ui-route實現(xiàn)深層路由的方法【路由嵌套】
- AngularJS入門教程之路由機制ngRoute實例分析
- AngularJS實現(xiàn)單一頁面內(nèi)設置跳轉路由的方法
相關文章
AngularJS 的輸入驗證是一個強大的功能,可以幫助開發(fā)者確保用戶輸入的數(shù)據(jù)是準確和完整的,這篇文章主要介紹了AngularJS 輸入驗證,需要的朋友可以參考下2024-07-07
本篇文章主要介紹了詳解angularjs 關于ui-router分層使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
AngularJS在IE8的不支持怎么辦？下面小編就為大家?guī)硪黄狝ngularJS在IE8的不支持的解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了jquery操作angularjs對象的相關資料,需要的朋友可以參考下2015-06-06
依賴注入式AngularJS的重要特性之一，依賴注入簡化了Angular解析模塊/組件之間依賴的過程。下面這篇文章主要給大家介紹了關于Angular 4依賴注入基礎的相關資料，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
這篇文章主要介紹了淺談Angular 的變化檢測的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
AngularJS是為了克服HTML在構建應用上的不足而設計的。HTML是一門很好的為靜態(tài)文本展示設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。所以我做了一些工作（你也可以覺得是小花招）來讓瀏覽器做我想要的事。2014-12-12
本篇文章主要介紹了深入探究AngularJs之$scope對象（作用域），具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
AngularJS實現(xiàn)一次監(jiān)聽多個值發(fā)生的變化
這文章給大家介紹了如何利用AngularJS一次監(jiān)聽多個值發(fā)生的變化，文中通過示例代碼演示，這樣更方便大家理解學習，有需要的可以參考借鑒。2016-08-08
這篇文章主要介紹了模板視圖和AngularJS之間沖突的解決方法,結合實例形式分析了AngularJS模板視圖沖突的原因并給出了2種解決方法供大家參考使用,需要的朋友可以參考下2016-11-11