$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/#/some/path?foo=bar&baz=xoxo#hashValue
$location.url();// some/path?foo=bar&baz=xoxo
$location.protocol();// http
$location.host();// example.com
$location.port();// 8080
$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对象可以用来获取浏览器窗口各项属性(如窗口高度宽度、浏览器版本等等)。

Angular - - $location 和 $window的更多相关文章

  1. window.location.href = window.location.href 跳转无反应 a 超链接 onclick 点击跳转无反应

    错误写法 , 主要是在 href="#"这里 <a href="#" id="send" onclick="return b ...

  2. window.location和window.open

    window.location和window.open的区别 window.location = "http://www.baidu.com" 跳转后有后退功能 window.lo ...

  3. window.location.href = window.location.href window.location.reload()

    w 0-会议预订提交了预订日期,预订成功后默认显示仅显示当前日期的新页面若显示预定日的信息,则可以对预定日存入cookie: http://stackoverflow.com/questions/24 ...

  4. window.location与window.open()的区别

    "top.location.href"是最外层的页面跳转"window.location.href"."location.href"是本页面 ...

  5. window.location和window.location.href和document.location的关系

    1,首先来区分window.location和window.location.href. window.location.href是一个字符串. 而window.location是一个对象,包含属性有 ...

  6. window.location 与window.open区别

    window.location 与window.open区别 1.window.location是window对象的属性,而window.open是window对象的方法   window.locat ...

  7. js 中实现页面跳转的方法(window.location和window.open的区别)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. AngularJs $location 和 $window

    $location $location服务解析浏览器地址中的url(基于window.location)并且使url在应用程序中可用.将地址栏中的网址的变化反映到$location服务和$locati ...

  9. JS中 window.location 与window.location.href的区别

    疑惑:window.location='url'  与window.lcoation.href='url'效果一样,都会跳转到新页面,区别在哪?查得的资料如下: 1:window.location是页 ...

随机推荐

  1. javascript 中 apply(或call)方法的用途----对象的继承

    一直以来,我的理解就是  js中的Function.apply(或者是Function.call)方法是来改变Function 这个函数的执行上下文(excute Context),说白了,就是改变执 ...

  2. HDU 2546 饭卡 01背包变形

    题目大意:中文题就不多说了 题目思路:由题意可知,只要高于5元,就可以随便刷,那我们就把最贵的留在最后刷.但是如果低于5元就什么也不能刷(哪怕你要买的物品价格不足五元),所以我们可以先求出(n-5)元 ...

  3. POJ 2296 Map Labeler

    二分答案 + 2-SAT验证,判断正方形是否相交写起来有点烦,思路还是挺简单的. #include<cstdio> #include<cstring> #include< ...

  4. PhpStorm11.0 配置在浏览器中打开文件

    转自:http://www.bubuko.com/infodetail-1420190.html 点击File-Settings-Deployment . 点+按钮增加服务器 Mapping 设置工程 ...

  5. webapp之路--百度手机前端经验(转)

    看了之后收获很大,分享一下: 本文将围绕我半年来在移动前端工程化做的一些工作做的总结,主要从localstorage缓存和版本号管理,模块化,静态资源渲染方式三个方面总结手机百度前端一年内沉淀的解决方 ...

  6. 定时且周期性的任务研究I--Timer

    很多时候我们希望任务可以定时的周期性的执行,在最初的JAVA工具类库中,通过Timer可以实现定时的周期性的需求,但是有一定的缺陷,例如:Timer是基于绝对时间的而非支持相对时间,因此Timer对系 ...

  7. Android 之 ServiceManager与服务管理

    ServiceMananger是android中比较重要的一个进程,它是在init进程启动之后启动,从名字上就可以看出来它是用来管理系统中的service.比如:InputMethodService. ...

  8. Android 各层中日志打印功能的应用

    1. HAL层 头文件:#include <utils/Log.h> 对应的级别 打印方法 VERBOSE LOGV()DEBUG LOGD()INFO LOGI()WARN LOGW() ...

  9. Counting Haybales

    Counting Haybales 题目描述 Farmer John is trying to hire contractors to help rearrange his farm, but so ...

  10. 在MyEclipse8.6中设置jQuery自动提示 - 肖飞figo的云计算专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...