36

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

5 に答える 5

65

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

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

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

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

于 2014-09-17T20:38:37.410 に答える
26

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

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

または多分

.when('/albums', ...)
.when('/albums/:album_id', ...)
于 2013-03-01T16:02:23.340 に答える
14

( docssearch ) のメソッドを見ることができます。URL にいくつかのキー/値を追加できます。$location

たとえば、次の$location.search({"a":"b"});URL が返されます: http://www.example.com/base/path?a=b.

于 2013-12-11T15:09:54.663 に答える
2

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

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

于 2013-03-01T11:04:02.837 に答える
0

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}

于 2014-01-02T17:17:18.410 に答える