首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 1 uiRouter如何通过url查询获取完整路径?

在Angular 1中,可以通过uiRouter来获取完整路径。uiRouter是Angular的一个第三方库,用于管理路由和状态。

要通过url查询获取完整路径,可以使用$location服务和$stateParams服务。

首先,在控制器中注入$location和$stateParams服务:

代码语言:txt
复制
app.controller('MyController', function($location, $stateParams) {
  // 控制器代码
});

然后,可以使用$location服务的absUrl()方法来获取当前页面的完整URL:

代码语言:txt
复制
var url = $location.absUrl();
console.log(url);

如果要获取当前页面的路径部分,可以使用$location服务的path()方法:

代码语言:txt
复制
var path = $location.path();
console.log(path);

如果要获取当前页面的查询参数,可以使用$location服务的search()方法:

代码语言:txt
复制
var params = $location.search();
console.log(params);

另外,如果你使用了uiRouter的状态参数功能,可以通过$stateParams服务来获取路由状态的参数。假设你的路由状态定义如下:

代码语言:txt
复制
$stateProvider.state('myState', {
  url: '/myState/:id',
  templateUrl: 'myTemplate.html',
  controller: 'MyController'
});

在控制器中,可以通过$stateParams服务来获取路由状态的参数:

代码语言:txt
复制
app.controller('MyController', function($stateParams) {
  var id = $stateParams.id;
  console.log(id);
});

这样,你就可以通过uiRouter和$location服务来获取Angular 1中的完整路径和查询参数了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Ionic3 导航分析

之前接触的路由,基本上都是根据不同的url加载不同的内容,比如最基本的,根据url的不同加载不同的html文件;或者像React中根据不同的url加载不同的组件,这种导航方式很直接,也非常方便理解。...image.png uiRouter 路由是前端构建单页面应用(SPA)必不可少的一部分,AngularJS1.x中有两种路由实现,一个是内置的ngRouter,还有一个是基于 ngRoute...如果你没有了解过Angular4中的路由,其实也可以简单看看uiRouter的使用,不需要了解的多详细,仅仅理解它的那个指令的使用方式就可以了。...有关于uiRouter更详细的介绍,可以看看这篇文章 Angular导航 点击对应链接,触发 $state.go('x'x'x') 方法,uiRouter根据state找到对应的视图并加载在ui-view...在uiRouter中,通过这个指令来展示内容,也就可以将看作是一个容器,好了这个容器,uiRouter没办法将内容展示到界面。

