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

作用域是控制器和视图之间的“胶水”

1. controller
controller:
'MyController'
// 或者
controller: function($scope)
{}
如果配置对象中设置了controller属性,那么这个指定的控制器会与路由所创建的新作用
域关联在一起。如果参数值是字符型,会在模块中所有注册过的控制器中查找对应的内容,然后
与路由关联在一起。如果参数值是函数型,这个函数会作为模板中DOM元素的控制器并与模板
进行关联。
 
2. template
template:
'<div><h2>Route</h2></div>'
AngularJS会将配置对象中的HTML模板渲染到对应的具有ng-view指令的DOM元素中。
 
3. templateUrl
templateUrl:
'views/template_name.html'
应用会根据templateUrl
属性所指定的路径通过XHR读取视图(或者从$templateCache中读
取)。如果能够找到并读取这个模板,
AngularJS会将模板的内容渲染到具有ng-view指令的DOM
元素中。
 
4. resolve
resolve: {
 'data': ['$http', function($http)
{
 return
$http.get('/api').then(
 function success(resp) { return
response.data; },
 function error(reason) { return
false; }
 );
 }];
}
如果设置了resolve属性,
AngularJS会将列表中的元素都注入到控制器中。如果这些依赖是
promise对象,它们在控制器加载以及$routeChangeSuccess被触发之前,会被resolve并设置成一
个值。
列表对象可以是:
 键,键值是会被注入到控制器中的依赖的名字;

工厂,即可以是一个服务的名字,也可以是一个返回值,它是会被注入到控制器中的函
数或可以被resolve的promise对象。
在上面的例子中,
resolve会发送一个$http请求,并将data的值替换为返回结果的值。列
表中的键data会被注入到控制器中,所以在控制器中可以使用它。
 
5. redirectTo
redirectTo: '/home'
// 或者
redirectTo:
function(route,path,search)
如果redirectTo属性的值是一个字符串,那么路径会被替换成这个值,并根据这个目标路
径触发路由变化。
如果redirectTo属性的值是一个函数,那么路径会被替换成函数的返回值,并根据这个目
 
 
 
标路径触发路由变化。
如果redirectTo属性的值是一个函数,
AngularJS会在调用它时传入下面三个参数中:
(1) 从当前路径中提取出的路由参数;
(2) 当前路径;
(3) 当前URL中的查询串。
6. reloadOnSearch
如果reloadOnSearch选项被设置为true(默认),当$location.search() 发生变化时会重新
加载路由。如果设置为false,那么当URL中的查询串部分发生变化时就不会重新加载路由。这
个小窍门对路由嵌套和原地分页等需求非常有用。
现在介绍用when函数来设置路由。
下面的例子中设置了两个路由:一个首页路由和一个收件箱路由,同时首页路由被设置成默
认路由。
angular.module('MyApp',
[]).
 config(['$routeProvider',
function($routeProvider) {
 $routeProvider
 .when('/', {
 controller:
'HomeController',
 templateUrl:
'views/home.html'
 })
 .when('/inbox/:name', {
 controller:
'InboxController',
 templateUrl:
'views/inbox.html'
 })
 .otherwise({redirectTo:
'/'});
 }]);
如上,我们已经用when方法设置了两个路由。
otherwise方法会在没有任何路由匹配时被调
用,我们用它设置了一个默认跳转到'/'路径的路由。
当浏览器加载AngularJS应用时,会将URL设置成默认路由所指向的路径。除非我们在浏览
器中加载不同的URL,否则默认会使用/路由。
 
 
 
所谓视图, 就是指用户所看见的。
视图的生命周期由作为一个模板开始, 它将和模型合并并最终
渲染到浏览器的DOM中。 与其他模板系统不同的是,
AngularJS使用一种独特的形式来渲染视图
 
视图模板是用HTML写的。
HTML是声明是的, 声明式的语言适合用来编写UI。 视图不应该包含任何行
为。
因为控制器和视图没有直接的调用关系,
所以可以使多个视图对应同一个控制器。 这对“换肤” 、 适配不同设备( 比如移动设备和台式机) 、 测试, 都非常重要。
 
