angular中通过$location获取路径(参数)的写法
以下获取与修改的 URL 以 ( http://172.16.0.88:8100/#/homePage?id=10&a=100 ) 为例
【一】获取 (不修改URL)
- //1.获取当前完整的url路径
- var absurl = $location.absUrl();
- //http://172.16.0.88:8100/#/homePage?id=10&a=100
- //2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值):
- var url = $location.url();
- // 结果:/homePage?id=10&a=100
- //3. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数)
- var pathUrl = $location.path()
- //结果:/homePage
- //4.获取当前url的协议(比如http,https)
- var protocol = $location.protocol();
- //结果:http
- //5.获取主机名
- var localhost = $location.host();
- //结果:172.16.0.88
- //6.获取当前url的端口
- var port = $location.port();
- //结果:8100
- //7.获取当前url的哈希值
- var hash = $location.hash()
- //结果:http://172.16.088
- //8.获取当前url的参数的序列化json对象
- var search = $location.search();
- //结果:{id: "10", a: "100"}
【二】修改 (改变URL相关内容)
- //1 修改url的子路径部分(也就是当前url#后面的内容,不包括参数):
- $location.url('/validation');
- //结果:http://172.16.0.88:8100/#/validation
- //2 修改url的哈希值部分
- $location.hash('myhash3');
- //结果:http://172.16.0.88:8100/#/homePage?id=10&a=100#myhash3
- //3 修改url的参数部分(第一个参数表示url参数的属性名,第二个参数是该属性名的属性值,如果是已有属性名,则修改,如果不是已有属性,则新增)
- $location.search('id','111')
- // 结果(修改参数值):http://172.16.0.88:8100/#/homePage?id=111&a=100
- $location.search('ids','111')
- // 结果(新增ids参数): http://172.16.0.88:8100/#/homePage?id=111&a=100&ids=111
- //4.一次性修改多个参数
- $location.search({id:'55','a':'66'})
- //结果:http://172.16.0.88:8100/#/homePage?id=55&a=66#myhash3
- //5.第一个值表示url参数的属性名,如果是已有属性名,则删除该属性,如果不是已有属性,那就等于没改过
- $location.search('age',null)
【三】修改URL但不存入历史记录
在上面的修改url的方法的时候,每修改一次,url都会被存入历史记录,可以使用后退按钮回到修改前的url,如果不想要这种效果,而仅仅是替换当前的记录,可以使用
$location.path('/validation').replace();
angular中通过$location获取路径(参数)的写法的更多相关文章
- Angular中通过$location获取地址栏的参数详解
Angular中通过$location获取url中的参数 最近,项目开发正在进行时,心有点燥,许多东西没来得及去研究,今天正想问题呢,同事问到如何获取url中的参数,我一时半会还真没想起来,刚刚特意研 ...
- Angularjs中使用$location获取url参数时,遇到的坑~~~
今天在开发时候,需要用到Angularjs1.4.6获取url参数,网上查了一下,有部分文章提到用$location来获取.大致方法如下 var app = angular.module('myApp ...
- spring mvc获取路径参数的几种方式 - 浅夏的个人空间 - 开源中国社区
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 获取window.location.href路径参数
GetQueryString(param) { //param为要获取的参数名 注:获取不到是为null var currentUrl = window.location.href; //获取当前链接 ...
- 如何从angular2中的url获取查询参数?
问题描述 我使用angular2.0.0-beta.7.当组件在像”/path?query=value1″这样的路径上加载时,它被重定向到”/path”.为什么删除了GET参数?如何保留参数? 路由器 ...
- 【转】AngularJs $location获取url参数
// 带#号的url,看?号的url,见下面 url = http://qiaole.sinaapp.com?#name=cccccc $location.absUrl(); // http://qi ...
- springMVC参数的传递方式(1.通过@PathVariabl获取路径参数,2.@ModelAttribute获取数据,3.HttpServletRequest取参,4@RequestParam)
通过@PathVariabl注解获取路径中传递参数 JAVA @RequestMapping(value = "/{id}/{str}") public ...
- js获取路径参数对象
/** * 获取页面路径参数值 */ function getParams(key) { var result = {}; var paramStr = encodeURI(window.docume ...
- spring mvc获取路径参数的几种方式
一.从视图向controller传递值, controller <--- 视图 1.通过@PathVariabl注解获取路径中传递参数 (参数会被复制到路径变量) @RequestMappin ...
随机推荐
- 算法-对分查找(二分查找)C++实现
这个是个主要的查找算法.由于仅仅是把数读入就须要(N)的时间量,因此我们在说这类问题的时候都是如果读入过的. 在算法经常使用的时间.将问题缩小为一部分(大约1/2),那么我们就觉得这个算法是O(log ...
- how to query for a list<String> in jdbctemplate?--转载
原文地址:http://stackoverflow.com/questions/13354158/how-to-query-for-a-liststring-in-jdbctemplate I'm ...
- 开发板 视频04_05 ubuntu的联网及基本设置
4g内存 如果电脑有两g,只能给1.5g 处理器可以根据实际选 usb3.0 或者 2.0 联网模式:: 桥接模式 启动式连接,,,,网是不固定的 仅主机模式,主机和虚拟机在一个网络 第三种联网,自定 ...
- zynq mac地址修改
工作中遇到多个zynq板子同时位于一个交换机网络中,由于默认mac地址相同,无法进行通信,因此需要对每个板子修改mac地址. 方案:使用uboot配置文件 步骤: 在uboot配置文件中添加及修改下面 ...
- JobService和JobScheduler机制在Android5.0以上保活
JobService和JobScheduler机制在Android5.0以上保活 我们知道在Android5.0之前,Android源代码还是有不小漏洞的,导致非常多不光明的手段来进行++保活++.但 ...
- 监听text等的改变事件
oninput事件是html5的标准事件,支持ie9和以上以及其他的火狐啊谷歌啊等浏览器 ie9以下的可以用onpropertychange <head> <script t ...
- QQ互联API接口失效,第三方网站的死穴
最近2个月,用开源程序WeCenter搭建了一个社交问答网站. 为了方便用户注册,开通了QQ登录功能. 今天,突然发现QQ互联返回一直出现错误. 度娘了很久,发现大家都遇到这个问题了.Disc ...
- [Angular Directive] Combine HostBinding with Services in Angular 2 Directives
You can change behaviors of element and @Component properties based on services using @HostBinding i ...
- Multi-Tenancy模式,基础服务大规模扩张的时候,是应该推进了。
这不是技术介绍.这是我要推进的工作,记在这里.服务的对象太多,必须隔离为不同租户了.
- 【前端统计图】hcharts实现堆叠柱形图(与后台数据交互)
原型图类似如下: 图片.png <!DOCTYPE > <html> <head> <meta charset="utf-8">&l ...