angularjs如何获取url参数?小白知识_url零基础入门

angularjs如何获取url参数?小白知识

Angular中通过$location获取URL参数。$location服务负责解析浏览器地址栏中的URL(基于window.location),以便你的应用可以访问它。 这是一个双向同步机制 —— 对地址栏URL的任何修改都会被映射到$location服务中,对$location的任何修改也同样会被映射到地址栏。

angularjs如何获取url参数?小白知识_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?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(); //88

6、获取当前url的端口

var port = $location.port(); //8100

7、获取当前url的哈希值

var hash = $location.hash() //http://088

8、获取当前url的参数的序列化json对象

var search = $location.search(); //{id: "10", a: "100"}

9、获取url参数

$location.search().name;
 
$location.search()['name'];

10、注意问题

如果是这样的地址:http://lele.sina.com?name=haha

需要在项目中注入$locationProvider服务

var searchApp = angular.module('searchApp', []);
 
searchApp.config(['$locationProvider', function($locationProvider) {
 
$locationProvider.html5Mode(true);
 
}]);
 
searchApp.controller('MainCtrl', ['$scope', '$location', function($scope, $location) {
 
if ($location.search().keyword) {
 
$scope.keyword = $location.search().keyword;
 
}
}]);

11、js中获取地址栏参数的方法(附加)

url = https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=%E5%A8%83%E5%93%88%E5%93%88

// "https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=%E5%A8%83%E5%93%88%E5%93%88"
console.log(window.location.href ); 

console.log(window.location.host); // "www.baidu.com"
console.log(window.location.pathname); // "/s"
console.log(window.location.protocol); // "https:"

// "?ie=utf-8&f=3&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=%E5%A8%83%E5%93%88%E5%93%88"
console.log(window.location.search);
海计划公众号
(0)
上一篇 2020/03/19 07:13
下一篇 2020/03/19 07:13

