相关推荐
什么是路由？
一个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正则后边追加即可
