首页
学习
活动
专区
圈层
工具
发布

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没办法将内容展示到界面。

2.4K10
  • 深入理解 Angular ServerRequestUrlFactory 的功能与原理

    以下文字分段介绍每一行 TypeScript 代码所做的事情,并且通过循序渐进的方式分析这段代码想要实现的目的。文章会在结尾提供一段可运行示例,展现如何将其集成到 Angular SSR 架构当中。...下面开始注入依赖: const platformConfig = inject(INITIAL_CONFIG); 这一行通过 Angular 提供的 inject 函数来获取 INITIAL_CONFIG...这行注入代表在 SSR 模式下,可能已经有人把完整的请求地址 (包含路径、查询参数等) 注入进来。...这个 APP_SERVER_REQUEST_URL 可以在服务端注入给其他服务或者组件进行使用,获取到最终要在服务端渲染使用的完整请求地址。...这样一来,无论是否通过真实服务器获取请求,都能够生成正确的 URL。通过这些步骤,serverRequestUrlFactory 能够为使用者提供一条灵活可配置的请求地址生成通路。

    10300

    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 实现最佳异步,还可以获取他们的返回值进行

    5.4K20

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

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

    5.1K50

    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。

    11K51

    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 等请求,同时介绍了如何利用

    6.2K30

    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

    2.4K30

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

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

    1.6K40

    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路由器来浏览不同的组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择的英雄的细节。

    19.4K30

    【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();         我们通过这条简单的语句来查询所有的手机

    2.3K80

    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

    3.4K20

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

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

    6.7K10

    Angular i18n 资源加载利器解析: i18n-http-backend

    举例来说,如果需要从服务器 http://localhost:3000/locales 这样的路径获取翻译文件,i18next-http-backend 允许将该路径配置为翻译文件前缀,再通过占位符来决定完整...URL 的组织方式。...这个后端插件一般不会跟 Angular Router 或其他库直接耦合,而是独立负责资源获取,为 i18next 提供统一的翻译文档来源。...以下给出一个在 Angular 应用里整合 i18next 与 i18next-http-backend 的示例。示例中会展示如何在主模块中进行配置,并在组件中进行翻译调用。...下面是一个示例组件,展示了如何在 Angular 视图中使用 i18next 提供的翻译结果。这里使用了一个简单的方式,通过组件的属性存储翻译后的文本,再在模板中进行插值。

    23710

    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。

    3.7K30
    领券