AngularJS学习笔记（四）多重视图和路由

多重视图和路由

为什么需要路由？

回答这个问题首要要简单介绍一下单页面应用。单页面应用通俗来讲就是在浏览器中运行的只有一个html主页面的应用，在使用期间不会重新刷新页面加载数据，所有的数据交互都由AJAX来完成。
能够从页面的一个视图跳转到另一个视图，对单页面应用来讲是至关重要的。当应用变得也来越复杂时，我们需要一个合理的方式来管理用户在使用过程中看到的界面。好的方法是将视图分解为布局与模板视图，根据浏览器访问的URL来展示对应的视图。AngularJS提供声明路由的方法来实现这个功能。

安装与使用

要使用路由的功能，需要单独引用angular-route.js模块：

AngularJS下载地址：https://code.angularjs.org/1.4.9/
不要忘了把ngRoute模块在我们的应用中当做依赖加载进来：

angular.module('myApp',['ngRoute']);

布局模板

创建一个布局模板，需要修改HTML以告诉AngularJS把模板渲染到何处。通过将ng-view指令和路由组合到一起，我们可以精确地指定当前路由所对应的模板在DOM中的渲染位置。
例如：

ng-view是由ngRoute模板提供的一个特殊指令，它的独特作用是在HTML中给$route对应的视图内容上占位。它将创建自己的作用域并将模板嵌套在内部。
注意：ng-view是个优先级为1000的终极指令，

元素上的其他指令都是没有意义的。
使用config函数在特定的模块或应用中定义路由。代码示例：

效果：

image.png

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中的查询串部分发生变化时就不会重新加载路由。这个小窍门对路由嵌套和原地分页等需求十分有用。