AngularJS - 路由入门我们有很多方法让一个视图随着用户的操作进行变化。
但是，只是单单一个视图就要满足所有的需求会让代码变得非常复杂。
也许我们可以使用
ng-include来引用各种模板，但这只限于部分场景。于是我们可以将视图拆分为两种:
如此一来，我们便可以使用
route实现模板和布局视图的组装，以构建多视图的应用。
Route
ngRoutes并不属于核心模块，我们需要额外引用
angular-route.js，并在声明应用时:
var myApp = angular.module（"myApp",["ngRoute"]）; $routeProvider
route需要通过
$routeProvider定义，比如这样:
var myApp = angular.module（"myApp", ["ngRoute"]）.config（["$routeProvider", function（$routeProvider） {$routeProvider.when（"/", {template: "<h2>contacts</h2>",controller: "myController"}）.when（"/contacts", {templateUrl: "contacts.html",controller: "contactsController"}）.when（"/contacts/:userId", {templateUrl: "contact.html",controller: "contactController"}）.otherwise（{redirectTo: "/"}）;}]）;OMG，这种定义方式太晦涩了，我们不能像定义指令时用
directive（）那样用
route（）什么的吗？
其实
directive（）什么的都是
config（）的语法糖。比如我们这样声明一个指令:
var myApp = angular.module（"myApp", []）.directive（"myDirective", function（） {return {template: "<p>Kavlez</p>"};}）;其实是:
var myApp = angular.module（"myApp", []）.config（function（$compileProvider）{$compileProvider.directive（"myDirective", function（） {return {template: "<p>Kavlez</p>"};}）;}）;provider用来实例化依赖并对外提供API，比如这里的
$route服务就是通过相应的
$routeProvider对外提供API，比如
when（），我们通过这些API设置路由规则。另外，
provider是怎么来的？
Injector对module进行配置时，会在这些module中注册所有定义的provider，必要时会注入服务，而服务的实例化则需要provider来进行。
路由模式
不同的路由模式下URL会以不同的格式呈现，我们有两种模式可以选择。
- 标签模式
AngularJS默认使用这个模式，这个模式下URL会以"#"开头。 - html5模式
这个模式下的URL和一般的没什么区别，如果选择了该模式，AngularJS会根据浏览器重写所有的<a href=""></a>。
路由模式也通过
$routeProvider进行设置，比如:
var myApp = angular.module（"myApp", ["ngRoute"]） .config（["$locationProvider", function（$locationProvider） { $locationProvider.html5Mode（false）; $locationProvider.hashPrefix（"！"）; }]） when
这里使用的
when（path,route）一共两个参数。
- path比较好理解，也就是路由路径，和
$location.path匹配，后面带上:则表示参数，可以传递给$routeParams。 - route指的是path匹配后的动作，是一个对象，属性有:
- controller （string/function）:在这里声明的控制器会得到路由创建的作用域。
- template （string）:HTML模板渲染到声明了
ng-view的元素里。 - templateURL （string）:功能和
template一样，只是通过XHR获得模板。 - resolve : 将列表对象注入到controller中。
- redirectTo （string/function）: 用于替换path。比起用作字符串，函数更有意义。
- reloadOnSearch （boolean）:默认是true，也就是$location.search（）发生变化时重新加载路由。
ng-view
我们用
ng-view接收对应的视图模板，给
$route对应的视图占位。
mg-view的优先级为1000，也就是说AngularJS不会运行同一个元素上的低优先级指令。
ngView指令遵循以下规则。
- 每次触发$routeChangeSuccess事件，视图都会更新。
- 如果某个模板同当前的路由相关联：
- 创建一个新的作用域；
- 移除上一个视图，同时上一个作用域也会被清除；
- 将新的作用域同当前模板关联在一起；
- 如果路由中有相关的定义，那么就把对应的控制器同当前作用域关联起来；
- 触发$viewContentLoaded事件；
- 如果提供了onload属性，调用该属性所指定的函数。
$location
既然涉及到了路径，就不得不说
$location服务。
感觉和
windows.location差不多，但
$location只能用来在内部访问路由，无法刷新整个页面。下面列出
$location的常用的一些方法。
- path（）
当前路径:$location.path（）;跳转至:$location.path（"/"）; - replace（）
这个方法可以让用户无法后退，比如这样:$location.path（"/"）.replace（）; - absUrl（） : 获取绝对路径
- hash（） : 获取URL中的hash片段
- host（） : 获取host
- port（） : 获取端口号
- protocol（） : 获取协议
- search（） :
用于设置URL中的查询参数，比如:$location.search（{id:"000000",name:"Kavlez"}）;$location.search（"id=000000&name=Kavlez"）; - url（） : 获取当前URL，或者修改当前URL
event
有几个路由相关的事件如下:
- $routeChangeStart : 路由变化之前会触发该事件，有三个参数，分别是AngularJS事件对象、将要路由的url、当前url。
$rootScope.$on（"$routeChangeStart", function（evt, next, current） {//something}）; - $routeChangeSuccess : 路由成功后触发，三个参数分别为AngularJS事件对象、当前url、上一个url
- $routeChangeError : 被拒时触发，三个参数为当前路由信息、上一个路由的信息、错误信息。
- $routeUpdate : 如果
reloadOnSearch为false，重新使用控制器的实力时触发。
AngularJS权威教程 清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm希望你喜欢，并分享我的工作~
带你走近AngularJS系列：
- 带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
- 带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
- 带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm
如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htm在 AngularJS 应用中通过 JSON 文件来设置状态 http://www.linuxidc.com/Linux/2014-07/104083.htmAngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htmAngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htm
AngularJS 的详细介绍：请点这里
AngularJS 的下载地址：请点这里
本文永久更新链接地址：http://www.linuxidc.com/Linux/2015-02/113532.htm
易网时代-编程资源站