angularjs路由(ngRoute)
ng是主要实现SPA（单一页面应用程序）
ngRoute（路由模块）可以定义路由词典，自动解析路由地址，查找路由词典，自动发起ajax请求加载页面显示。
SPA的工作原理：
以页面http://127.0.0.1/index.html为例
1、页面url
http://127.0.0.1/index.html#/路由地址
例如：http://127.0.0.1/index.html#/start
2、解析index.html 是一个完整的html页面，再解析路由地址(start)
3、在路由词典中寻找路由地址(start)所对应的路由信息
4、在路由信息所对应的对象中找到真实的模板页面地址
5、（发起异步ajax）加载模板页面到指定的容器中，实现局部刷新
使用ngRoute的基本步骤：
①创建一个完整的html页面
记得引入angular.js angular-route.js
②创建模块，并指定依赖于ngRoute模块
angular.module(‘myApp’,[‘ng’,’ngRoute’])
③使用指令创建一个盛放代码片段的容器
调用ngView指令：创建一个容器，代码片段会加载到这里
④创建模板页面
⑤配置路由词典
otherwise是用来指定异常的处理
$routePriovder.otherwise({redirectTo:’路由地址’})
值得注意的是ngRoute来传递参数的方法：
SPA应用程序通过ngRoute来传递参数：
- 先搞明白 发送 接收
- 配置接收方的路由 如$
routeProvider.when('/myStart/:num',{
templateUrl:'tpl/start.html'
})3拿到传递过来的参数 $routeParams.num
4.发送：
a href=’#/myStart/10’
$location.path(‘/myStart/10’)
注意事项：配置接收方路由时的冒号后的变量名称要和通过
下面有一个完整的例子如下
完整的index.html页面
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/test.css"/>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-animate.js"></script>
<title></title>
</head>
<body ng-controller="parentCtrl">
<!--指定盛放代码片段的容器-->
<div ng-view class="page">
</div>
<script>
//完成模块的创建和调用
var app = angular.module('myApp',['ng','ngRoute','ngAnimate']);
//配置路由词典
app.config(function ($routeProvider) {
$routeProvider
.when('/myCheck',{
templateUrl:'tpl/checkProduct.html'
})
.when('/myPay/:price',{
templateUrl:'tpl/pay.html',
controller:'PayCtrl'
})
.when('/mySend',{
templateUrl:'tpl/send.html'
})
.otherwise({redirectTo:'/myCheck'})
})
app.controller('parentCtrl',
['$scope','$location',
function ($scope,$location) {
$scope.jump = function (desPath) {
$location.path(desPath);
}
}
])
//支付页面的控制器
app.controller('PayCtrl',['$scope','$location','$routeParams', function ($scope,$location,$routeParams) {
console.log($routeParams.price);
$scope.allPrice = $routeParams.price;
}]);
</script>
</body>
</html>checkproduct.html商品页面
<div ng-include="'tpl/include/header.html'"></div>
<h1>这是商品的查看页面</h1>
<a href="#/myPay/50">去支付</a>pay.html 支付页面
<div ng-include="'tpl/include/header.html'"></div>
<div ng-controller="PayCtrl">
<h1>这是支付页面</h1>
<p>{{"一共消费："+allPrice}}</p>
<button ng-click="jump('/mySend')">发货</button>
</div>send.html 发货页面
<div ng-include="'tpl/include/header.html'"></div>
<h1>这是发货页面</h1>
<a href="#/myCheck">查看商品</a>
<button ng-click="jump('/myCheck')">查看商品</button>ngInclude使用的注意事项
在使用ngInclude进行赋值的时候，对应的路径字符串要在双引号内 加上一对单引号
如：
<div ng-include="'tpl/include/header.html'"></div>