如何使用AngularJS

177

<div ng-app=""> 
    <div ng-controller="test"> 
     <div ng-address-bar browser="html5"></div> 
     <br><br> 
     $location.url() = {{$location.url()}}<br> 
     $location.search() = {{$location.search('keyword')}}<br> 
     $location.hash() = {{$location.hash()}}<br>  
     keyword valus is={{loc}} and ={{loc1}} 
    </div> 
</div>

AngularJS源代碼

<script> 
function test($scope, $location) { 
    $scope.$location = $location; 
    $scope.ur = $scope.$location.url('www.html.com/x.html?keyword=test#/x/u'); 
    $scope.loc1 = $scope.$location.search().keyword ;  
    if($location.url().indexOf('keyword') > -1){  
     $scope.loc= $location.url().split('=')[1]; 
     $scope.loc = $scope.loc.split("#")[0]   
    } 
    } 
</script>

這裏變量loc和loc1得到URL參數都返回測試作爲結果的上方網址。這是正確的方法嗎？

來源

2012-08-01 praveenpds

您可能想查看[$ routeParams]（http://docs.angularjs.org/api/ng.$routeParams）。 – 2012-11-08 22:37:40

不清楚你在這裏問什麼... $ routeParams和$ location＃methods文檔應該讓你開始 – deck 2013-09-06 06:44:09

請在投票時加入一條評論，以便改善問題。謝謝。 – praveenpds 2014-08-13 12:17:33

290

我知道這是一個古老的問題，但我花了一些時間對稀疏的Angular文檔進行分類。 RouteProvider和routeParams是要走的路。路由將URL連接到您的Controller/View，並將routeParams傳遞給控制器。

查看Angular seed項目。在app.js中，您會找到路由提供者的示例。要使用PARAMS只是追加他們是這樣的：

$routeProvider.when('/view1/:param1/:param2', { 
    templateUrl: 'partials/partial1.html',  
    controller: 'MyCtrl1' 
});

然後在您的控制器注入$ routeParams：

.controller('MyCtrl1', ['$scope','$routeParams', function($scope, $routeParams) { 
    var param1 = $routeParams.param1; 
    var param2 = $routeParams.param2; 
    ... 
}]);

來源

2013-05-21 14:26:23 Jeff

請注意，這個例子的最後一行'''}）;'''應該是'''}]）;''' – 2013-09-18 17:12:34

+39

也可以在查詢字符串窗體'/ view/1/2中獲得其他任意參數？其他= 12'與'$ routeParams.other' – DavidC 2014-08-17 21:04:41

我認爲你的控制器中重複了'var param1'。我無法編輯這樣一個簡單的改變。 – Tom 2016-05-14 04:35:08

142

雖然路由的確是應用程序級的URL解析一個很好的解決方案，您可能需要使用更低水平$location服務，在自己的服務或控制器注入：

var paramValue = $location.search().myParam;

這個簡單的語法將對http://example.com/path?myParam=paramValue工作。

$locationProvider.html5Mode(true);

否則有看http://example.com/#!/path?myParam=someValue「Hashbang」語法是有點複雜，但對舊的瀏覽器工作的好處（：但是，只有當你之前配置的HTML 5模式$locationProvider非HTML 5兼容）。

來源

2013-10-20 19:33:02 Javarome

+13

它看起來像你必須像這樣添加$ locationProvider.html5mode（true）作爲模塊配置：angular.module（「myApp」，[]）。 config（function（$ locationProvider）{ $ locationProvider.html5Mode（true）; }）; – sq1020 2014-08-04 16:57:39

而html5Mode需要'index.html'中的''標籤。 – cespon 2015-03-31 10:33:35

我喜歡你的解決方案是，你甚至可以傳遞對象，並將它們作爲對象。 – Shilan 2015-11-26 12:39:24

如果您使用ngRoute，你可以注入$routeParams到控制器中

http://docs.angularjs.org/api/ngRoute/service/$routeParams

如果您使用的角度-UI-路由器，你可以注入$stateParams

https://github.com/angular-ui/ui-router/wiki/URL-Routing

來源

2014-03-24 01:20:39 jlents

對於'$ stateParams'來顯示查詢參數，我必須在定義狀態時指定它們，如https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters – Parziphal 2014-07-22 21:14:23

如果已發佈的答案沒有幫助，可以嘗試使用 $ location.search（）。myParam; 與網址http://example.domain#?myParam=paramValue

來源

2016-02-26 00:11:21 ak1