详解angular中通过$location获取路径(参数)的写法

我最近在研究angular中通过$location获取路径(参数)的写法，在网上搜索了很多的资料，正好今天有时间，就整理一下！

以下获取与修改的 URL 以  ( http://172.16.0.88:8100/#/homePage?id=10&a=100  ) 为例

【一】获取 (不修改URL)

//获取当前完整的url路径
var absurl = $locationabsUrl();
//http://88:8100/#/homePage?id=10&a=100 

// 获取当前url路径(当前url#后面的内容,包括参数和哈希值):
 var url = $locationurl();
 // 结果：/homePage?id=10&a=100  

 // 获取当前url的子路径(也就是当前url#后面的内容,不包括参数)
var pathUrl = $locationpath()
//结果：/homePage  

//获取当前url的协议(比如http,https)
var protocol = $locationprotocol();
//结果：http  

//获取主机名
var localhost = $locationhost();
//结果：88 

//获取当前url的端口
var port = $locationport();
//结果：8100 

//获取当前url的哈希值
var hash = $locationhash()
//结果：http://088   

 //获取当前url的参数的序列化json对象
 var search = $locationsearch();
 //结果：{id: "10", a: "100"}

【二】修改 (改变URL相关内容)

//1 修改url的子路径部分(也就是当前url#后面的内容,不包括参数):
 $locationurl('/validation');
//结果：http://88:8100/#/validation 

 //2 修改url的哈希值部分
$locationhash('myhash3');
//结果:http://88:8100/#/homePage?id=10&a=100#myhash3 

//3 修改url的参数部分(第一个参数表示url参数的属性名,第二个参数是该属性名的属性值,如果是已有属性名,则修改,如果不是已有属性,则新增)
$locationsearch('id','111')
// 结果(修改参数值)：http://88:8100/#/homePage?id=111&a=100 

$locationsearch('ids','111')
// 结果（新增ids参数): http://88:8100/#/homePage?id=111&a=100&ids=111 

//一次性修改多个参数
$locationsearch({id:'55','a':'66'})
//结果：http://88:8100/#/homePage?id=55&a=66#myhash3 

 //第一个值表示url参数的属性名,如果是已有属性名,则删除该属性,如果不是已有属性,那就等于没改过
 $locationsearch('age',null)

【三】修改URL但不存入历史记录

在上面的修改url的方法的时候,每修改一次,url都会被存入历史记录,可以使用后退按钮回到修改前的url,如果不想要这种效果,而仅仅是替换当前的记录,可以使用  $location.path('/validation').replace();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS内建服务$location及其功能详解

    AngularJS内建服务$location及其功能详解

    在学习AngularJS的过程中感觉到,通过一次性从服务端的数据库获取信息,在前端进行分页,这是一种比较可取的方式.因为它节省了前后端的通信负载,把更多的显示方面的任务交给前端处理. 此内容分为两个部分,第一部分给大家简单介绍一下AngularJS的内建服务$location及其功能:第二部分通过一个比较完整的综合实例来实现分页显示数据库信息的效果. 在做angularJS的Mutilpe View & Route 的工作时,感觉到应该更加深入的了解一下angularJS的内建的服务&lo

  • AngularJs Using $location详解及示例代码

    AngularJs Using $location详解及示例代码

    一.What does it do? $location服务分析浏览器地址栏中的URL(基于window.location),让我们可以在应用中较为方便地使用URL里面的东东.在地址栏中更改URL,会响应到$location服务中,而在$location中修改URL,也会响应到地址栏中. $location服务: 暴露当前浏览器地址栏的URL,所以我们可以 1.注意和观察URL 2.改变URL 当用户做以下操作时,与浏览器一起同步URL: 1.改变地址栏 2.单击后退或者前进按钮(或者点击一个历

  • angular中使用路由和$location切换视图

    我们可以利用angular的$route服务来定义这样一种东西:对于浏览器所指向的特定URL,angular会加载并显示一个模板,并实例化一个控制器为模板提供内容. 在应用中,你可以通过调用$routeProvider服务上的函数来创建路由,把需要创建的路由当成一个配置块传给这些函数即可. 伪代码如下: 复制代码 代码如下: var someModule = angular.module('somemodule',[...module dependencies...]) someModule.c

  • AngularJS通过$location获取及改变当前页面的URL

    注意 本文中获取与修改的URL以 'http://172.16.0.88:8100/#/homePage?id=10&a=100' 这个路径为例: 一. 获取url的相关方法(不修改URL): 1.获取当前完整的url路径 var absurl = $location.absUrl(); //http://172.16.0.88:8100/#/homePage?id=10&a=100 2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值): var url = $locati

  • 高效利用Angular中内置服务$http、$location等

    AngularJS中为我们提供了众多的内置服务,通过这些内置服务可以轻松的实现一些常用功能.下面对Angular中常用的内置服务进行一下总结. 1.$location服务 $location服务用于返回当前页面的URL地址,示例代码如下: var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absU

  • Angular的$http与$location

    Angular的$http与$location

    $http 但是对于一个web应用,angular是如何同服务端进行交互获得数据的呢? <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope','$http',function($scope,$http){ $http({ method : 'GET', url : 'http/data.php', }).success(functi

  • 详解angular中通过$location获取路径(参数)的写法

    我最近在研究angular中通过$location获取路径(参数)的写法,在网上搜索了很多的资料,正好今天有时间,就整理一下! 以下获取与修改的 URL 以  ( http://172.16.0.88:8100/#/homePage?id=10&a=100  ) 为例 [一]获取 (不修改URL) //获取当前完整的url路径 var absurl = $locationabsUrl(); //http://88:8100/#/homePage?id=10&a=100 // 获取当前url

  • 详解Angular中通过$location获取地址栏的参数

    最近,项目开发正在进行时,心有点燥,许多东西没来得及去研究,今天正想问题呢,同事问到如何获取url中的参数,我一时半会还真没想起来,刚刚特意研究了一下,常用的方法就以下几种: 1.获取当前完整的url路径 var absurl = $location.absUrl(); //http://88:8100/#/homePage?id=10&a=100 2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值) var url = $location.url(); // /homePage

  • 详解Angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module

  • 一文详解Vue3中使用ref获取元素节点

    目录 静态绑定 onMounted nextTick watchEffect watch v-for中使用 动态绑定 ref设置函数 通过getCurrentInstance方法 获取vue实例 前言: 本文介绍在vue3的setup中使用composition API获取元素节点的几种方法: 静态绑定 仅仅需要申明一个ref的引用,用来保存元素,在template中,不必bind引用(:ref="domRef"),只需要声明一个同名的ref属性(ref="domRef&qu

  • 详解Mybatis中万能的Map和模糊查询写法

    详解Mybatis中万能的Map和模糊查询写法

    1.万能的Map 假设,我们的实体类,或者数据库中的表,字段或参数过多,我们接口参数以前用的是实体类,现在考虑使用下Map! 接口: //万能的Map int addUser2(Map<String,Object> map); mapper.xml: <!--Map中的key--> <insert id="addUser2" parameterType="map"> insert into mybatis.user (id,nam

  • 详解Angular 中 ngOnInit 和 constructor 使用场景

    1. constructor constructor应该是ES6中明确使用constructor来表示构造函数的,构造函数使用在class中,用来做初始化操作.当包含constructor的类被实例化时,构造函数将被调用. 来看例子: class AppComponent { public name: string; constructor(name) { console.log('Constructor initialization'); this.name = name; } } let a

  • 详解Angular中实现自定义组件的双向绑定的两种方法

    在 Angular 中,对于表单元素,通过 [(ngModel)] 即可以简单地实现双向绑定.对于自定义组件而言,希望实现同样的效果可以怎么做呢? 1 实现自定义组件的 ngModel 指令 如果希望自定义组件能够具有与表单元素相同的 ngModel 效果,可以通过在组件内实现 ControlValueAccessor 接口达到目的. 对于 [(ngModel)] ,需要至少实现该接口的如下方法: interface ControlValueAccessor { writeValue(obj:

  • 详解angular中使用echarts地图

    目录 echart的初始化 app-base-chart组件 html css 使用app-base-chart组件 总结 在angular中使用echart的时候,只需要在对应的组件生命周期中调用echart的api就可以了 echart的初始化 在component的ngOnInit事件中进行echarts的初始化,配置option,然后echarts图表就生成了 app-base-chart组件 html <div #chart [ngClass]="'chart-box ' + (

  • 详解vscode中console.log的两种快速写法

    (一)方法一:直接在script标签中提前定义,仅适用于该html文件! let add = function(a,b){ return a + b; }; console.log(add(20,300)); const { ['log']:C } = console; C(add(20,300)); (二)方法二:按tab键快速生成console.log,且光标在()内部,再次按tab键光标自动跳转到下一行! 1.打开vscode编辑器,选择文件->首选项->用户片段,输入javascrip

  • 详解angular中如何监控dom渲染完毕

    刚刚看到群上一个人说,他们公司凡是用angular和jquery插件一起用的人,都被解雇了,没看到这句话之前我很惭愧的说我有这样用过,其实angular的生态系统那么完善,完全可以不用去操作任何的dom元素都可以满足你的提倡开发需求. 那么如果真的需要用某个jquery插件,自己懒得封装angular插件或者懒得去找angular插件的时候,我们该怎么判断dom加载完毕. 有人说使用ng-init="" 亲测:表示没达到我想要的结果.... 当然你如果使用window.onload=f

随机推荐