寫在前面

上篇文章主要介紹了路由中when方法的第二個參數(shù)，常見的幾個屬性，以及作用。本篇文章，將介紹和路由相關的幾個常見的服務。

系列文章

[Angularjs]ng-select和ng-options

[Angularjs]ng-show和ng-hide

[Angularjs]視圖和路由（一）

[Angularjs]視圖和路由（二）

$routeParams

有這樣一種情況，在設計路由的時候，我們希望在路由上面?zhèn)鬟f參數(shù)，但是當跳轉到指定的路由的時候，我們該如何接收呢？這就用到$routeParams這個指令。傳遞的參數(shù)，angularjs會將它解析出來并傳遞給$routeParams。

一個例子

$routeProvider.when('/user/:name',{controller:'UserController',templateUrl:'views/user.html'});

這個例子的大概意思就是，根據(jù)name查詢用戶信息。

當訪問這樣的路由是#/user/wolfy，angularjs會在$routeParams中添加一個名為name的鍵，它的值會被設置為加載進來的Url中的值。比如這里，$routeParams對象看起來回事這樣的：

{name:'wolfy'}

需要注意，如果想要在控制器中訪問這些變量，需要把$routeParams注入到控制器：

app.controller('UserController',function($scope,$routeParams){console.log($routeParams.name); });

$location服務

angularjs提供了一個服務用以解析地址欄中的URL，并讓你可以訪問應用當前路徑所對應的路由。它同樣提供了修改路徑和處理各種形式導航的能力。

$location服務對javasrcipt中的window.location對象的api進行了更優(yōu)雅地封裝，并且或Angularjs繼承在一起。

當應用需要在內部進行跳轉時是使用$location服務的最佳場景，比如當用戶注冊后，修改或者登錄后進行的跳轉。

$location服務沒有刷新整個頁面的能力。如果需要刷新整個頁面，需要使用$window.location對象(window.location的一個接口).

$location服務常見的幾個方法

path()

$location.path();//用來獲取頁面的當前路徑。

修改當前路徑并跳轉到應用中的另一個Url，該方法參數(shù)為空時是獲取url，傳遞路由時是修改url：

$location.path('/');//把路徑修改為'/'路由

path()方法直接和html5的歷史api進行交互，所以用戶可通過點擊后退按鈕退回到上一個頁面。
replace()

如果你希望跳轉后用戶不能點擊后退按鈕（對于登錄之后的跳轉這種發(fā)生在某個跳轉之后的再次跳轉很有用），angularjs提供了replace()方法來實現(xiàn)這個功能：

$location.path('/home');$location.replace();//或者 $loaction.path('/home').replace();

absUrl()

absUrl()方法用來回去編碼后的完整URL。

$location.absUrl();

hash()

hash()方法用來回去URL中的hash片段：

$location.hash();//返回當前的hash片段

host()

該方法用來回去URL中的主機：

$location.host();//當前url的主機

port()

該方法用來獲取URL中的端口號：

$location.port();

protocol()

該方法用來獲取URL中的協(xié)議：

$location.protocol();

search()

該方法用來獲取URL中的查詢串：

$location.search();

我們可以想這個方法中傳入新的查詢參數(shù)，來修改url中的查詢串部分：

//對象設置查詢 $location.search({name:'wolfy',userName:'wolfy sun'}); //用字符串設置查詢 $location.search('name=wolfy&username=wolfy sun');

search方法可以接收兩個參數(shù)：

• • search(可選，字符串或對象)：這個參數(shù)待辦新的念書。hash對象的值可以是數(shù)組。
  • paramValue(可選，字符串)：如果search參數(shù)的類型是字符串，那么paramValue會作為該參數(shù)的值覆蓋URL當中的對應值。如果paramValue的值為null，對應的參數(shù)會被移除掉。

一個例子

// 帶#號的url，看？號的url，見下面 url = http://www.wolfy.com?#name=wolfy

用search方法獲取參數(shù)，可以這樣：

// 獲取url參數(shù) $location.search().name; // or $location.search()['name'];

url()

該方法用來獲取當前頁面的URL：

$location.url();//該URL的字符串

如果調用url()方法時傳了參數(shù)，會設置并修改當前的URL，這會同時修改URL中的路徑、查詢串和hash，并返回$location.

//設置新的URL $location.url('/home?name=wolry#hashthing');

url()方法可以接收兩個參數(shù)：

url(可選，字符串)：新的URL的基礎的前綴。

replace(可選，字符串)：想要修改成的路徑。

?總結

?在目前的項目中用到比較多的是$routeParams和$location.path()，獲取傳遞的參數(shù)，在用戶完成某個操作時，進行修改路由跳轉到新的templateUrl。并在ng-view占位的地方進行渲染。

文章來自

AngularJS權威教程?

轉載于:https://www.cnblogs.com/wolf-sun/p/4640725.html

總結

以上是生活随笔為你收集整理的[Angularjs]视图和路由（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。