AngularJs $location 和 $window
$location
$location服务解析浏览器地址中的url(基于window.location)并且使url在应用程序中可用。将地址栏中的网址的变化反映到$location服务和$location的变化反映到浏览器地址栏。
公开浏览器地址栏中的当前网址,这样就可以:
1.观察和监听网址。
2.改变网址。
与浏览器url同步当用户:
1.改变地址栏的值。
2. 单击“后退”或“前进”按钮(或单击“历史链接”)。
3.点击链接。
表示一组方法(协议、主机、端口、路径、搜索、哈希值)的网址对象。
依赖:$rootElement
方法:
absUrl();
只能getter,返回的是完整的url。
url([url],[replace]);
getter/setter,返回当前url路径(当前url#后面的内容,包括参数和哈希值)。
protocol();
只能getter,返回当前url的协议(比如http,https)。
host();
只能getter,返回当前url的主机名。
port();
只能getter,返回当前url的端口号。
path([path]);
getter/setter, 返回当前url的子路径(也就是当前url#后面的内容,不包括参数)。
search(search,[paramValue]);
getter/setter,返回当前url的参数的序列化json对象。
hash([hash]);
getter/setter,返回当前url的哈希值。
replace();
如果被调用,当前$digest过程中所有$location的变化将取代当前的历史记录,而不是增加新的历史记录。
state([state]);
返回当前url的历史状态对象(不包括任何参数)。
调用一个参数并且返回$location时改变历史状态对象。
事件:
$locationChangeStart
在url将要被改变时广播。可以使用preventDefault取消默认事件。
参数:
angularEvent:合成事件对象。
newUrl:新的url。
oldUrl:改变前的url。
newState:新的历史状态对象。
oldState:改变前的历史状态对象。
$locationChangeSuccess
在url成功的完成变化后广播。
参数:
angularEvent:合成事件对象。
newUrl:新的url。
oldUrl:改变前的url。
newState:新的历史状态对象。
oldState:改变前的历史状态对象。
使用代码:
(function(){
angular.module('Demo', [])
.controller('testCtrl',["$location","$scope",testCtrl]);
function testCtrl($location,$scope) {
var url = "http://example.com:8080/#/some/path?foo=bar&baz=xoxo#hashValue";
$location.absUrl();// http://example.com:8080/#/some/path?foo=bar&baz=xoxo#hashValue
$location.url();// some/path?foo=bar&baz=xoxo
$location.protocol();// http
$location.host();// example.com
$location.port();//
$location.path();// /some/path
$location.search();// {foo: 'bar', baz: 'xoxo'}
$location.search('foo', 'yipee');
$location.search();// {foo: 'yipee', baz: 'xoxo'}
$location.hash();// #hashValue
$scope.$on("$locationChangeStart", function () {
//监听url变化,在变化前做想要的处理
});
$scope.$on("$locationChangeSuccess", function () {
//监听url变化,在变化后做想要的处理
});
}
}());
$location在日常开发中是很有用的,特别是$locationChangeStart和$locationChangeSuccess,在做是否登录判断的时候配合拦截器使用,根据拦截器返回的状态,监听url变化并在需要登录的时候退出到登录页面。
$window
一个浏览器窗口对象的引用。它是一个全局对象,在window中是全局可用的,但是它导致一些问题。在Angular中也经常通过$window服务提到它,因此它可以被重写、删除及测试。
$window 等同于 window。
验证代码:
(function(){
angular.module('Demo', [])
.controller('testCtrl',["$window",testCtrl]);
function testCtrl($window) {
$window === window;
}
}());
$window对象可以用来获取浏览器窗口各项属性(如窗口高度宽度、浏览器版本等等)。
AngularJs $location 和 $window的更多相关文章
- window.location.href = window.location.href 跳转无反应 a 超链接 onclick 点击跳转无反应
错误写法 , 主要是在 href="#"这里 <a href="#" id="send" onclick="return b ...
- window.location和window.open
window.location和window.open的区别 window.location = "http://www.baidu.com" 跳转后有后退功能 window.lo ...
- window.location.href = window.location.href window.location.reload()
w 0-会议预订提交了预订日期,预订成功后默认显示仅显示当前日期的新页面若显示预定日的信息,则可以对预定日存入cookie: http://stackoverflow.com/questions/24 ...
- window.location与window.open()的区别
"top.location.href"是最外层的页面跳转"window.location.href"."location.href"是本页面 ...
- window.location和window.location.href和document.location的关系
1,首先来区分window.location和window.location.href. window.location.href是一个字符串. 而window.location是一个对象,包含属性有 ...
- window.location 与window.open区别
window.location 与window.open区别 1.window.location是window对象的属性,而window.open是window对象的方法 window.locat ...
- js 中实现页面跳转的方法(window.location和window.open的区别)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- JS中 window.location 与window.location.href的区别
疑惑:window.location='url' 与window.lcoation.href='url'效果一样,都会跳转到新页面,区别在哪?查得的资料如下: 1:window.location是页 ...
- Angular - - $location 和 $window
$location $location服务解析浏览器地址中的url(基于window.location)并且使url在应用程序中可用.将地址栏中的网址的变化反映到$location服务和$locati ...
随机推荐
- 简单高效的nodejs爬虫模型
这篇文章讲解一下yunshare项目的爬虫模型. 使用nodejs开发爬虫很简单,不需要类似python的scrapy这样的爬虫框架,只需要用request或者superagent这样的http库就能 ...
- 更便捷的Android多渠道打包方式
本文先回顾了以往流行的多渠道打包方式,随后引入的mcxiaoke的packer-ng-plugin项目,介绍该项目在实际应用(配合友盟统计)中如何解决更方便的Android多渠道打包问题 多渠道打包方 ...
- 发布新博客皮肤red_autumnal_leaves
感谢sevennight为大家精心设计了一款博客皮肤——red_autumnal_leaves! [名称] red_autumnal_leaves[标题] 红叶[设计者] sevennight[简介] ...
- IIS安装与MVC程序部署
最近在做访客系统,虽然说不是什么多大的项目,但麻雀虽小五脏俱全,使用EF Code First+Mysql+Frozenui响应式布局,感觉通过这个项目学到好多东西,Mysql的使用.EF映射Mysq ...
- 系统升级日记(3)- 升级SharePoint解决方案和Infopath
最近一段时间在公司忙于将各类系统进行升级,其最主要的目标有两个,一个是将TFS2010升级到TFS2013,另外一个是将SharePoint 2010升级到SharePoint 2013.本记录旨在记 ...
- js的单引号,双引号,转移符
这里我们看到想在style后边在插入一个样式的变量,data.cssSytle.a是做边和邮编都是"",并且没有转移符
- [BZOJ1116][Poi2008]LCO(并查集)
题目:http://hzwer.com/3010.html 分析:注意这里无向边是对入度没有贡献的. 那么对于一个n个点的连通块而言,如果它是一颗树(n-1条边),那么把所有边全部从某个根开始向下指, ...
- [BZOJ3211]花神游历各国(线段树+区间开根)
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3211 分析: 区间开根是没法区间合并的. 但是注意到10^9开根开个5次就变成1了…… ...
- mysql创建触发器
触发器语句只有一句话 可以省略begin和end CREATE trigger `do_praise` after insert on praise for each row update post ...
- chgrp 简明笔记
改变与文件相关联的组 chgrp [options] group file-list 参数 group 为新组的名称或者数值ID,file-list 为要改变其相关联组的文件路径名列表 选项 -c ...