2K10
  • Node.js 配合 express 框架、mongodb 实践 &&

    /(使用相对路径),暴露接口使用exports或者module.exports 2.TypeScript的 import * from url 的引入依赖,需要填写完整的相对路径,否则是找不到模块的.../router/uirouter'); const postrouter = require('..../common/db1'; import uirouter from './router/uirouter1'; import postrouter from '....这就叫重定向 '//这里我们使用了第三方中间件处理cookie并且 携带数据,大概设计思路: 1.没有登录过不能进入个人中心,会跳转到登录界面 2.登录过后会有一个免登录期限进入个人中心 3.在登录界面可以通过用户名和邮箱找回密码...对象, 如果这时候去 if() 里判断,无论有什么样的结果,都是true, 而且这个 CRUD 操作都是异步,所以我们把外部函数变成 async 函数, 这样可以配合 await 实现最佳异步,还可以获取他们的返回值进行

    5K20

    Angular 从入坑到挖坑 - Router 路由使用入门指北

    一、Overview Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular如何配置路由,完成重定向以及参数传递。...四、Step by Step 4.1、基础概念 4.1.1、base urlAngular 应用中,框架会自动将 index.html 文件中的 base url 配置作为组件、模板和模块文件的基础路径地址...,我们会选择重定向到一个具体的地址上,这里我们在定义路由信息时,定义了一个空路径用来表示系统的默认地址,当用户请求时,重定向到 /home 路径上,因为只有完整url 地址匹配空字符串时才应该进行重定向操作...最常见的一种参数传递的方式,在需要跳转的路由地址后面加上参数和对应的值,在跳转后的页面通过获取参数 key 从而获取到对应的参数值 跳转 对于直接通过 a 标签进行的路由跳转,我们可以在 a 标签上通过绑定 queryParams 属性来添加查询参数信息 这里通过 queryParams 属性绑定的是一个对象

    4.2K50

    Angular SSR 探究

    例如,在浏览器中,我们通过 window.location.href 获取当前浏览器的地址,而改成 SSR 之后,代码如下:import { Location } from '@angular/common...Angular 官方推荐将请求的 URL路径设置到 renderModule() 或 renderModuleFactory() 的 options 参数中。...预渲染路径配置需要进行预渲染(预编译 HTML)的网页路径,可以有几种方式进行提供:通过命令行的附加参数:ng run :prerender --routes /product/1.../product/2如果路径比较多,比如针对 product/:id 这种动态路径,则可以使用一个路径文件routes.txt:/products/1/products/23/products/145/...Angular Universal 主要关注将 Angular App 如何进行服务端渲染和生成静态 HTML,对于用户交互复杂的 SPA 并不推荐使用 SSR。

    10.3K51

    Angular 6 HttpClient 快速入门

    废话不多说,现在让我们来看一下如何Angular 6.x 中使用 HttpClientModule 模块。..._page=1&_limit=10" ) .pipe(tap(console.log)); } } 设置查询参数 假设发送 Get 请求时,需要设置对应的查询参数,预期的 URL...request("GET", "https://jsonplaceholder.typicode.com/todos", { params }) .pipe(tap(console.log)); } 获取完整响应...默认情况下,HttpClient 服务返回的是响应体,有时候我们需要获取响应头的相关信息,这时你可以设置请求 options 对象的 observe 属性值为 response 来获取完整的响应对象。...总结 本文通过 jsonplaceholder 提供的 API,介绍了如何使用 HttpClientModule 模块中的 HttpClient 服务,发送 Get、Post、Delete 等请求,同时介绍了如何利用

    5K30

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

    Angular通过$location获取url中的参数   最近,项目开发正在进行时,心有点燥,许多东西没来得及去研究,今天正想问题呢,同事问到如何获取url中的参数,我一时半会还真没想起来,刚刚特意研究了一下...,常用的方法就以下几种: 1.获取当前完整url路径   var absurl = $location.absUrl();     //http://88:8100/#/homePage?...获取当前url路径(当前url#后面的内容,包括参数和哈希值)   var url = $location.url();   // /homePage?id=10&a=100 3. ...获取当前url的子路径(也就是当前url#后面的内容,不包括参数)   var pathUrl = $location.path()   ///homePage 4.获取当前url的协议(比如http...name=haha   需要在项目中注入$locationProvider服务 1 var searchApp = angular.module('searchApp', []); 2 3 searchApp.config

    2K30

    【Hybrid开发高级系列】AngularJS(二)——常用$服务

    : 字符串,请求的目标     params: 字符串或者对象,会被转换成为查询字符串追加的url后面     data: 在发送post请求时使用,作为消息体发送到服务器     headers: 一个列表...暴露当前地址栏的URL,这样你就能         * 获取并监听URL。         * 改变URL。     ...2.当出现以下情况时同步URL         * 改变地址栏         * 点击了后退按钮(或者点击了历史链接)         * 点击了一个链接     3.一系列方法来获取URL对象的具体内容用...host( ):只读;返回url中的主机路径。     path( ):读、写;当没有任何参数时,返回当前url路径;当带有参数时,改变路径,并返回$location。...(返回的路径永远会带有/)     port( ):只读;返回当前路径的端口号。     protocol( ):只读;返回当前url的协议。

    42040

    AngularDart4.0 英雄之旅-教程-07路由 顶

    你可以通过导入路由库来得到它们:lib/app_component.dart (router import) import 'package:angular_router/angular_router.dart...调用服务来获取Angular ngOnInit()生命周期钩子中的英雄。 在这个仪表板中你指定了四个英雄(第二,第三,第四和第五)。 刷新浏览器以查看新仪表板中的四个英雄名称。...主要的变化是如何得到英雄的名字。...= null) hero = await (_heroService.getHero(id)); } 注意如何通过调用RouteParams.get()方法来提取id。 英雄id是一个数字。...你走过的路 以下是您在此页面中所取得的成果: 您添加了Angular路由器来浏览不同的组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择的英雄的细节。

    17.6K30

    【Hybrid开发高级系列】AngularJS(一)——基础专题

    您可以使用源代码管理版本控制系统Git获取本教 程项目的源代码文件,或直接从网上下载本教程项目源代码文件的镜像归档压缩包。     1....2.1.3 angular.module Angular Module声明和获取重载 http://www.cnblogs.com/whitewolf/p/angular-module-declare-and-get.html...请注意它是完全不同的方式,一个是声明创建module,而另外一个则是获取已经声明了的module。在应用程序中,对module的声明应该有且只有一次;对于获取module,则可以有多次。...你可以像下面这样运行测试:     1、在一个单独的终端上,进入到angular-phonechat目录并且运行....).success(function(data) {   $scope.phones =data; }); 换成了: $scope.phones = Phone.query();         我们通过这条简单的语句来查询所有的手机

    53980

    Angular 2 + 折腾记 :(4)初步了解路由及使用

    前言 路由这块的水挺深,我这里扯扯我用过的一些特性及一丢丢的经验 ---- 概念性的东西 言简意赅的总结一下: 路由就是控制视图与视图之间的跳转,之间还可以传递参数什么的,路由的退后及前进不会完整的请求整个页面...,还可以完全不请求(在生命周期里面控制); angular 2 + 里面有两种url风格 一个是常规我们访问url那种protocol://domain/path/f/fds 一种的hash(#)风格,...,相对路由这些,绝对路径这些都可以实现,我这里也说说常用的 url: 获取url routerState: 路由状态 navigateByUrl:绝对路径的跳转,有个可选参数[{relativeTo,...: NavigationExtras],可选参数就是上面那个停留在当前路径跳转这些 parseUrl:格式化url,实用!...url的id // 根据是否存在id判断是新增还是修改 checkAction() { // 用activatedRoute来获取url上对应的参数 this.activatedRoute.params.subscribe

    3K20

    Angular 从入坑到挖坑 - HTTP 请求概览

    一、Overview angular 入坑记录的笔记第四篇,介绍在 angular如何通过 HttpClient 类发起 http 请求,从而完成与后端的数据交互。...this.http.get(url); } } 在组件中,通过调用注入的服务类完成接口数据的获取,因为是以一种结构化对象的形式获取到接口返回的数据,因此这里可以直接通过对象属性获取到指定的属性信息...body 里面的信息,某些情况下需要获取完整的响应信息,此时需要通过 observe 参数来告诉 HttpClient 此方法需要返回完整的响应信息 ?...constructor(private http: HttpClient) { } /** * 获取完整的接口请求信息 */ getAntiMotivationalQuotesResponse...(private services: AntiMotivationalQuotesServicesService) { } ngOnInit(): void { } /** * 获取毒鸡汤接口完整的请求信息

    5.3K10

    Angular v8 发布!来看看有什么新功能

    要在调试模式下运行程序,建议使用 AOT: 1ng serve --aot 此外,值得一提的是通过 ng build 创建的程序的大小。等到 Angular 9 发布时 Ivy 最终应该会默认激活。...完整的实现包含在作者的样本集[1]中。为了便于说明,可以在主线程和 Web worker 中解决可用的 n 皇后问题。...到目前为止,这是通过识别加载模块的魔术值来完成的: 1{ 2 path: 'lazy', 3 loadChildren: () => '..../lazy/lazy.module#LayzModule' 4} “#”号之前的值表示通向模块实现的文件的路径;之后的值代表其中包含的类。...ngUpgrade的新功能 到目前为止,AngularJS 1.x 和 Angular 与 ngUpgrade 的混合操作中存在的一个问题是:两个框架的路由有时一直在争夺 URL

    3K30

    【译】JavaScript对SEO的影响

    预渲染工具通过访问每个路径并生成对应的HTML文件来达到渲染应用程序。...因此,预渲染仅限于静态页面或通过查询参数获取动态内容的应用。 同构渲染(客户端+服务端) 同构渲染也被称为混合渲染。...当用户代理(例如Google Bot)通过url访问这类应用程序时,会返回服务端渲染的页面内容,而将客户端渲染的页面内容返回给其它途径访问的用户。...因此,客户端将获取完整的HTML内容。这也有利于SEO——搜索引擎爬虫能够直接获取完整的页面内容,这也使得爬虫的工作量更加轻松了。换句话说,就是提高了搜索引擎编制页面索引的速度。...特定框架的SEO 1. React 客户端渲染 当在客户端渲染React时,可以通过使用react-helmet来渲染每个页面的meta标签。

    2.9K10

    JavaScript 框架安全报告2019

    React 核心项目安全 Angular 在其原有的 AngularJS 项目(Angular v1.x)中存在 23 个安全漏洞。 在 Angular 核心框架组件中未发现任何安全漏洞。...了解关于如何通过 CVSS 对漏洞的严重程度进行评分的信息【https://snyk.io/blog/scoring-security-vulnerabilities-101-introducing-cvss-for-cve...Angular 有更广泛的内置支持,可用于不同上下文中的数据清理和输出编码,例如 HTML 锚点(或链接)元素中的 URL 属性等。...Angular 在其 HTTP 服务中通过内置的安全机制提供了对跨站请求伪造(CSRF)漏洞的支持。而 React 开发人员需要独立解决这些问题。...值得注意的社区模块,例如 bootstrap-markdown 在同一时间段内下载量超过300,000,尽管它没有安全性修复或升级其 XSS 漏洞的路径

    1.1K10
    领券