web-dev-qa-db-ja.com

AngularJSを使用してURLパラメータを取得する方法

HTMLソースコード

<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の結果として test を返します。これは正しい方法ですか？

javascriptangularjsrouteparams
193
praveenpds

私はこれが古い質問であることを知っています、しかしまばらなAngularドキュメンテーションを考えるとこれを整理するのに私は時間がかかりました。 RouteProvider および routeParams は、進むべき道です。ルートはあなたのコントローラ/ビューへのURLを配線し、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;
  ...
}]);
308
Jeff

ルーティングは確かにアプリケーションレベルのURL解析のための良い解決策ですが、あなた自身のサービスやコントローラに注入されるように、あなたはもっと低レベルの$locationサービスを使いたいかもしれません：

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

この単純な構文はhttp://example.com/path?myParam=paramValueに対して機能します。ただし、以前にHTML 5モードで$locationProviderを構成した場合に限ります。

$locationProvider.html5Mode(true);

そうでなければ、もう少し複雑な http://example.com/#!/path?myParam=someValue "Hashbang"構文を見てください。 5互換）も。

151
Javarome

NgRouteを使用している場合は、コントローラに$routeParamsを挿入できます。

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

Angular-UI-Routerを使用している場合は、$stateParamsを挿入できます。

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

31
jlents

URLからパラメータを取得するための$ location.search（）の使用方法を見つけました

uRLの最初のものuこの例のようにパラメータの前に構文 "＃"を置く必要があります。

"http://www.example.com/page#?key=value"

それからあなたのコントローラで$ locationを関数に入れて、$ location.search（）を使ってURLパラメータを取得します。

.controller('yourController', ['$scope', function($scope, $location) {

     var param1 = $location.search().param1; //Get parameter from URL

}]);
4
Mekha Lomlao

すでに投稿された答えが役に立たなかった場合は、$ location.search（）。myParamを試してみてください。 URL付き/ http：//example.domain#？myParam = paramValue

1
ak1
function GetURLParameter(parameter) {
        var url;
        var search;
        var parsed;
        var count;
        var loop;
        var searchPhrase;
        url = window.location.href;
        search = url.indexOf("?");
        if (search < 0) {
            return "";
        }
        searchPhrase = parameter + "=";
        parsed = url.substr(search+1).split("&");
        count = parsed.length;
        for(loop=0;loop<count;loop++) {
            if (parsed[loop].substr(0,searchPhrase.length)==searchPhrase) {
                return decodeURI(parsed[loop].substr(searchPhrase.length));
            }
        }
        return "";
    }
0
Russell Hankins

RL値を取得する簡単で簡単な方法

First add # to url (e:g -  test.html#key=value)

url in browser (https://stackover.....king-angularjs-1-5#?brand=stackoverflow)

var url = window.location.href 

(output: url = "https://stackover.....king-angularjs-1-5#?brand=stackoverflow")

url.split('=').pop()
output "stackoverflow"
0
Rohit Parte