多重視圖和路由
為什么需要路由？
回答這個問題首要要簡單介紹一下單頁面應(yīng)用。單頁面應(yīng)用通俗來講就是在瀏覽器中運(yùn)行的只有一個html主頁面的應(yīng)用，在使用期間不會重新刷新頁面加載數(shù)據(jù)，所有的數(shù)據(jù)交互都由AJAX來完成。
能夠從頁面的一個視圖跳轉(zhuǎn)到另一個視圖，對單頁面應(yīng)用來講是至關(guān)重要的。當(dāng)應(yīng)用變得也來越復(fù)雜時，我們需要一個合理的方式來管理 用戶在使用過程中看到的界面。好的方法是將視圖分解為布局與模板視圖，根據(jù)瀏覽器訪問的URL來展示對應(yīng)的視圖。AngularJS提供聲明路由的方法來實(shí)現(xiàn)這個功能。
安裝與使用
要使用路由的功能，需要單獨(dú)引用angular-route.js模塊：
<script src="angular-1.4.9/angular.js"></script>
<script src="angular-1.4.9/angular-route.js"></script>
AngularJS下載地址：https://code.angularjs.org/1.4.9/
不要忘了把ngRoute模塊在我們的應(yīng)用中當(dāng)做依賴加載進(jìn)來：
angular.module('myApp',['ngRoute']);
布局模板
創(chuàng)建一個布局模板，需要修改HTML以告訴AngularJS把模板渲染到何處。通過將ng-view指令和路由組合到一起，我們可以精確地指定當(dāng)前路由所對應(yīng)的模板在DOM中的渲染位置。
例如：
<div>
<div ng-view></div>
</div>
ng-view是由ngRoute模板提供的一個特殊指令，它的獨(dú)特作用是在HTML中給$route對應(yīng)的視圖內(nèi)容上占位。它將創(chuàng)建自己的作用域并將模板嵌套在內(nèi)部。
注意：ng-view是個優(yōu)先級為1000的終極指令，<div ng-view></div>元素上的其他指令都是沒有意義的。
使用config函數(shù)在特定的模塊或應(yīng)用中定義路由。代碼示例：
<body ng-app='routeDemo'>
<!--左邊欄-->
<div id="navigator" style="width: 20%;float: left">
<!--菜單-->
<ul>
<li class="list-group-item"><a href="#/">首頁</a></li>
<li class="list-group-item"><a href="#/woman">女裝</a></li>
<li class="list-group-item"><a href="#/man">男裝</a></li>
<li class="list-group-item"><a href="#/clothes">上衣</a></li>
<li class="list-group-item"><a href="#/skirt">裙子</a></li>
</ul>
</div>
<!--右邊欄-->
<div style="float: left">
<div ng-view=""></div>
</div>
<script type="text/javascript">
var routeDemo = angular.module('routeDemo',['ngRoute']);
routeDemo.config(function($routeProvider){
$routeProvider
.when('/',{//用when來添加一個特定的路由，這個方法可以接收兩個參數(shù)（when(path,route)），第一個參數(shù)是路由路徑，第二個參數(shù)是配置對象
//如果不想再js代碼中拼HTML，也可以使用templateURL，傳入HTML文件URL，寫法如templateURL:'view/one.html'。
template:'<div>首頁</div>'
}).
when('/woman',{
template:'<div>女裝</div>'
}).
when('/man',{
template:'<div>男裝</div>'
}).
when('/clothes',{
template:'<div>上衣</div>'
}).
when('/skirt',{
template:'<div>裙子</div>'
})
})
.otherwise({//可以將意外路徑進(jìn)行重定向的捕獲器
redirectTo:'/'
})
</script>
效果：
when方法的第二個參數(shù)：配置對象：
配置對象決定了當(dāng)?shù)谝粋€參數(shù)中的路由能夠匹配時具體做些什么，配置對象中可以進(jìn)行設(shè)置的屬性包括：
controller
寫法：controller:'MyController'或controllor:function($scope){}
如果在配置對象中設(shè)置了controller屬性，那么這個制定的控制器會與路由所創(chuàng)建的新作用域關(guān)聯(lián)在一起。如果參數(shù)值是字符型，會在模塊中所有注冊過得控制器中查找對應(yīng)的內(nèi)容，然后與路由關(guān)聯(lián)在一起。如果參數(shù)值是函數(shù)值，這個函數(shù)會作為模板中DOM元素的控制器并與模板進(jìn)行關(guān)聯(lián)。template
將HTML語句渲染到具有ng-view指令的DOM元素中。templateUrl
會根據(jù)路徑讀取視圖將其渲染到具有ng-view指令的DOM元素中。resolve
如果設(shè)置了resolve屬性，AngularJS會將列表中的元素注入到控制器中。redirectTo
寫法：redirectTo:'/home或redirectTo:function(route,path,search)。
如果redirectTo屬性的值是一個字符串，那么路徑會替換成為這個值。
如果屬性值是一個函數(shù)，那么路徑會被替換成為函數(shù)的返回值。函數(shù)的三個參數(shù)的意義為：
(1)route：從當(dāng)前路徑中提取出的路由參數(shù)。
(2)path：當(dāng)前路徑
(3)search：當(dāng)前URL中的查詢值reloadOnSearch
如果這一屬性被設(shè)置為true（默認(rèn)），當(dāng)$location.search()發(fā)生變化時會重新加載路由。如果設(shè)置為false，那么URL中的查詢串部分發(fā)生變化時就不會重新加載路由。這個小竅門對路由嵌套和原地分頁等需求十分有用。
