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;
        }]
    );
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

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

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