使用AngularJs來做多重視圖和路由是在方便不過了，在開發過程中，都有許多的頁面，而這些頁面都有相同的部分，比如頁面的頭部和尾部通常都是一樣的，變化的都是主體部分，還有就是一些后端管理的一些項目，通常不變的都是頭部，尾部和菜單部分，變化的都是右邊的內容部分，使用AngularJs的多重視圖和路由就可以很方便的實現這樣的效果。在實現之前需要准備兩個文件，一個是angular的主JS文件，另一個是angular的路由JS文件，如下：
<script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script>
在頁面中引入這兩個JS文件就可以使用angular了，這里將實現這效果分為如下幾步：
1.創建一個簡單的布局文件
2.創建一個模塊，可以寫在當前的布局文件中也可以新開一個js文件，為了方便管理還是分開好點
3.創建路由規則
4.如果有用到控制器，再創建控制器
接下來就具體來實現這個效果：
1.
<html> <meta charset="UTF-8"> <script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script> <title></title> <body> <header> <h1>頁面頭部</h1> </header> <!--這里就是渲染其他視圖的地方--> <div data-ng-view=""></div> <footer> <h1>頁面底部</h1> </footer> </body> </html>
在angularjs中就是通過ng-view指令和路由結合在一起。
2.創建模塊
var mainApp=angular.module("main.app",['ngRoute']);
因為要使用路由，所以必須將ngRoute依賴加入進來
3.創建路由規則
mainApp.config(["$routeProvider",function($routeProvider){ $routeProvider.when("/",{ template:"<h1>內容部分</h1>" }).when("/index",{ templateUrl:"index.html" }).otherwise({ template:"<h2>這個是默認的模板哦</h2>" }); }]);
如上，我們已經用when方法設置了兩個路由。otherwise方法會在沒有任何路由匹配時被調用，用它設置了一個默認的提示路由。可以看出來，這里有兩中路由，一個路由是使用的模板，另一個是使用的模板路徑，其實在路由中還有很多的屬性可以配置，比如配置controller,
resolve,redirectTo.
在路由中配置控制器，如下：
mainApp.config(["$routeProvider",function($routeProvider){ $routeProvider.when("/",{ template:"<h1>內容部分</h1>", controller:"MainController" }); }]);
也可以寫成這樣
mainApp.config(["$routeProvider",function($routeProvider){ $routeProvider.when("/",{ template:"<h1>內容部分</h1>", controller:function($scope){} }); }]);
如果需要使用resolve,必須配置控制器，否則會報錯，如果使用resolve屬性，那么angularjs會將屬性的鍵注入到配置的控制器中，使用如下：
mainApp.config(["$routeProvider",function($routeProvider){ $routeProvider.when("/",{ template:"<h1>內容部分{{name}}</h1>", controller:"MainController", resolve:{ name:function(){ return "張三"; } } }); }]);
列表對象可以是:
鍵：是注入到控制器中的名稱
工廠：可以是一個服務工廠，也可以是一個返回值
在控制器中是這樣獲取上面注入的鍵
mainApp.controller("MainController",["name","$scope",function(name,$scope){
$scope.name=name;
}]);
redirectTo的使用，它的作用是做轉發，如下：
mainApp.config(["$routeProvider",function($routeProvider){ $routeProvider.when("/",{ template:"<h1>內容部分{{name}}</h1>", controller:"MainController", resolve:{ name:function(){ return "張三"; } }, redirectTo:"/index" }).when("/index",{ templateUrl:"index.html" }); }]);
如果訪問的是第一個路由，因為里面配置了redirectTo屬性，那么就會轉到它所配置的路由上。
到這里路由的配置就算完成了，如果需要獲取路由的參數，可以通過控制器來獲取。
$routeParams：
可以使用它來獲取路由參數，比如我們將路由配置成如下格式：
mainApp.config(["$routeProvider",function($routeProvider){ $routeProvider.when("/index/:name",{ templateUrl:"index.html" }); }]);
那么訪問的格式就是/index/zhangsan,這樣通過控制器來獲取的參數格式就是{"name":"zhangsan"},如下：
mainApp.controller("MainController",["$scope","$routeParams",function($scope,$routeParams){
$scope.name=$routeParams;
}]);
$location服務，可以用它來解析請求的URL中的相關信息，控制器使用如下：
mainApp.controller("MainController",["$scope","$<span style="font-family: Arial, Helvetica, sans-serif;">location</span>",function($scope,$<span style="font-family: Arial, Helvetica, sans-serif;">location</span>){
}]);
$location服務下有如下方法：
1.path();獲取當前頁面的路徑，也可以設置一個新的路徑path("/")，這樣就修改為“/”的路由了
$location.path();//獲取
$location.path("/");//設置
2.replace()
如果你希望跳轉后用戶不能點擊后退按鈕（對於登錄之后的跳轉這種發生在某個跳轉之后的再次跳轉很有用），AngularJS提供了replace()方法來實現這個功能：
$location.path('/home');
$location.replace();
// 或者
$location.path('/home').replace();
3.absUrl()
absUrl()方法用來獲取編碼后的完整URL：
$location.absUrl()
4.hash()
hash()方法用來獲取URL中的hash片段：
$location.hash(); // 返回當前的hash片段
5. host()
host()方法用來獲取URL中的主機：
$location.host();// 當前URL的主機
6. port()
port()方法用來獲取URL中的端口號：
$location.port();// 當前URL的端口
7. protocol()
protocol()方法用來獲取URL中的協議：
$location.protocol();// 當前URL的協議
8. search()
search()方法用來獲取URL中的查詢串：
$location.search();
我們可以向這個方法中傳入新的查詢參數，來修改URL中的查詢串部分：
// 用對象設置查詢
$location.search({name: 'Ari', username: 'auser'});
// 用字符串設置查詢
$location.search('name=Ari&username=auser');
search方法可以接受兩個參數。
search（可選，字符串或對象）
這個參數代表新的查詢參數。hash對象的值可以是數組。
paramValue（可選，字符串）
如果search參數的類型是字符串，那么paramValue會做為該參數的值覆蓋URL當中的對應
值。如果paramValue的值是null，對應的參數會被移除掉。
9. url()
url()方法用來獲取當前頁面的URL：
$location.url(); // 該URL的字符串
如果調用url()方法時傳了參數，會設置並修改當前的URL，這會同時修改URL中的路徑、
查詢串和hash，並返回$location。
// 設置新的URL
$location.url('/home?name=Ari#hashthing');
url()方法可以接受兩個參數。
url（可選，字符串）
新的URL的基礎的前綴。
replace（可選，字符串）
想要修改成的路徑。