相關推薦
什么是路由？
一個Single page application（即：單頁面應用，以下簡稱SPA）包含很多個子頁面，如：登錄、注冊、商品列表，訂單列表，地址添加等等，這就相當于一個一個乘客拿的票（即用戶請求不同的頁面），路由這個時候就是那個管理員了，他負責找到用戶請求的頁面相關的資源并返回給瀏覽器（即展示用戶請求的頁面）
注：angular中的路由切換為無刷新切換頁面，這就是SPA的之所以稱之為單頁面應用的原因，所有的頁面切換都在一個頁面內完成，沒有頁面的跳轉（相信大家都能猜到，用的是ajax的技術）
angular是怎么知道頁面切換了呢？ 大家都知道，不同網頁的地址不一樣（地址欄的地址），angular就是利用這個， 當檢測到地址欄地址變化時候，假設地址欄變為http://www.xxx.com/#/login 那么路由就會去加載 login頁面相關的資源（angular的頁面通常不就是控制器和控制器相關的html了 即去通過ajax加載html和控制器）,所以切換頁面的時候，只需讓地址欄發生變化就行了
如何安裝？
使用angular的路由功能需要安裝routing模塊，點擊下載
<script src="js/angular-1.3.0.js"></script>
<script src="js/angular-route.min.js"></script>
如何在項目中用？
- 一. 安裝（參照上面的辦法）
- 二. 在我們的app中引用我們要用的路由模塊
//定義一個模塊，一個ng-app就是一個模塊
//（angular.module()這個方法的第一個參數是模塊名字，第二個參數是，這個模塊依賴的其他模塊）
//（一個頁面里面只有一個ng-app指令會被自動啟用，若存在多個則只有第一個會被自動啟用）
//（如果你需要啟用多個模塊，你需要使用 angular.bootstrap(document.getElementById("app2"), ['需要加載進應用的模塊數組']);）
// 這個方法會返回一個模塊對象，數據這個模塊的控制器都可以在這個對象下邊建立
var appH5 = angular.module('appH5', ['ngRoute']);
說明：angular里面的模塊如果要引用另外一個模塊，把這個模塊的名字注入進他的依賴即可（就是意思告訴angular我灰常需要這個模塊！！！！）
- 三.定義路由
定義路由之前，我們先了解一個基礎知識
什么是依賴注入
就是控制器（angular里面還有服務，常量，自定義指令等等都是同理）運行需要（就意思依賴）什么
那么我們在新建控制器的時候，就把他依賴的服務作為函數的參數傳遞進函數里面，angular就會自動去加載這個服務，來供我們實現功能
//最常見的
function indexCtrl($scope){
$scope.message="我是作用域下面message變量的值";
}
現在我們找到要用的模塊了，那么怎么定義路由呢（即管理員）？
// 我們模塊的config方法來配置路由
//（因為要配置路由所以用到了路由，于是依賴注入$routeProvider【angular中為路由定義的路由對象】）
appH5.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/index', {
templateUrl: "views/index.html",
controller:'indexCtrl'
})
.when('/regsiter', {
templateUrl: "views/regsiter.html",
controller:'regsiterCtrl'
});
}]);
路由其實就是一個映射表（即當什么什么的時候去做什么【是不是跟switch很像】）$routeProvider 的 when方法（第一個參數參數是 URL 或者 URL 正則規則，第二個參數地址對應的路由配置對象詳情請參考點擊查看詳情）定義了當地址為一個值時要加載的資源
$routeProvider
.when('/index', { //當地址為http://www.xxx.com/#/index 的時候
templateUrl: "views/index.html",//加載views目錄下的index.html（這里是個相對路徑）
controller:'indexCtrl'//這段html對應的控制器
})
//如果你不想加載一個html文件，只是渲染一段html標簽的話你可以這么寫
$routeProvider
.when('/index', {
template: "<div>我是首頁{{pageName}}</div>",
controller:'indexCtrl'
})
- 四. 新建我們配置路由時，路由中我們引用的控制器和html
目錄結構
--index.html
--views
----inde.html
--js
----angular-1.3.0.js
----angular-route.min.js
/*
首頁控制器
*/
appH5.controller("indexCtrl",function($scope){
$scope.pageName="首頁";
$scope.messages=[
{id:10,text:"信息1"},
{id:8,text:"信息2"},
{id:5,text:"信息3"},
{id:9,text:"信息4"},
{id:7,text:"信息5"},
{id:6,text:"信息6"},
{id:4,text:"信息7"},
{id:2,text:"信息8"},
{id:1,text:"信息9"},
{id:3,text:"信息10"},
];
});
//appH5.controller的第一個參數是控制器名字，第二個參數是控制器方法
首頁html
<div>
我是{{pageName}}頁面
<ul>
<li ng-repeat="message in messages">{{'索引'+$index+'----'+message.text}}</li>
</ul>
</div>
- 五.在index.html中使用
<html ng-app="appH5">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<title>金桔財富</title>
<script src="js/angular-1.3.0.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/appH5.js"></script>
</head>
<body >
<div class="page-wrapper" >
<header>我是header部分</header>
<div ng-view></div>
<footer>我是footer部分</footer>
</div>
</body>
</html>
ng-view 告訴路由切換之后，路由對應的視圖要顯示的位置
angular 會把路由對應的html 顯示在 ng-view 指令顯示的地方（實際上就是ajax吧控制器對應的html加載過來并放入angular提供的$templateCache服務中，加載過的html會被緩存，不再加載第二次）
ng-view 之外的部分在路由切換時不會發生任何改變
- 六.在服務器環境下打開根目錄下index.html即可
相關內容詳解
- 設置默認頁面
我們配置了兩個路由（index、regsiter），但是用戶不一定會按照我們要求的去輸入（假如輸入http://www.xxx.com/#/hehe）,angular找不到不就拋出錯誤了。angular給我們提供了otherwise（英文意思否則【跟switch中的default相似】），就意思如果路由配置中都匹配不到則執行什么
// 即配置當所有的路由都匹配不到，就重定向到 "/"這個路由
$routeProvider.otherwise({redirectTo: '/'});
$routeProvider
.when('/', {
templateUrl: "views/index.html",
controller:'indexCtrl'
})
.when('/index', {
templateUrl: "views/index.html",
controller:'indexCtrl'
})
.when('/regsiter', {
templateUrl: "views/regsiter.html",
controller:'regsiterCtrl'
});
- 如何在頁面中跳轉到某個頁面？
<a href="#/regsiter">去注冊頁面</a>
- 如何在代碼中跳轉？
appH5.controller("indexCtrl",function($scope,$location){
$scope.pageName="首頁";
//代碼中跳轉到注冊頁面
$scope.goRegsiter=function(){
$location.path("/regsiter");
//跳轉且不可以返回
//$location.path('/regsiter').replace();
};
$scope.messages=[
{id:10,text:"信息1"},
{id:8,text:"信息2"},
{id:5,text:"信息3"},
{id:9,text:"信息4"},
{id:7,text:"信息5"},
{id:6,text:"信息6"},
{id:4,text:"信息7"},
{id:2,text:"信息8"},
{id:1,text:"信息9"},
{id:3,text:"信息10"},
];
});
$location 是路由提供的一個負責跳轉的服務
$location.path() 獲取當前的url
$location.path("/regsiter");跳轉到某個路由
$location.replace();//跳轉后調用這個方法可以跳轉后不可以返回
- 跳轉時如何定義參數？
//路由配置
$routeProvider
.when('/message/:msgid', {
templateUrl: "views/message.html",
controller:'messageCtrl'
})
//控制器獲取
appH5.controller("messageCtrl",function($scope,$routeParams){
$scope.pageName="信息";
$scope.messagesID=$routeParams.msgid;
});
//跳轉時攜帶
<a href="#/message/{{$index}}">{{'索引'+$index+'----'+message.text}}</a>
$routeParams 服務就是angular路由提供的參數傳遞之后所在的對象
要傳遞多個參數，則在url正則后邊追加即可
