it-swarm.com.de

wie kann man den Querystring in eckigen Routen passieren?

Ich arbeite mit AngularJS-Routen und versuche zu sehen, wie mit Abfragezeichenfolgen gearbeitet wird (z. B. url.com?key=value). Angular versteht die Route nicht, die ein Schlüssel-Wert-Paar für denselben Namen enthält. 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

Ich glaube nicht, dass Routen mit Abfragezeichenfolgen arbeiten. Anstelle von url.com?key=value können Sie eine RESTful-URL wie url.com/key/value? verwenden. Dann würden Sie Ihre Routen wie folgt definieren:

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

oder vielleicht

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

Es ist richtig, dass Routen nicht mit Abfragezeichenfolgen funktionieren. Dies bedeutet jedoch nicht, dass Sie keine Abfragezeichenfolgen verwenden können, um beim Wechseln von Routen Daten zwischen den Seiten zu übergeben. Die krasse Einschränkung bei den Routenparametern besteht darin, dass sie nicht aktualisiert werden können, ohne die Seite neu zu laden. Manchmal ist dies nicht erwünscht, zum Beispiel nach dem Speichern eines neuen Datensatzes. Der ursprüngliche Routenparameter war 0 (um einen neuen Datensatz anzuzeigen), und nun möchten Sie ihn mit der korrekten ID aktualisieren, die über ajax zurückgegeben wird. Wenn der Benutzer die Seite aktualisiert, wird der neu gespeicherte Datensatz angezeigt. Es gibt keine Möglichkeit, dies mit Routenparametern zu tun, aber dies kann stattdessen mithilfe von Abfragezeichenfolgen erfolgen. 

Das Geheimnis besteht darin, die Abfragezeichenfolge beim Ändern der Route nicht einzuschließen, da dies dazu führt, dass die Routenvorlage nicht übereinstimmt. Sie können die Route ändern und dann die Abfragezeichenfolgeparameter anwenden. Grundsätzlich gilt

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

Das Schöne daran ist, dass der $ routeParams-Dienst Abfragezeichenfolgen identisch mit den realen Routenparametern behandelt, sodass Sie nicht einmal Ihren Code aktualisieren müssen, um sie anders zu behandeln. Jetzt können Sie die Parameter aktualisieren, ohne die Seite erneut zu laden, indem Sie reloadOnSearch: false in Ihre Routendefinition aufnehmen. 

62
Josh

Sie können sich die search-Methode in $location ( docs ) ansehen. Hier können Sie der URL einige Schlüssel/Werte hinzufügen.

Beispielsweise gibt $location.search({"a":"b"}); diese URL zurück: http://www.example.com/base/path?a=b.

14

verwenden Sie Routenparameter 

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.$routeParams

2
wizztjh

Ich kann mir nur zwei Verwendungsmöglichkeiten für den Querstring in URL vorstellen:

1) Wenn Sie das Schlüssel/Wert-Paar Ihres Querstrings in Ihrem Controller benötigen (z. B. um Hallo {{Name}} zu drucken und den Namen in Querystring zu erhalten, z. B.? Name = John), dann verwenden Sie, wie Francios sagte, einfach $ location. suchen und Sie erhalten die Querzeichenfolge als Objekt ({name: John}), das Sie dann verwenden können, indem Sie sie in den Gültigkeitsbereich oder etwas anderes setzen (z. B. $ scope.name = location.search (). name;). 

Wenn Sie zu einer anderen Seite Ihres Routers umleiten müssen, die sich auf die Angaben in der Abfrageliste bezieht (? Page = Thatpage.htm), erstellen Sie ein redirectTo: in Ihrem routerProvider.when (), und das Suchobjekt wird als dieses empfangen dritter Parameter. Schauen Sie sich 2:10 des folgenden EggHead-Videos an: http://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto

grundsätzlich redirectTo: function (routeParams, Pfad, Suche) {return search.page}

0
Reza