詳解angular中通過(guò)$location獲取路徑(參數(shù))的寫法
我最近在研究angular中通過(guò)$location獲取路徑(參數(shù))的寫法,在網(wǎng)上搜索了很多的資料,正好今天有時(shí)間,就整理一下!
以下獲取與修改的 URL 以 ( http://172.16.0.88:8100/#/homePage?id=10&a=100 ) 為例
【一】獲取 (不修改URL)
//獲取當(dāng)前完整的url路徑
var absurl = $locationabsUrl();
//http://88:8100/#/homePage?id=10&a=100
// 獲取當(dāng)前url路徑(當(dāng)前url#后面的內(nèi)容,包括參數(shù)和哈希值):
var url = $locationurl();
// 結(jié)果:/homePage?id=10&a=100
// 獲取當(dāng)前url的子路徑(也就是當(dāng)前url#后面的內(nèi)容,不包括參數(shù))
var pathUrl = $locationpath()
//結(jié)果:/homePage
//獲取當(dāng)前url的協(xié)議(比如http,https)
var protocol = $locationprotocol();
//結(jié)果:http
//獲取主機(jī)名
var localhost = $locationhost();
//結(jié)果:88
//獲取當(dāng)前url的端口
var port = $locationport();
//結(jié)果:8100
//獲取當(dāng)前url的哈希值
var hash = $locationhash()
//結(jié)果:http://088
//獲取當(dāng)前url的參數(shù)的序列化json對(duì)象
var search = $locationsearch();
//結(jié)果:{id: "10", a: "100"}
【二】修改 (改變URL相關(guān)內(nèi)容)
//1 修改url的子路徑部分(也就是當(dāng)前url#后面的內(nèi)容,不包括參數(shù)):
$locationurl('/validation');
//結(jié)果:http://88:8100/#/validation
//2 修改url的哈希值部分
$locationhash('myhash3');
//結(jié)果:http://88:8100/#/homePage?id=10&a=100#myhash3
//3 修改url的參數(shù)部分(第一個(gè)參數(shù)表示url參數(shù)的屬性名,第二個(gè)參數(shù)是該屬性名的屬性值,如果是已有屬性名,則修改,如果不是已有屬性,則新增)
$locationsearch('id','111')
// 結(jié)果(修改參數(shù)值):http://88:8100/#/homePage?id=111&a=100
$locationsearch('ids','111')
// 結(jié)果(新增ids參數(shù)): http://88:8100/#/homePage?id=111&a=100&ids=111
//一次性修改多個(gè)參數(shù)
$locationsearch({id:'55','a':'66'})
//結(jié)果:http://88:8100/#/homePage?id=55&a=66#myhash3
//第一個(gè)值表示url參數(shù)的屬性名,如果是已有屬性名,則刪除該屬性,如果不是已有屬性,那就等于沒(méi)改過(guò)
$locationsearch('age',null)
【三】修改URL但不存入歷史記錄
在上面的修改url的方法的時(shí)候,每修改一次,url都會(huì)被存入歷史記錄,可以使用后退按鈕回到修改前的url,如果不想要這種效果,而僅僅是替換當(dāng)前的記錄,可以使用 $location.path('/validation').replace();
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS中過(guò)濾器的使用與自定義實(shí)例代碼
這篇文章運(yùn)用實(shí)例代碼給大家介紹了angularjs中過(guò)濾器的使用和自定義過(guò)濾器,對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值,感興趣的朋友們可以參考借鑒。2016-09-09
AngularJS中使用three.js的實(shí)例詳解
這篇文章主要介紹了AngularJS中使用three.js的實(shí)例詳解,我將之前自己做的demo放到了angularJS的一個(gè)component中,其實(shí)一開(kāi)始是沒(méi)有準(zhǔn)備用框架的但是后面發(fā)現(xiàn)需要進(jìn)行的雙向綁定越來(lái)越多,后期表單數(shù)據(jù)的變化量也很大,最后還是選擇用NG來(lái)做這些事情2017-07-07
angular.js + require.js構(gòu)建模塊化單頁(yè)面應(yīng)用的方法步驟
這篇文章主要給大家介紹了關(guān)于利用angular.js + require.js構(gòu)建模塊化單頁(yè)面應(yīng)用的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-07-07
angularjs實(shí)現(xiàn)過(guò)濾并替換關(guān)鍵字小功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)過(guò)濾并替換關(guān)鍵字小功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09
Angular動(dòng)態(tài)添加、刪除輸入框并計(jì)算值實(shí)例代碼
這篇文章主要介紹了Angular動(dòng)態(tài)添加、刪除輸入框并計(jì)算值實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03
Angular 2 利用Router事件和Title實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面標(biāo)題的方法
本篇文章主要介紹了Angular 2 利用Router事件和Title實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面標(biāo)題的方法,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08
簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
Angular 2父子組件數(shù)據(jù)傳遞之局部變量獲取子組件其他成員
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件之間數(shù)據(jù)傳遞之局部變量獲取子組件其他成員的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-07-07

