comment passer la querystring dans les routes angulaires ?

Question

Je travaille avec des routes AngularJS, et j'essaie de voir comment travailler avec des chaînes de requête (par exemple, url.com?key=value ). Angular ne comprend pas la route qui contient une paire clé-valeur pour le même nom. 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;
        }]
    );

Answer 1

Il est vrai que les routes ne fonctionnent pas avec les chaînes de requête, mais cela ne signifie pas que vous ne pouvez pas utiliser les chaînes de requête pour transmettre des données entre les pages lorsque vous changez de route ! La limitation flagrante des paramètres de route est qu'ils ne peuvent pas être mis à jour sans recharger la page. Parfois, cela n'est pas souhaité, par exemple après avoir enregistré un nouvel enregistrement. Le paramètre de route original était un 0 (pour signifier un nouvel enregistrement), et vous voulez maintenant le mettre à jour avec l'ID correct renvoyé par ajax de sorte que si l'utilisateur rafraîchit la page, il voit son nouvel enregistrement sauvegardé. Il n'y a aucun moyen de faire cela avec les paramètres de route, mais cela peut être accompli en utilisant des chaînes de requête à la place.

Le secret consiste à ne pas inclure la chaîne de requête lors de la modification de l'itinéraire, car elle ne correspondrait pas au modèle d'itinéraire. Ce que vous pouvez faire, c'est modifier l'itinéraire, puis appliquer les paramètres de la chaîne d'interrogation. En gros,

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

La beauté de la chose, c'est que le service $routeParams traite les valeurs des chaînes de requête de la même manière que les vrais paramètres de route. Vous n'aurez donc même pas à mettre à jour votre code pour les traiter différemment. Vous pouvez maintenant mettre à jour les paramètres sans recharger la page en incluant reloadOnSearch : false dans la définition de votre itinéraire.

Answer 2

Je ne pense pas que les routes fonctionnent avec des chaînes de requête. Au lieu de url.com?key=value pouvez-vous utiliser une URL plus RESTful comme url.com/key/value? Ensuite, vous définissez vos itinéraires comme suit :

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

ou peut-être

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

Answer 3

Vous pourriez regarder le search méthode dans $location ( docs ). Il vous permet d'ajouter certaines clés/valeurs à l'URL.

Par exemple, $location.search({"a":"b"}); renverra cette URL : http://www.example.com/base/path?a=b .

Answer 4

Utiliser les paramètres de la route

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

Answer 5

Je ne vois que deux cas d'utilisation de la chaîne de recherche dans l'URL :

1) Si vous avez besoin de la paire clé/valeur de votre chaîne de requête dans votre contrôleur (par exemple, pour imprimer Hello {{name}} et obtenir le nom dans la chaîne de requête comme ?name=John), alors, comme Francios l'a dit, utilisez simplement $location.search et vous obtiendrez la chaîne de requête sous la forme d'un objet ({name:John}) que vous pouvez ensuite utiliser en le plaçant dans scope ou autre (par exemple, $scope.name = location.search().name ;).

Si vous devez rediriger vers une autre page dans votre routeur en fonction de ce qui est donné dans la chaîne de requête, comme (?page=Thatpage.htm), créez un redirectTo : dans votre routerProvider.when() et il recevra l'objet de recherche comme troisième paramètre. Regardez à 2:10 de la vidéo suivante de EggHead : http://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto

basiquement, redirectTo:function(routeParams,path, search){return search.page}