zoukankan      html  css  js  c++  java
  • angualarjs $location服务

    $location服务

    angular使用内置的$location服务来监听、操作url,包括以下功能: 
    - 获取、监听、改变地址栏的URL; 
    - 与URL实现双向数据绑定(地址栏变动、前进后退或者点击页面的链接都会触发); 
    - 将URL对象封装成了一套方法(protocol, host, port, path, search, hash)

    相对于BOM原生的window.location,使用$location更利于测试用例的编写(通过$location来注入假数据),提供的接口也更友好(官方一直强调是jQuery-style getters and setters,我的理解就是支持链式写法),与URL实现了双向绑定,内部集成了HTML5的History API,所以建议使用$location服务。

    $location方法 
    $location服务为只读的URL部分提供getter方法(包括absurl, protocol, host, port),也提供getter和setter方法(包括url, path, search, hash)。

    以一个完整的路径为例: http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash

    方法 作用 结果
    $location.absUrl() 获取当前完整的url路径 http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash
    $location.url() 获取当前url路径(当前url#后面的内容,包括参数和哈希值) /foo?name=bunny#myhash
    $location.path() 获取当前url的子路径(也就是当前url#后面的内容,不包括参数) /foo
    $location.protocol() 获取当前url的协议(比如http,https) http
    $location.protocol() 获取当前url的主机名 localhost
    $location.port() 获取当前url的端口 80
    $location.hash() 获取当前url的哈希值 myhash
    $location.search() 获取当前url的参数的序列化json对象 {"name":"bunny"}

    注意:

    1.$location.path()的两个用法:

    // get the current path
    $location.path();
    // change the path
    $location.path('/newValue');

    2.有一个特别的replace方法,可以用作告诉$location服务,在下一次与浏览器同步时,使用某个路径代替最新的历史记录,而不是创建一个新的历史记录。当我们想实现重定向(redirection)而又不想使后退按钮(后退按钮回重新触发重定向)失效时,replace方法就很有用了。想改变当前URL而不创建新的历史记录的话,我们可以这样做:
    $location.path(‘/someNewPath’).replace();
    注意,setter方法不会马上更新window.location。相反,$location服务会知道scope生命周期以及合并多个$location变化为一个,并在scope的$digest阶段一并提交到window.location对象中。正因为$location多个状态的变化会合并为一个变化,到浏览器中,只调用一次replace()方法,让整个commit只有一个replace(),这样不会使浏览器创建额外的历史记录。一旦浏览器更新了,$location服务会通过replace()方法重置标志位,将来的变化将会创建一个新的历史记录,除非replace()被再次调用。

    3.当浏览器URL改变的时候,不会导致页面重新加载(page reload)。如果需要做这件事情(更改地址,实现page reload),请使用较低级别的API,$window.location.href。

  • 相关阅读:
    类型反射出错
    洛阳亲友如相问 咱两还要喝一壶
    为什ipad3卖的不好呢?(爆笑)
    位置相关属性offset(),position(),scrollTop()等
    httpModules 与httpHandler
    IE7,IE8不支持New Date的解决方法
    数据库中字符长度和C#代码中字符长度
    让你的wordpress支持Window live writer
    用Windows Live Writer离线写Wordpress博客详解
    请问在数据库中怎样用模糊查询查找含有通配符的项,比如 like ' ' 我要查找含有“%”的项,怎么查?
  • 原文地址:https://www.cnblogs.com/lyy-2016/p/6376243.html
Copyright © 2011-2022 走看看