Angular 通過注入 $location 獲取與修改當(dāng)前頁面URL的實(shí)例
以下獲取與修改的 URL 以 ( http://172.16.0.88:8100/#/homePage?id=10&a=100 ) 為例
【一】獲取 (不修改URL)
//1.獲取當(dāng)前完整的url路徑 var absurl = $location.absUrl(); //http://172.16.0.88:8100/#/homePage?id=10&a=100 //2. 獲取當(dāng)前url路徑(當(dāng)前url#后面的內(nèi)容,包括參數(shù)和哈希值): var url = $location.url(); // 結(jié)果:/homePage?id=10&a=100 //3. 獲取當(dāng)前url的子路徑(也就是當(dāng)前url#后面的內(nèi)容,不包括參數(shù)) var pathUrl = $location.path() //結(jié)果:/homePage //4.獲取當(dāng)前url的協(xié)議(比如http,https) var protocol = $location.protocol(); //結(jié)果:http //5.獲取主機(jī)名 var localhost = $location.host(); //結(jié)果:172.16.0.88 //6.獲取當(dāng)前url的端口 var port = $location.port(); //結(jié)果:8100 //7.獲取當(dāng)前url的哈希值 var hash = $location.hash() //結(jié)果:http://172.16.088 //8.獲取當(dāng)前url的參數(shù)的序列化json對(duì)象 var search = $location.search(); //結(jié)果:{id: “10”, a: “100”}
【二】修改 (改變URL相關(guān)內(nèi)容)
//1 修改url的子路徑部分(也就是當(dāng)前url#后面的內(nèi)容,不包括參數(shù)): $location.url(‘/validation'); //結(jié)果:http://172.16.0.88:8100/#/validation //2 修改url的哈希值部分 $location.hash(‘myhash3'); //結(jié)果:http://172.16.0.88:8100/#/homePage?id=10&a=100#myhash3 //3 修改url的參數(shù)部分(第一個(gè)參數(shù)表示url參數(shù)的屬性名,第二個(gè)參數(shù)是該屬性名的屬性值,如果是已有屬性名,則修改,如果不是已有屬性,則新增) $location.search(‘id','111') // 結(jié)果(修改參數(shù)值):http://172.16.0.88:8100/#/homePage?id=111&a=100 $location.search(‘ids','111') // 結(jié)果(新增ids參數(shù)): http://172.16.0.88:8100/#/homePage?id=111&a=100&ids=111 //4.一次性修改多個(gè)參數(shù) $location.search({id:'55','a':'66'}) //結(jié)果:http://172.16.0.88:8100/#/homePage?id=55&a=66#myhash3 //5.第一個(gè)值表示url參數(shù)的屬性名,如果是已有屬性名,則刪除該屬性,如果不是已有屬性,那就等于沒改過 $location.search(‘a(chǎn)ge',null)
【三】修改URL但不存入歷史記錄
在上面的修改url的方法的時(shí)候,每修改一次,url都會(huì)被存入歷史記錄,可以使用后退按鈕回到修改前的url,如果不想要這種效果,而僅僅是替換當(dāng)前的記錄,
相關(guān)文章
詳解ionic本地相冊(cè)、拍照、裁剪、上傳(單圖完全版)
本篇文章主要介紹了ionic本地相冊(cè)、拍照、裁剪、上傳(單圖完全版),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10angularJs在多個(gè)控制器中共享服務(wù)數(shù)據(jù)的方法
今天小編就為大家分享一篇angularJs在多個(gè)控制器中共享服務(wù)數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09詳解創(chuàng)建自定義的Angular Schematics
本文對(duì) Angular Schematics 進(jìn)行了介紹,并創(chuàng)建了一個(gè)用于創(chuàng)建自定義 Component 的 Schematics ,然后在 Angular 項(xiàng)目中以它為模板演練了通過 Schematics 添加自定義的 Component,感興趣的小伙伴們可以參考一下2018-06-06利用Angularjs中模塊ui-route管理狀態(tài)的方法
這篇文章主要給大家介紹了如何用Angularjs中的模板ui-route來管理狀態(tài)的方法,文中通過示例代碼介紹的很詳細(xì),相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值,有需要的朋友可以一起來學(xué)習(xí)學(xué)習(xí)。2016-12-12AngularJs自定義服務(wù)之實(shí)現(xiàn)簽名和加密
AngularJS 是一個(gè) JavaScript 框架,它可以通過 <script> 標(biāo)簽添加到 HTML 頁面。這篇文章主要介紹了AngularJs自定義服務(wù)之實(shí)現(xiàn)簽名和加密的相關(guān)資料,需要的朋友可以參考下2016-08-08