模型就是用来和模板结合生成视图的数据。
模型必须在作用域中时可以被引用, 这样才能被渲染
生成视图。 和其他框架不一样的是, Angularjs对模型本身没有任何限制和要求。
你不需要继承任何类
也不需要实现指定的方法以供调用或者改变模型。 模型可以是原生的对象哈希形式的, 也可以是完整
对象类型的。 简而言之,
模型可以是原生的Javascript对象。
 
 
$location
 
 
 
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上广播出来。

 

资料整理,声明以上资料来源与网络

AngularJS 视图和路由的更多相关文章

  1. [Angularjs]视图和路由(四)

    写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...

  2. [Angularjs]视图和路由(二)

    写在前面 上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例.这篇文章将继续学习路由的配置,及相关参数的说明. 系列文章 [Angularjs]ng-select和ng-opt ...

  3. [Angularjs]视图和路由(三)

    写在前面 上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-optio ...

  4. [Angularjs]视图和路由(一)

    写在前面 对单页应用来讲,视图和路由的作用可以从一个视图跳转到另外一个视图,可以合理管理用户在使用过程中看到的界面. 将视图分解成布局和模版视图,并且根据用户当前访问的URL来展示对应的视图,将会是一 ...

  5. AngularJs多重视图和路由的使用

    使用AngularJs来做多重视图和路由是在方便不过了,在开发过程中,都有许多的页面,而这些页面都有相同的部分,比如页面的头部和尾部通常都是一样的,变化的都是主体部分,还有就是一些后端管理的一些项目, ...

  6. AngularJS 的嵌套路由 UI-Router

    AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...

  7. AngularJS ui-router (嵌套路由)

    http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...

  8. 关于AngularJs中的路由学习总结

    AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由  通常我们的URL形式为http://jtjds ...

  9. [转]AngularJS ui-router (嵌套路由)

    本文转自:http://www.oschina.net/translate/angularjs-ui-router-nested-routes http://www.codeproject.com/A ...

随机推荐

  1. Spark OOM:java heap space,OOM:GC overhead limit exceeded解决方法

    问题描述: 在使用spark过程中,有时会因为数据增大,而出现下面两种错误: java.lang.OutOfMemoryError: Java heap space java.lang.OutOfMe ...

  2. poj 2594(可相交的最小路径覆盖)

    题目链接:http://poj.org/problem?id=2594 思路:本来求最小路径覆盖是不能相交的,那么对于那些本来就可达的点怎么处理,我们可以求一次传递闭包,相当于是加边,这样我们就可以来 ...

  3. 圆角头像----CSS3特效

    w3c:http://www.w3school.com.cn/cssref/pr_border-radius.asp 定义和用法 border-radius 属性是一个简写属性,用于设置四个 bord ...

  4. PHP中foreach详细解读

    oreach 语法结构提供了遍历数组的简单方式.foreach 仅能够应用于数组和对象,如果尝试应用于其他数据类型的变量,或者未初始化的变量将发出错误信息.有两种语法: foreach (array_ ...

  5. python 中NumPy和Pandas工具包中的函数使用笔记(方便自己查找)

    二.常用库 1.NumPy NumPy是高性能科学计算和数据分析的基础包.部分功能如下: ndarray, 具有矢量算术运算和复杂广播能力的快速且节省空间的多维数组. 用于对整组数据进行快速运算的标准 ...

  6. poj1840

    Eqs Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 15133   Accepted: 7426 Description ...

  7. 【BZOJ4325】NOIP2015 斗地主 搜索+剪枝

    [BZOJ4325]NOIP2015 斗地主 Description 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗 ...

  8. 原文来自 url get

    w http://www.tuicool.com/articles/BvYbEvR http://36kr.com/p/5069371.html?utm_source=tuicool&utm_ ...

  9. Selenium IDE的使用

    Selenium IDE 的作用 Selenium IDE 是Firefox 浏览器的一个插件, 它会记录你对Firefox的操作,并且可以回放它的操作. 在实际自动化测试中,不会用Selenium ...

  10. HTML页面布局

    接下来的下面代码,只是给了一个大的前端编写布局,如果你已经是牛人了,就当没看到,如果是一些初学者,不妨拿去用用,里面也写了一些常用的css样式,现在虽然有很多牛逼的前段框架,用起来也非常得心应手,但是 ...