4-1 angular路由
- AngularJS 路由允許我們通過不同的 URL 訪問不同的內(nèi)容。
- 通過 AngularJS 可以實現(xiàn)多視圖的單頁Web應(yīng)用（single page web application，SPA）舀奶。
- 通常我們的URL形式為
http://www.520it.com/first/page管跺， 但在單頁Web應(yīng)用中 AngularJS 通過 # + 標(biāo)記 實現(xiàn)锭亏，例如：
http://www.520it.com/#/first
http://www.520it.com/#/second
http://www.520it.com/#/third
當(dāng)我們點擊以上的任意一個鏈接時咖城，向服務(wù)端請的地址都是一樣的 (http://www.520it.com/)。 因為 # 號之后的內(nèi)容在向服務(wù)端請求時會被瀏覽器忽略掉执庐。 所以我們就需要在客戶端實現(xiàn) # 號后面內(nèi)容的功能實現(xiàn)酪耕。
AngularJS 路由 就通過 # + 標(biāo)記 幫助我們區(qū)分不同的邏輯頁面并將不同的頁面綁定到對應(yīng)的控制器上。
[圖片上傳失敗...(image-a508a1-1535601924746)]
在以上圖形中轨淌，我們可以看到創(chuàng)建了兩個 URL： /ShowOrders 和 /AddNewOrder迂烁。每個 URL 都有對應(yīng)的視圖和控制器
在后端開發(fā)中通過URL地址可以實現(xiàn)頁面（視圖）的切換
但是AngularJS是一個純前端MVC框架，在開發(fā)單頁面應(yīng)用時递鹉，所有功能都在同一頁面完成
所以無需切換URL地址（即不允許產(chǎn)生跳轉(zhuǎn)）
但Web應(yīng)用中又經(jīng)常通過鏈接（a標(biāo)簽）來更新頁面（視圖）
當(dāng)點擊鏈接時還要阻止其向服務(wù)器發(fā)起請求盟步，通過錨點（頁內(nèi)跳轉(zhuǎn)）可以實現(xiàn)這一點。AngularJS對這一實現(xiàn)原理進(jìn)行了封裝躏结，將錨點的變化封裝成路由（Route）,這是與后端路由的根本區(qū)別却盘。
在angular當(dāng)中路由就是錨點
用來做單頁面應(yīng)用程序的切換。
錨點的變化媳拴，我們又稱為路由的變化黄橘。
路由在angular當(dāng)中屬于單獨的一個模塊。
幫你監(jiān)聽錨點的跳轉(zhuǎn)屈溉，它就是路由塞关。
使用路由分為四步:
- 1.引入angular-route.js
- 2.實例化模塊時,注入ngRoute模塊,包含了ngRoute 模塊作為主應(yīng)用模塊的依賴模塊
- 3.配置路由模塊
- 4.布局模板
<script src="angular.js"></script>
<!--
一.引入angular-route.js
注意:必須要在引入angular.js 之后,引入路由
-->
<script src="angular-route.js"></script>
<script>
//二.實例化模塊時, 注入ngRoute模塊
var app = angular.module('app', ['ngRoute']);
//
app.controller('skController', ['$scope', '$http',function ($scope, $http) {
}]);
//路由,監(jiān)聽錨點變化
//三.配置路由 ->讓路由幫你監(jiān)聽哪些錨點發(fā)生了變化
app.config(['$routeProvider', function ($routeProvider) {
//when() 當(dāng)錨點為指定值時,幫你處理相應(yīng)的邏輯
//路由規(guī)定, 在錨點之前,加上一個 '/'
$routeProvider.when('/home',{
template:'<h1>首頁內(nèi)容<h1>'
}).when('/my',{
template:'<h1>關(guān)于我們內(nèi)容<h1>'
}).when('/contact',{
template:'<h1>聯(lián)系我們內(nèi)容<h1>'
})otherwise({
//都不是設(shè)置默認(rèn)值
redirectTo:'/home'
});
}]);
</script>
<body ng-app="app" ng-controller="skController">
<div class="header">
<ul>
<!--注意:錨點后也要加 /-->
<li><a href="#/home">首頁</a></li>
<li><a href="#/my">關(guān)于我們</a></li>
<li><a href="#/contact">聯(lián)系我盟</a></li>
</ul>
<!-- 四.布局模版 -->
<div class="content">
<div ng-view></div>
</div>
</div>
</body>