您可能感兴趣的内容

  • gentelella小白教程_可免费使用的 Bootstrap 管理界面模版

    gentelella小白教程 官方网址:https://colorlib.com/polygon/gentelella/index.html GitHub:https://gith…

    2020/03/06
  • Js apply/call/bind的区别及自我实现菜鸟知识_区别基础教程

    call/apply/bind 日常编码中被开发者用来实现 “对象冒充”,也即 “显示绑定 this“。面试题:“call/apply/bind源码实现”,事实上是对 JavaScript 基础知识的一个综合考核。相关知识点:作用域;this 指向;函数柯里化;原型与原型链;call/apply/bind 的区别三者都可用于显示绑定 this;call/ap

    2020/03/29
  • web-study基础入门_总结的前端开发一些基础知识

    web-study基础入门 GitHub:https://github.com/pubdreamcc/web-study 简介描述:总结的前端开发一些基础知识 本仓库是自己总结的前…

    2020/03/11
  • javascript 链式写法菜鸟攻略_链式指南教程

    熟悉Jquery的同学都知道,它对dom的操作基本都链式调用的写法,这种给人感觉就是很简洁,易懂,而且最大的好处就是避免多次重复使用一个对象变量。链式的实现方式:链式操作是在对象的方法中通过最后返回自身对象(return this),返回的对象就可以继续调用它里面的方法。那么,简单实现一下:var o ={f:function(r){console.log(

    2020/03/31
  • 程序员请掌握这些核心生存技能入门知识_技能入门基础

    大咖你好,作为一个编程初学者,有什么需要注意的?以上是一个读者流年似水的提问。我把他的问题置顶了,但一直没想好怎么回答,因为问题太过笼统了。后来,他也可能意识到了这一点,就又给我发了一条微信:在吗?老师。我们作为新人应该在编写代码的过程中注意哪些问题呢?这个问题其实也不太好回答,因为要注意的问题蛮多的,多得就像雾霾中的颗粒。不过,有趣的是,流年似水这两次的提

    2020/03/22
  • 如何使用SVG动画来制作游戏基础入门_游戏基础知识入门

    在使用过一段时间的SVG动画之后,我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台,例如Greensock,和原生的CSS动画简直是绝配。于是我便打算深入地研究一下,看看我能否用这些来制作一款简单的游戏。就像一个精美的工艺品一样,好的游戏拥有许多细致的动画细节。有一天夜里,我的脑海中突然闪现了一个游戏的灵感,我马上起来,画了一些草图,之后给我的

    2020/04/03
  • Sxsoft小白教程_软件外包、外包服务平台

    Sxsoft小白教程 官方网址:https://www.sxsoft.com/ 简介描述:软件外包、外包服务平台 软件项目交易网致力于软件行业的项目外包和软件定制开发信息的提供、为…

    2020/03/11
  • javaScript基础使用攻略_js基础基础知识教程

    JavaScript的作用HTML: 解决页面的结构CSS:样式JS:交互,让页面可以具有动作。后期的js可以实现动态页面的效果JavaScript是什么语言:用于交流的-所有的语言都有固定的语法和单词,固定语法是一定要遵守的脚本:戏剧剧本,只要按照流程一步一步走,就可以把所有的事情做完,脚本语言有一个特性:如果执行到某一行出错了,就会终止执行,不再继续客户

    2020/03/29
  • 各大高校女生节横幅来袭,个个都是段子手零基础入门_段子菜鸟指南

    啊,又是一年女生节,又到了朋友圈刷各种标语的时候了。在这里,首先要祝全国过女生节的妹子们开心快乐,学业/工作进步,永远健康美丽,心想事成!一年一度的女生节,又号称一年一度的男生横幅节,又号称年度段子展览节,每年看着各大院校风采各异的横幅,一天的快乐能量就这么攒齐了。戳图↓↓感受一下今日份各高校的女生节横幅!首先是来自南京大学计科、计金专业的祝福表白什么的,信

    2020/03/31
  • jspm-cli小白知识_基于SystemJS的Js包管理器

    jspm-cli小白知识 官方网址:https://jspm.org GitHub:https://github.com/jspm/jspm-cli 简介描述:基于SystemJS…

    2020/03/06
  • 从零实现TypeScript版Koa指南教程_Koa入门百科

    这篇文章会讲些什么?如何从零开始完成一个涵盖Koa核心功能的Node.js类库从代码层面解释Koa一些代码写法的原因:如中间件为什么必须调用next函数、ctx是怎么来的和一个请求是什么关系我们知道Koa类库主要有以下几个重要特性:支持洋葱圈模型的中间件机制封装request、response提供context对象,方便http操作异步函数、中间件的错误处理

    2020/03/29
  • JS生成随机密码基础知识教程_随机小白知识

    很多时候用户注册的时候需要给用户生成一个随机的密码,今天咱们就用JS生成一个随机密码吧,下面直接开始写代码吧。先声明一个数组,里面放密码所需要的英文字符、数字、特殊字符。var pasArr = [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘,‘g‘,‘h‘,‘i‘,‘j‘,‘k‘,‘l‘,‘m‘,‘n‘,‘o‘,‘p‘,‘q‘,‘r‘,‘s‘,‘t‘,‘

    2020/03/26
  • React transaction完全解读入门攻略_源码小白帮助

    前言在阅读react源码中,发现其中大量用到了transaction(中文翻译为事务)这个写法,所以单独做一下分析。其实在react中transaction的本质,其实算是一种设计模式,它的思路其实很像AOP切面编程:给目标函数添加一系列的前置和后置函数,对目标函数进行功能增强或者代码环境保护。接下来进行详细说明。初识transaction在日常业务中,经常

    2020/03/23
  • highcharts 时间少8小时问题小白攻略_小白攻略

    Highcharts 中默认开启了UTC(世界标准时间),由于中国所在时区为+8,所以经过 Highcharts 的处理后会减去8个小时。如果不想使用 UTC,有2种方法可供使用:1、在使用Highcharts的页面中添加如下代码:Highcharts.setOptions({ global: {

    2020/03/26
  • JSDoc 3使用帮助_生成javascript API文档

    JSDoc 3使用帮助 官方网址:http://usejsdoc.org GitHub:https://github.com/jsdoc3/jsdoc 简介描述:生成javascr…

    2020/03/06
  • 在textarea和input光标处插入内容,支持ie基础知识_光标小白知识

    项目需求,用户要能够输入和点击外面的公式去插入到textaera中,试了好几种方法,有的是在谷歌下好使,在ie下不好使,最后找到了下面这个方法,目前在ie8以上都可以生效。直接上代码 function insertAtCursor(myField, myValue) {//IE supportif (document.selection) {myField

    2020/03/23