AngularJS 视图和路由

[align=left]在AngularJS之后引用angular-route 路由[/align]
[align=left] [/align]
[align=left]ngRoute模块加载声明[/align]
[align=left] [/align]
[align=left]AngularJS提供的when和otherwise两个方法来定义应用的路由[/align]
[align=left] [/align]
[align=left]otherwise方法会在没有任何路由匹配时被调
用，我们用它设置了一个默认跳转到'/'路径的路由[/align]
[align=left] [/align]
[align=left]ng-view是一个优先级为 1000的终极指令。 AngularJS不会运行同一个元素上的
低优先级指令 [/align]
[align=left] 每次触发$routeChangeSuccess事件，视图都会更新。[/align]
[align=left]如果某个模板同当前的路由相关联：
创建一个新的作用域；
移除上一个视图，同时上一个作用域也会被清除；
将新的作用域同当前模板关联在一起；
如果路由中有相关的定义，那么就把对应的控制器同当前作用域关联起来；
触发$viewContentLoaded事件；
如果提供了onload属性，调用该属性所指定的函数。

[/align]
作用域是控制器和视图之间的“胶水”
。

[align=left]1. controller[/align]
controller:
'MyController'
[align=left]// 或者[/align]
controller: function($scope)
{}
[align=left]如果配置对象中设置了controller属性，那么这个指定的控制器会与路由所创建的新作用[/align]
[align=left]域关联在一起。如果参数值是字符型，会在模块中所有注册过的控制器中查找对应的内容，然后[/align]
[align=left]与路由关联在一起。如果参数值是函数型，这个函数会作为模板中DOM元素的控制器并与模板[/align]
[align=left]进行关联。[/align]
[align=left] [/align]
[align=left]2. template[/align]
template:
'<div><h2>Route</h2></div>'
[align=left]AngularJS会将配置对象中的HTML模板渲染到对应的具有ng-view指令的DOM元素中。[/align]
[align=left] [/align]
[align=left]3. templateUrl[/align]
templateUrl:
'views/template_name.html'
应用会根据templateUrl
属性所指定的路径通过XHR读取视图（或者从$templateCache中读
取）。如果能够找到并读取这个模板，
AngularJS会将模板的内容渲染到具有ng-view指令的DOM
[align=left]元素中。[/align]
[align=left] [/align]
[align=left]4. resolve[/align]
[align=left]resolve: {[/align]
'data': ['$http', function($http)
{
return
$http.get('/api').then(
function success(resp) { return
response.data; },
function error(reason) { return
false; }
[align=left] );[/align]
[align=left] }];[/align]
[align=left]}[/align]
如果设置了resolve属性，
AngularJS会将列表中的元素都注入到控制器中。如果这些依赖是
[align=left]promise对象，它们在控制器加载以及$routeChangeSuccess被触发之前，会被resolve并设置成一[/align]
[align=left]个值。[/align]
[align=left]列表对象可以是：[/align]
[align=left] 键，键值是会被注入到控制器中的依赖的名字；[/align]

工厂，即可以是一个服务的名字，也可以是一个返回值，它是会被注入到控制器中的函
[align=left]数或可以被resolve的promise对象。[/align]
在上面的例子中，
resolve会发送一个$http请求，并将data的值替换为返回结果的值。列
[align=left]表中的键data会被注入到控制器中，所以在控制器中可以使用它。[/align]
[align=left] [/align]
[align=left]5. redirectTo[/align]
[align=left]redirectTo: '/home'[/align]
[align=left]// 或者[/align]
redirectTo:
function(route,path,search)
[align=left]如果redirectTo属性的值是一个字符串，那么路径会被替换成这个值，并根据这个目标路[/align]
[align=left]径触发路由变化。[/align]
[align=left]如果redirectTo属性的值是一个函数，那么路径会被替换成函数的返回值，并根据这个目[/align]
[align=left] [/align]
[align=left] [/align]
[align=left] [/align]
[align=left]标路径触发路由变化。[/align]
如果redirectTo属性的值是一个函数，
AngularJS会在调用它时传入下面三个参数中：
[align=left](1) 从当前路径中提取出的路由参数；[/align]
[align=left](2) 当前路径；[/align]
[align=left](3) 当前URL中的查询串。[/align]
[align=left]6. reloadOnSearch[/align]
[align=left]如果reloadOnSearch选项被设置为true（默认），当$location.search() 发生变化时会重新[/align]
[align=left]加载路由。如果设置为false，那么当URL中的查询串部分发生变化时就不会重新加载路由。这[/align]
[align=left]个小窍门对路由嵌套和原地分页等需求非常有用。[/align]
[align=left]现在介绍用when函数来设置路由。[/align]
[align=left]下面的例子中设置了两个路由：一个首页路由和一个收件箱路由，同时首页路由被设置成默[/align]
[align=left]认路由。[/align]
angular.module('MyApp',
[]).
config(['$routeProvider',
function($routeProvider) {
[align=left] $routeProvider[/align]
[align=left] .when('/', {[/align]
controller:
'HomeController',
templateUrl:
'views/home.html'
[align=left] })[/align]
[align=left] .when('/inbox/:name', {[/align]
controller:
'InboxController',
templateUrl:
'views/inbox.html'
[align=left] })[/align]
.otherwise({redirectTo:
'/'});
[align=left] }]);[/align]
如上，我们已经用when方法设置了两个路由。
otherwise方法会在没有任何路由匹配时被调
[align=left]用，我们用它设置了一个默认跳转到'/'路径的路由。[/align]
[align=left]当浏览器加载AngularJS应用时，会将URL设置成默认路由所指向的路径。除非我们在浏览[/align]
[align=left]器中加载不同的URL，否则默认会使用/路由。[/align]
[align=left] [/align]
[align=left] [/align]

