詳解Angular中通過$location獲取地址欄的參數(shù)
最近，項目開發(fā)正在進(jì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)文章
這篇文章主要介紹了angularjs性能優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
深入學(xué)習(xí)AngularJS中數(shù)據(jù)的雙向綁定機(jī)制
這篇文章主要介紹了AngularJS中數(shù)據(jù)的雙向綁定機(jī)制,雙向綁定使得HTML中呈現(xiàn)的view與AngularJS中的數(shù)據(jù)一致,是Angular的重要特性之一,需要的朋友可以參考下2016-03-03
angularjs select 賦值 ng-options配置方法
下面小編就為大家分享一篇angularjs select 賦值 ng-options配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
angular2實現(xiàn)統(tǒng)一的http請求頭方法
今天小編就為大家分享一篇angular2實現(xiàn)統(tǒng)一的http請求頭方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
angular4中*ngFor不能對返回來的對象進(jìn)行循環(huán)的解決方法
今天小編就為大家分享一篇angular4中*ngFor不能對返回來的對象進(jìn)行循環(huán)的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Angular 多級路由實現(xiàn)登錄頁面跳轉(zhuǎn)(小白教程)
這篇文章主要介紹了Angular 多級路由實現(xiàn)登錄頁面跳轉(zhuǎn)(小白教程)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
創(chuàng)建你的第一個AngularJS應(yīng)用的方法
這篇文章主要介紹了創(chuàng)建你的第一個AngularJS應(yīng)用的方法,AngularJS是一個非常具有人氣的JavaScript框架,需要的朋友可以參考下2015-06-06
表單是最常用的一種組建。在Angular.js中，其實并沒有單獨的為表單添加多少特殊功能。但是，利用Angular.js框架本身的特點，可以更友好的呈現(xiàn)表單。下面將介紹幾種常用的功能在Angular中是如何巧妙實現(xiàn)的2016-03-03
AngularJS框架的ng-app指令與自動加載實現(xiàn)方法分析
這篇文章主要介紹了AngularJS框架的ng-app指令與自動加載實現(xiàn)方法,結(jié)合實例形式分析了ng-app指令的功能及自動加載機(jī)制的實現(xiàn)技巧,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細(xì)介紹了AngularJS表單基本操作的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01