$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. iOS项目在非测试设备上的安装方法(项目上线前)

    转载自:http://blog.csdn.net/ai379558502/article/details/49003383 方法一: 这个办法,其实是国外一个创业项目 TestFlight,面向移动应 ...

  2. Qt5:窗口居中显示

    QDesktopWidget* desktop = QApplication::desktop(); // =qApp->desktop();也可以move((desktop->width ...

  3. iOS开发——GCDAsyncSocket

    新进的这家公司搞智能家居,就随便整理一下其相关技术吧!首先,从GCDAsyncSocket的使用问题着手. 正如名称一样GCDAsyncSocket开源类库是以苹果的GCD多任务处理机制完成的一个异步 ...

  4. glibc

    http://www.cnblogs.com/vipzrx/p/3599506.html 原因 wheezy是2.13,编译android4.4 需要2.14的,报错如下: rebuilts/gcc/ ...

  5. JavaScript运行原理解析

    原文:1.http://blog.csdn.net/liaodehong/article/details/50488098 2.Stack的三种含义 (阮一峰) 3. http://lib.csdn. ...

  6. 在js中如何得到上传文件的大小。

    <html>  <head>  <script language="javascript">    function getSize() {   ...

  7. WordPress主题制作第二天

    <?php if(have_posts()): while(have_posts()): the_post(); <!-- the_title(); the_permalink(); th ...

  8. 安装PIL遇到的问题

    配置:Win7 64位 不过折腾到最后,没有使用PIL,官方的PIL很久木有更新了,换了Pillow,是PIL的衍生吧,一直有更新,但是两者不可在同一环境共存. 1 Python version 2. ...

  9. (简单) POJ 2406 Power Strings,扩展KMP。

    Description Given two strings a and b we define a*b to be their concatenation. For example, if a = & ...

  10. 手机端 H5上传头像

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...