[align=left] [/align]
所谓视图， 就是指用户所看见的。
视图的生命周期由作为一个模板开始， 它将和模型合并并最终
渲染到浏览器的DOM中。 与其他模板系统不同的是，
AngularJS使用一种独特的形式来渲染视图

[align=left] [/align]
视图模板是用HTML写的。
HTML是声明是的， 声明式的语言适合用来编写UI。 视图不应该包含任何行
为。
因为控制器和视图没有直接的调用关系，
所以可以使多个视图对应同一个控制器。 这对“换肤” 、 适配不同设备（ 比如移动设备和台式机） 、 测试， 都非常重要。

[align=left] [/align]
模型就是用来和模板结合生成视图的数据。
模型必须在作用域中时可以被引用， 这样才能被渲染
生成视图。 和其他框架不一样的是， Angularjs对模型本身没有任何限制和要求。
你不需要继承任何类
也不需要实现指定的方法以供调用或者改变模型。 模型可以是原生的对象哈希形式的， 也可以是完整
对象类型的。 简而言之，
模型可以是原生的Javascript对象。

[align=left] [/align]
[align=left] [/align]
[align=left]$location[/align]
[align=left] [/align]
[align=left] [/align]
[align=left] [/align]
path()
用来获取页面当前的路径
$location.path();
// 返回当前路径

$location.path('target'); // 'target' 修改为
路由或地址

path() 方法直接和HTML5的历史API进行交互

replace()
希望跳转后不能点击后退按钮， AngularJS提供了replace()
方法来实现这个功能

BTW：（对于登录之后的跳转这种发生在某个跳转之后的再次跳转很有用）

$location.path('/XXX');

$location.replace();

$location.path('/XXX').replace();

absUrl() 用来获取编码后的完整URL

$location.absUrl()

hash() 方法用来获取URL中的hash片段：
$location.hash();
// 返回当前的hash片段

host() 方法用来获取URL中的主机：
$location.host();//
当前URL的主机

port() 方法用来获取URL中的端口号：
$location.port();//
当前URL的端口

protocol() 方法用来获取URL中的协议：
$location.protocol();//
当前URL的协议

search() 方法用来获取URL中的查询串：
$location.search();

我们可以向这个方法中传入新的查询参数，来修改URL中的查询串部分：
//
用对象设置查询
$location.search({name:
'Ari', username: 'auser'});

// 用字符串设置查询
$location.search('name=Ari&username=auser');
search方法可以接受两个参数
search（可选，字符串或对象）
这个参数代表新的查询参数。
hash对象的值可以是数组。
paramValue（可选，字符串）
如果search参数的类型是字符串，那么paramValue会做为该参数的值覆盖URL当中的对应
值。如果paramValue的值是null
，对应的参数会被移除掉。

url() 方法用来获取当前页面的URL：
$location.url();
// 该URL的字符串
如果调用url()
方法时传了参数，会设置并修改当前的URL，这会同时修改URL中的路径、
查询串和hash，并返回$location。

// 设置新的URL
$location.url('/home?name=Ari#hashthing');
url()
方法可以接受两个参数。
 url
（可选，字符串）
新的URL的基础的前缀。
replace（可选，字符串）
想要修改成的路径。

$locationChangeStart

当Angular从$location服务（通过$location.path() 、 $location.search()
等）对浏览器
的地址作更新时，会触发$locationChangeStart事件。

$locationChangeSuccess

当且仅当浏览器的地址成功变更，又没有阻止
$locationChangeStart事件的情况下，
$locationChangeSuccess事件会从$rootScope上广播出来。

[align=left] [/align]
资料整理，声明以上资料来源与网络