iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >angular中通过$location获取路径的示例分析
  • 175
分享到

angular中通过$location获取路径的示例分析

2024-04-02 19:04:59 175人浏览 泡泡鱼
摘要

这篇文章主要介绍angular中通过$location获取路径的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!以下获取与修改的 URL 以  ( Http://17

这篇文章主要介绍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('myhash4'); 
//结果:http://88:8100/#/homePage?id=10&a=100#myhash4 
 
//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#myhash4 
 
 //第一个值表示url参数的属性名,如果是已有属性名,则删除该属性,如果不是已有属性,那就等于没改过 
 $locationsearch('age',null)

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

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

以上是“angular中通过$location获取路径的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网html频道!

--结束END--

本文标题: angular中通过$location获取路径的示例分析

本文链接: https://www.lsjlt.com/news/71538.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • angular中通过$location获取路径的示例分析
    这篇文章主要介绍angular中通过$location获取路径的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!以下获取与修改的 URL 以  ( http://17...
    99+
    2024-04-02
  • vue不通过路由直接获取url中参数的示例分析
    小编给大家分享一下vue不通过路由直接获取url中参数的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!示例代码第一步:创...
    99+
    2024-04-02
  • Angular中路由的示例分析
    这篇文章将为大家详细讲解有关Angular中路由的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 摘要简单来说地址栏中,不同的地址(URL)对应不同的页面,这...
    99+
    2024-04-02
  • Angular中Route路由的示例分析
    这篇文章主要介绍Angular中Route路由的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Angular 路由(Route)我们可以将路由器理解成控制整个应用状态的视图对象, 每个应用都有一个路由器; 路...
    99+
    2023-06-14
  • Angular CLI发布路径配置项的示例分析
    小编给大家分享一下Angular CLI发布路径配置项的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言项目发布总需要根据具体情况配置打包,Angula...
    99+
    2023-06-14
  • angular路由之angular-router的示例分析
    这篇文章主要介绍了angular路由之angular-router的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体如下:创建项目...
    99+
    2024-04-02
  • Java正确地从类路径中获取资源的示例分析
    这篇文章给大家分享的是有关Java正确地从类路径中获取资源的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Java 可通过以下几种方法来访问资源:Class 的 getResource 方法ClassLo...
    99+
    2023-06-15
  • 获取包源的完整路径通过导入包路径
    知识点掌握了,还需要不断练习才能熟练运用。下面编程网给大家带来一个Golang开发实战,手把手教大家学习《获取包源的完整路径通过导入包路径》,在实现功能的过程中也带大家重新温习相关知识点,温故而知新...
    99+
    2024-04-04
  • Thinkphp中URL路径的示例分析
    这篇文章主要介绍Thinkphp中URL路径的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Thinkphp关于URL路径假如你项目首页的URL是:www.test.com/other/Form假如当前模块是...
    99+
    2023-06-25
  • Angular中路由和表单的示例分析
    这篇文章主要介绍Angular中路由和表单的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Angular的路由介绍在单页面应用中,需要在定义好的不同视图中(组件)来回切换,而...
    99+
    2024-04-02
  • Angular 4.x路由的示例分析
    这篇文章给大家分享的是有关Angular 4.x路由的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Installing the router首先第一件事,我们需要安装 ...
    99+
    2024-04-02
  • Webpack中路径配置的示例分析
    这篇文章将为大家详细讲解有关Webpack中路径配置的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。contextcontext 是 webpack 编译时的基础...
    99+
    2024-04-02
  • Linux下路径的示例分析
    这篇文章主要介绍Linux下路径的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一般的情况下,我们在用shell调用的话,或者你通过什么什么方式调用你的应用程序的时候,注意你的此刻的路径就是你的被调用的程序的...
    99+
    2023-06-16
  • Angular中PIPE的示例分析
    这篇文章主要为大家展示了“Angular中PIPE的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Angular中PIPE的示例分析”这篇文章吧。 ...
    99+
    2024-04-02
  • Angular中NgModule的示例分析
    这篇文章主要介绍了Angular中NgModule的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。本篇文章带大家详细了解一下Angular中的NgModule(模块)...
    99+
    2023-06-14
  • Webpack中publicPath路径问题的示例分析
    这篇文章主要为大家展示了“Webpack中publicPath路径问题的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Webpack中publicPat...
    99+
    2024-04-02
  • Angular中DevTools的示例分析
    这篇文章将为大家详细讲解有关Angular中DevTools的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Angular 团队宣布推出 Angular DevT...
    99+
    2024-04-02
  • Angular中HttpClient的示例分析
    小编给大家分享一下Angular中HttpClient的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!现代浏览器支持使用...
    99+
    2024-04-02
  • 【Android 11/12】 通过Uri获取绝对路径的方法
    原理:通过对不同的Uri进行辨别,提取ID, 需要android.permission.MANAGE_EXTERNAL_STORAGE权限 android.externalstorage类型conte...
    99+
    2023-09-07
    android android studio ide java
  • Angular路由复用策略的示例分析
    这篇文章主要介绍了Angular路由复用策略的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、引言路由在执行过程中对组件无状态操作...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作