多重视图和路由
为什么需要路由？
回答这个问题首要要简单介绍一下单页面应用。单页面应用通俗来讲就是在浏览器中运行的只有一个html主页面的应用，在使用期间不会重新刷新页面加载数据，所有的数据交互都由AJAX来完成。
能够从页面的一个视图跳转到另一个视图，对单页面应用来讲是至关重要的。当应用变得也来越复杂时，我们需要一个合理的方式来管理 用户在使用过程中看到的界面。好的方法是将视图分解为布局与模板视图，根据浏览器访问的URL来展示对应的视图。AngularJS提供声明路由的方法来实现这个功能。
安装与使用
要使用路由的功能，需要单独引用angular-route.js模块：
<script src="angular-1.4.9/angular.js"></script>
<script src="angular-1.4.9/angular-route.js"></script>
AngularJS下载地址：https://code.angularjs.org/1.4.9/
不要忘了把ngRoute模块在我们的应用中当做依赖加载进来：
angular.module('myApp',['ngRoute']);
布局模板
创建一个布局模板，需要修改HTML以告诉AngularJS把模板渲染到何处。通过将ng-view指令和路由组合到一起，我们可以精确地指定当前路由所对应的模板在DOM中的渲染位置。
例如：
<div>
<div ng-view></div>
</div>
ng-view是由ngRoute模板提供的一个特殊指令，它的独特作用是在HTML中给$route对应的视图内容上占位。它将创建自己的作用域并将模板嵌套在内部。
注意：ng-view是个优先级为1000的终极指令，<div ng-view></div>元素上的其他指令都是没有意义的。
使用config函数在特定的模块或应用中定义路由。代码示例：
<body ng-app='routeDemo'>
<!--左边栏-->
<div id="navigator" style="width: 20%;float: left">
<!--菜单-->
<ul>
<li class="list-group-item"><a href="#/">首页</a></li>
<li class="list-group-item"><a href="#/woman">女装</a></li>
<li class="list-group-item"><a href="#/man">男装</a></li>
<li class="list-group-item"><a href="#/clothes">上衣</a></li>
<li class="list-group-item"><a href="#/skirt">裙子</a></li>
</ul>
</div>
<!--右边栏-->
<div style="float: left">
<div ng-view=""></div>
</div>
<script type="text/javascript">
var routeDemo = angular.module('routeDemo',['ngRoute']);
routeDemo.config(function($routeProvider){
$routeProvider
.when('/',{//用when来添加一个特定的路由，这个方法可以接收两个参数（when(path,route)），第一个参数是路由路径，第二个参数是配置对象
//如果不想再js代码中拼HTML，也可以使用templateURL，传入HTML文件URL，写法如templateURL:'view/one.html'。
template:'<div>首页</div>'
}).
when('/woman',{
template:'<div>女装</div>'
}).
when('/man',{
template:'<div>男装</div>'
}).
when('/clothes',{
template:'<div>上衣</div>'
}).
when('/skirt',{
template:'<div>裙子</div>'
})
})
.otherwise({//可以将意外路径进行重定向的捕获器
redirectTo:'/'
})
</script>
效果：
when方法的第二个参数：配置对象：
配置对象决定了当第一个参数中的路由能够匹配时具体做些什么，配置对象中可以进行设置的属性包括：
controller
写法：controller:'MyController'或controllor:function($scope){}
如果在配置对象中设置了controller属性，那么这个制定的控制器会与路由所创建的新作用域关联在一起。如果参数值是字符型，会在模块中所有注册过得控制器中查找对应的内容，然后与路由关联在一起。如果参数值是函数值，这个函数会作为模板中DOM元素的控制器并与模板进行关联。template
将HTML语句渲染到具有ng-view指令的DOM元素中。templateUrl
会根据路径读取视图将其渲染到具有ng-view指令的DOM元素中。resolve
如果设置了resolve属性，AngularJS会将列表中的元素注入到控制器中。redirectTo
写法：redirectTo:'/home或redirectTo:function(route,path,search)。
如果redirectTo属性的值是一个字符串，那么路径会替换成为这个值。
如果属性值是一个函数，那么路径会被替换成为函数的返回值。函数的三个参数的意义为：
(1)route：从当前路径中提取出的路由参数。
(2)path：当前路径
(3)search：当前URL中的查询值reloadOnSearch
如果这一属性被设置为true（默认），当$location.search()发生变化时会重新加载路由。如果设置为false，那么URL中的查询串部分发生变化时就不会重新加载路由。这个小窍门对路由嵌套和原地分页等需求十分有用。
