[Angularjs]视图和路由(四)
写在前面
关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的。自己也通过angularjs做了一个在app上的一个模块,效果还是可以的。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-show和ng-hide
[Angularjs]视图和路由(一)
[Angularjs]视图和路由(二)
[Angularjs]视图和路由(三)
路由模式
不同的路由模式在浏览器的地址栏中会以不同的URL格式呈现。$location服务默认会使用标签模式来进行路由。路由模式决定你的站点的URL长成什么样子。
标签模式
标签(hashbang)是angularjs用来同你的应用内部进行链接的技巧。标签模式是HTML5模式的降级方案,URL路径会以#符号开头。标签模式不需要重写<a href=''></a>标签,也不需要任何服务器端的支持。如果没有进行额外的指定,AngularJS将默认使用标签模式。
使用标签模式的URL看起来是这样的:
http://yoursite.com/#!/inbox/all
如果要显示指定配置并使用标签模式,需要在应用模块的config函数中进行配置:
angular.module('app',['ngRoute']).config(['$locationProvider',function($locationProvider){$locationProvider.html5Mode(false); }]);
我们还可以配置hashPrefix,也就是标签模式下标签默认的前缀!符号。这个前缀也是angularjs在比较老的浏览器中降级机制的一部分。这个符号是可以配置的:
angular.module('app',['ngRoute']).config(['$locationProvider',function($locationProvider){$locationProvider.html5Mode(false);$locationProvider.hashPrefix('!'); }]);
Html5模式
angularjs支持的另外一种路由模式是html5模式。在这个模式中,URL看起来和普通的URL一样(在老式浏览器中看起来还是使用标签的url)。例如,同意的路由在HTML5模式中看起来是这样的:
http://yoursite.com/inbox/all
在angularjs内部,$location服务通过html5历史api让应用能够使用普通的URL路径来路由。当浏览器不支持HTML5历史api时,$location服务会自动使用标签模式的URL作为替代方案。
$location服务还有一个有趣的功能,当一个支持html5历史api的现代浏览器加载了一个带标签的URL时,它会为用户重写这个URL。
在HTML5模式中,angularjs会负责重写<a href=''></a>中的链接。也就是说angularjs会根据浏览器能力在编译时决定是否重写href=''中的链接。
例如<a href='/person/42?all=true'>Person</a>这个标签,在老式浏览器中会被重写成标签模式的URL:/index.html#!/person/42?all=true。但在现代浏览器中会保持本来的样子。
后端服务器也需要支持URL重写,服务器需要确保所有请求都返回index.html。以支持html5模式。这样才能确保由angularjs应用来处理路由。
当html5模式的angularjs中写链接时,永远都不要使用相对路径。如果你的应用是在根路径中加载的,这不会有什么问题,但在其他路径中,angularjs应用就无法正确处理路由了。另一个选择是在HTML文档的head中用<base>标签来指定应用的基础URL:
<base href='/base/url'/>
路由事件
$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应。
这个功能对于控制不同的路由时间,以及探测用户的登录和授权状态等场景是非常有用的。
我们需要给路由设置事件监听器,用$rootScope来监听这些事件。
$routeChangeStart
angularjs在路由变化之前会广播$routeChangeStart事件。在这一步中,路由服务会开始加载路由变化所需要的所有依赖,并且模板和resolve键中的promise也会被resolve。
angular.module('myapp',[]).run(['$rootScope','$location',function($rootScope,$location){$rootScope.$on('$routeChangeStart',fucntion(evt,next,current){}); }]);
$routeChangeStart事件带有两个参数:
将要导航到的下一个URL.
路由变化前的URL。
$routeChangeSuccess
angularjs会在路由的依赖被加载后广播$routeChangeSuccess事件。
angular.module('myapp',[]).run(['$rootScope','$location',function($rootScope,$location){$rootScope.$on('$routeChangeSuccess',fucntion(evt,next,current){}); }]);
$routeChangeSuccess有三个参数
原始的Angularjs evt对象。
用户当前所处的路由。
上一个路由(如果当前是第一个路由,则为undefined)。
$routeChangeError
angularjs会在任何一个promise被拒绝或者失败时广播$routeChangeError事件。
angular.module('myapp',[]).run(['$rootScope','$location',function($rootScope,$location){$rootScope.$on('$routeChangeError',fucntion(current,previous,rejection){}); }]);
$routeChangeError事件有三个参数
当前路由信息。
上一个路由信息。
被拒绝的promise的错误信息。
$routeUpdate
angularjs在reloadOnSearch属性被设置为false的情况下,重新使用某个控制器的示例时,会广播$routeUpdate事件。
总结
在实际项目中,还没有用过,现将理论放在这里,用到了再总结吧。
本文来自
Angularjs权威教程
[Angularjs]视图和路由(四)相关推荐
- [Angularjs]视图和路由(三)
写在前面 上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-optio ...
- [Angularjs]视图和路由(一)
写在前面 对单页应用来讲,视图和路由的作用可以从一个视图跳转到另外一个视图,可以合理管理用户在使用过程中看到的界面. 将视图分解成布局和模版视图,并且根据用户当前访问的URL来展示对应的视图,将会是一 ...
- AngularJS ui-router (嵌套路由)
http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...
- flask框架视图和路由_角度视图,路由和NgModule的解释
flask框架视图和路由 Angular vs AngularJS (Angular vs AngularJS) AngularJS (versions 1.x) is a JavaScript-ba ...
- 前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite
一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...
- angularjs 让当前路由重新加载_Vuerouter(路由)
Vue-router(路由) 01 一.什么是路由? 说起路由你想起了什么? 路由器,那路由器是用来做什么的,你有没有想过? - 路由时决定数据包从来源到目的地的路径: - 将输入端的数据转移到合映射 ...
- [angularjs] angularjs系列笔记(四)控制器
Scope作用域 Scope作用域是应用在HTML视图和Js控制器之间的纽带 Scope是一个对象,有可用的属性和方法 根作用域 所有的应用都有一个$rootScope,它可以作用在ng-app指令包 ...
- 视图组件,路由组件,版本控制
1,视图组件 django中写CBV的时候继承View,rest_framework继承的是APIView,,其实APIView是继承View urlpattEerns = [# url(r'^boo ...
- drf4 视图与路由组件
APIView和View的区别 不管是View还是APIView最开始调用的都是as_view() APIView继承了View, 并且执行了View中的as_view()方法,最后把view返回了, ...
最新文章
- mysql期末考试试卷_mysql测试题
- Grails 1.2参考文档速读(19):插件
- 关于wordpress 点击文章查看内容跳转加载失败(404)的解决方法
- 多路平衡查找树(B Tree)(分裂、合并)
- python怎么画出好看的统计图_用最简单的 Python ,画最好看的图 [简单数据可视化]...
- Elasticsearch】Elasticsearch 25 个必知必会的默认值
- 开设计算机专业设置问卷调查,计算机信息管理专业调查问卷 (1)
- 产品速递 | 璞华易投估值管理系统,灵活多样的数据模型让估值更加精准高效!
- C# vb .net实现胶片效果滤镜
- Vulkan学习(四):Shader加载 管线设置
- linux 定时任务 数量 性能,Linux 性能测试与分析
- 君康人寿2019年排名_君康人寿保险靠谱吗?
- Java实现 LeetCode 417 太平洋大西洋水流问题
- 通过Fiddler进行抓包并分析
- VB/VBA的变量,竟还有这些秘密
- 25个C++ API设计错误和避免方法
- chrome硬件加速_如何在Chrome中打开和关闭硬件加速
- 7.11 C语言练习(厘米换算英尺英寸:在一行中输出这个厘米数对应英制长度的英尺和英寸的整数值,中间用空格分开。)
- CIM系统导论学习笔记
- Git专题:历史记录清理:保留代码并删除一年前的提交记录