web-dev-qa-db-ja.com

angularルートでクエリ文字列を渡す方法？

私はAngularJSルートで作業しており、クエリ文字列（たとえば、url.com?key=value）。 Angularは、同じ名前albumsのキーと値のペアを含むルートを理解しません：

angular.module('myApp', ['myApp.directives', 'myApp.services']).config(
        ['$routeProvider', function($routeProvider) {
            $routeProvider.
            when('/albums', {templateUrl: 'albums.html', controller: albumsCtrl}).
            when('/albums?:album_id', {templateUrl: 'album_images.html', controller: albumsCtrl}).
            otherwise({redirectTo: '/home'});
        }],
        ['$locationProvider', function($locationProvider) {
            $locationProvider.html5Mode = true;
        }]
    );
angularjsangularjs-routing
35
Amb

ルートがクエリ文字列で機能するとは思わない。 url.com?key=valueの代わりに、url.com/key/value?のようなよりRESTfulなURLを使用できます。次に、ルートを次のように定義します。

.when('/albums', ...)
.when('/albums/id/:album_id', ...)

または多分

.when('/albums', ...)
.when('/albums/:album_id', ...)
26
Mark Rajcok

ルートがクエリ文字列で機能しないことは正しいですが、それは、ルートを切り替えるときにページ間でデータを渡すためにクエリ文字列を使用できないことを意味しません！ルートパラメータの明白な制限は、ページをリロードしないと更新できないことです。新しいレコードを保存した後など、これが望ましくない場合があります。元のルートパラメーターは0（新しいレコードを示すため）でしたが、ユーザーがページを更新すると新しく保存されたレコードが表示されるように、ajaxから返された正しいIDで更新する必要があります。ルートパラメータを使用してこれを行う方法はありませんが、代わりにクエリ文字列を使用してこれを実現できます。

秘密は、ルートを変更するときにクエリ文字列を含めないことです。これは、ルートテンプレートと一致しないためです。できることは、ルートを変更してからクエリ文字列パラメーターを適用することです。基本的に

$location.path('/RouteTemplateName').search('queryStringKey', value).search( ...

ここでの利点は、$ routeParamsサービスがクエリ文字列値を実際のルートパラメーターと同じように扱うため、コードを更新して異なる処理を行う必要さえないことです。ルート定義にreloadOnSearch：falseを含めることで、ページをリロードせずにパラメーターを更新できるようになりました。

64
Josh

_$location_のsearchメソッドを見ることができます（ docs ）。 URLにいくつかのキー/値を追加できます。

たとえば、$location.search({"a":"b"});は次のURLを返します：_http://www.example.com/base/path?a=b_。

14
François Petitit

ルートパラメータを使用する

var Ctrl = function($scope, $params) {
  if($params.filtered) {
    //make sure that the ID is there and use a different URL for the JSON data
  }
  else {
    //use the URL for JSON data that fetches all the data
  }
};

Ctrl.$inject = ['$scope', '$routeParams'];

http://docs.angularjs.org/api/ng.$ro​​uteParams

2
wizztjh

URLのクエリ文字列には2つのユースケースしか考えられません。

1）コントローラーでクエリ文字列のキー/値のペアが必要な場合（例：Hello {{name}}を出力し、？name = Johnなどのクエリ文字列で名前を取得する場合）、Franciosが言ったように$ locationを使用します。検索すると、クエリ文字列をオブジェクト（{name：John}）として取得し、スコープまたは何か（たとえば$ scope.name = location.search（）。name;）に入れることで使用できます。

（？page = Thatpage.htm）のように、クエリ文字列で指定された内容に基づいてルーターの別のページにリダイレクトする必要がある場合は、routerProvider.when（）でredirectTo：を作成すると、その検索オブジェクトが3番目のパラメーター。次のEggHeadビデオの2:10をご覧ください。 http://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto

基本的に、redirectTo：function（routeParams、path、search）{return search.page}

0
Reza