AngularJSのURLにクエリ文字列を追加する方法は？

Question

私は角度の新しいjです。私はcustomerIdを検索する入力テキストボックスを持つ検索ページを持っていますが、URL文字列に基づいて検索できる機能を追加したいと思います。

http://localhost:8080/#/search 

しかし、私はまた

は、いくつかのいずれかを言うことができる私は、URLにはcustomerIdに基づいて検索できるように

http://localhost:8080/#/search?ACC34ff 

http://localhost:8080/#/search?CustomerIdようなものが必要：

例えば、私のURLはどのようにクエリ文字列を追加できますか？

app.config(['$routeProvider', 
function($routeProvider) { 
    $routeProvider 
    .when('/home', { 
     templateUrl: 'partials/home.html', 
     controller: 'homePageCtrl', 
     reloadOnSearch: true 
    }).when('/features', { 
     templateUrl: 'partials/features.html', 
     controller: 'featuresCtrl', 
     reloadOnSearch: false 
    }).when('/search', { 
     templateUrl: 'partials/search.html', 
     controller: 'searchCtrl', 
     reloadOnSearch: false 
    }).otherwise({ 
     redirectTo: '/home' 
    }); 
}]); 

コントローラー：

appControllers.controller('searchCtrl', ['$scope','$route','$filter', '$http', '$location','$window','$timeout', 
    function($scope, $route, $filter, $http, $location, $window, $timeout) { 

     $scope.searchCustomerFeatures = function() { 

      if($scope.customerId != null) { 

      $http.get('/getCustomerFeatures.do', {params: {'customerId': $scope.customerId}}).success(function (data) { 

       $scope.featuresJson = angular.toJson(data, true); 
       }); 
      } 
     } 
    }]); 

HTML：

<li ng-class="{active: isActive('/search')}" style="margin-left: 100px; text-decoration-color: black; font-size: 20px"> 
      <a href="#search" role="tab" data-toggle="tab">Search</a> 
     </li > 

検索ページ：

おかげ

Answer 1

あなたが必要とするのは、customerIdをパラメータとして渡すことだけです。フォローリンクで

.when('/Search', { 
     templateUrl: function (params) { return 'partials/search?customer=' + params.CustomerId; } 
    }) 

あなたが必要とする場合には、複数のパラメータを渡す方法についての説明もあります： https://stackoverflow.com/a/35967896/5988277

Answer 2

はまず、私はあなたがあるためそこに多くの答えを持っていないと信じてすることはできませんurl上で変数を渡して取得する方法はたくさんあります。それぞれの方法は2つの主な方法のわずかな違いです。 ルートパラメータとして（あなたの要求ごとなど）クエリ文字列

の一環として

1. （も言及する価値）

以降の例では、テキスト入力を持っていることを前提としお客様のIDは次のとおりです。

<input type="text" ng-model="customerId" /> 

1）

http://localhost:8080/#/search?cId=ACC34ff 

：あなたがリンクをクリックしたとき今、あなたのようなURLにさせていただきます

<a href="#search?cId={{ customerId }}" role="tab" data-toggle="tab">Search</a> 

を次のようにあなたのリンクにクエリ文字列

追加?cId={{ customerId }}の一部としてcustomerIdを渡します

$locationサービスを使用して、コントローラでcIdパラメータを選択できます。

app.controller('searchCtrl', function($scope, $location){ 
    var qsCustomerId = $location.search().cId; 
    // Do what you want with qsCustomerId here... 
}); 

2）どのようにcustomerId

ルートパラメータとしてを渡すために新しいcIdルートパラメータを指定する新しいルートを作成します。次のように

app.config(['$routeProvider', 
function($routeProvider) { 
    $routeProvider 
    .when('/search/:cId', { 
     templateUrl: 'partials/search.html', 
     controller: 'searchCtrl', 
     reloadOnSearch: false 
    }) 
}]); 

は、あなたのリンクに/{{ customerId }}を追加します。

<a href="#search/{{ customerId }}" role="tab" data-toggle="tab">Search</a> 

あなたは$routeParamsサービスを使用してコントローラでcIdパラメータをピックアップすることができます

http://localhost:8080/#/search/ACC34ff 

：あなたがリンクをクリックしたとき

は今、次のようなURLにさせていただきます。

app.controller('searchCtrl', function($scope, $routeParmas){ 
    var rpCustomerId = $routeParmas.cId; 
    // Do what you want with rpCustomerId here... 
});