web-dev-qa-db-fra.com

comment passer des chaînes de canaux angulaires?

Je travaille avec des itinéraires 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;
        }]
    );
angularjsangularjs-routing
35
Amb

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

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

ou peut-être

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

Il est exact que les itinéraires ne fonctionnent pas avec les chaînes de requête. Toutefois, cela ne signifie pas que vous ne pouvez pas utiliser de chaînes de requête pour transmettre des données entre les pages lors du changement de route! La limitation flagrante avec les 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 la sauvegarde d'un nouvel enregistrement. Le paramètre de routage d'origine était 0 (pour indiquer un nouvel enregistrement) et vous souhaitez maintenant le mettre à jour avec l'ID correct renvoyé par ajax afin que, si l'utilisateur actualise la page, il voie le nouvel enregistrement enregistré. Il n’ya aucun moyen de le faire avec des paramètres de route, mais cela peut être accompli en utilisant plutôt des chaînes de requête. 

Le secret ne consiste pas à inclure la chaîne de requête lors du changement de route, car cela ne lui permettra pas de correspondre au modèle de route. Ce que vous pouvez faire est de modifier l'itinéraire puis d'appliquer les paramètres de chaîne de requête. Fondamentalement

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

La beauté ici est que le service $ routeParams traite les valeurs de chaîne de requête de la même manière que les paramètres de route réels, de sorte que vous n’aurez 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. 

62
Josh

Vous pouvez regarder la méthode search dans $location ( docs ). Cela vous permet d'ajouter des clés/valeurs à l'URL.

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

14
François Petitit

utiliser les paramètres de 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

2
wizztjh

Je ne peux penser qu'à deux cas d'utilisation de la chaîne de requête 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 une chaîne de requête telle que? Name = John), alors comme Francios l'a dit, utilisez simplement $ location. search et vous obtiendrez la chaîne de requête sous forme d'objet ({name: John}) que vous pourrez ensuite utiliser en le mettant dans la portée ou quelque chose de ce genre (par exemple $ scope.name = location.search (). name;). 

Si vous devez rediriger vers une autre page de votre routeur en fonction de ce qui est indiqué 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 sous la forme troisième paramètre. Regardez 2:10 de la vidéo EggHead suivante: http://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto

en gros, redirectTo: function (routeParams, chemin d'accès, recherche) {return search.page}

0
Reza