詳解Angular中通過$location獲取地址欄的參數(shù)
最近,項目開發(fā)正在進(jìn)行時,心有點(diǎn)燥,許多東西沒來得及去研究,今天正想問題呢,同事問到如何獲取url中的參數(shù),我一時半會還真沒想起來,剛剛特意研究了一下,常用的方法就以下幾種:
1.獲取當(dāng)前完整的url路徑
var absurl = $location.absUrl(); //http://88:8100/#/homePage?id=10&a=100
2. 獲取當(dāng)前url路徑(當(dāng)前url#后面的內(nèi)容,包括參數(shù)和哈希值)
var url = $location.url(); // /homePage?id=10&a=100
3. 獲取當(dāng)前url的子路徑(也就是當(dāng)前url#后面的內(nèi)容,不包括參數(shù))
var pathUrl = $location.path() ///homePage
4.獲取當(dāng)前url的協(xié)議(比如http,https)
var protocol = $location.protocol(); //http
5.獲取主機(jī)名
var localhost = $location.host(); //88
6.獲取當(dāng)前url的端口
var port = $location.port(); //8100
7.獲取當(dāng)前url的哈希值
var hash = $location.hash() //http://088
8.獲取當(dāng)前url的參數(shù)的序列化json對象
var search = $location.search(); //{id: "10", a: "100"}
9. 獲取url參數(shù)
$location.search().name; $location.search()['name'];
10.注意問題
如果是這樣的地址:http://lele.sina.com?name=haha
需要在項目中注入$locationProvider服務(wù)
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中獲取地址欄參數(shù)的方法(附加)
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 console.log(window.location.href ); // "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.host); // "www.baidu.com" console.log(window.location.pathname); // "/s" console.log(window.location.protocol); // "https:" console.log(window.location.search); // "?ie=utf-8&f=3&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=%E5%A8%83%E5%93%88%E5%93%88"
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟
在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個現(xiàn)有組件并重寫它以使用 NgTemplateOutlet,需要的朋友可以參考下2024-03-03AngularJS基礎(chǔ) ng-list 指令詳解及示例代碼
本文主要介紹AngularJS ng-list 指令,這里幫大家整理了ng-list指令的基本資料,并附有示例代碼,有需要的小伙伴可以參考下2016-08-08Angular6使用forRoot() 注冊單一實(shí)例服務(wù)問題
這篇文章主要介紹了Angular6使用forRoot() 注冊單一實(shí)例服務(wù)問題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08AngularJs Understanding the Controller Component
本文主要介紹AngularJs Understanding the Controller Component的內(nèi)容,這里整理了相關(guān)資料,及簡單示例代碼,有興趣的小伙伴可以參考下2016-09-09Angular 4依賴注入學(xué)習(xí)教程之InjectToken的使用(八)
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之InjectToken使用的相關(guān)資料,文中介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Angular4具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2017-06-06angularjs 的數(shù)據(jù)綁定實(shí)現(xiàn)原理
本篇文章主要介紹了angularjs 的數(shù)據(jù)綁定實(shí)現(xiàn)原理,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07AngularJs bootstrap搭載前臺框架——js控制部分
本文主要介紹AngularJs bootstrap搭載前臺框架js控制部分的資料,這里有實(shí)現(xiàn)代碼,有興趣的小伙伴可以參考下2016-09-09