Quelle est la manière la plus concise de lire les paramètres de requête dans AngularJS ?
J’aimerais lire les valeurs des paramètres de requête d’une URL en utilisant AngularJS. J'accède au HTML avec l'URL suivante :
http://127.0.0.1:8080/test.html?target=bob
Comme prévu, location.search est "?target=bob".
Pour accéder à la valeur de target, j'ai trouvé plusieurs exemples répertoriés sur le web, mais aucun d'entre eux ne fonctionne dans AngularJS 1.0.0rc10. En particulier, les exemples suivants sont tous undefined :
$location.search.target$location.search['target' ;]$location.search()['target' ;]
Quelqu'un sait-il ce qui va fonctionner ? (J'utilise $location comme paramètre à mon contrôleur)
Mise à jour :
J'ai posté une solution ci-dessous, mais je n'en suis pas entièrement satisfait.
La documentation de [Developer Guide : Angular Services : Using $location][1] indique ce qui suit à propos de $location :
Quand dois-je utiliser $location ?
Chaque fois que votre application doit réagir à un changement de l'URL courante URL ou si vous voulez changer l'URL actuelle dans le navigateur.
Dans mon scénario, ma page sera ouverte à partir d'une page Web externe avec un paramètre de requête, donc je ne réagis pas à un changement de l'URL actuelle. Donc peut-être que $location n'est pas le bon outil pour ce travail (pour les vilains détails, voir ma réponse ci-dessous). J'ai donc changé le titre de cette question de "Comment lire les paramètres de requête dans AngularJS en utilisant $location?" ; à "Quelle est la manière la plus concise de lire les paramètres de requête dans AngularJS?" ;. De toute évidence, je pourrais simplement utiliser javascript et une expression régulière pour analyser location.search, mais un niveau aussi bas pour quelque chose d'aussi élémentaire heurte ma sensibilité de programmeur.
Donc : y a-t-il une meilleure façon d'utiliser $location que ce que je fais dans ma réponse, ou existe-t-il une alternative concise ?
Vous pouvez injecter $routeParams (nécessite ngRoute) dans votre contrôleur. Voici un exemple tiré de la documentation :
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}EDIT : Vous pouvez également obtenir et définir des paramètres de requête avec le service $location (disponible dans ng), en particulier sa méthode search : $location.search().
Les $routeParams sont moins utiles après le chargement initial du contrôleur ; $location.search() peut être appelé à tout moment.
C'est bien que vous ayez réussi à le faire fonctionner en mode html5, mais il est également possible de le faire fonctionner en mode hashbang.
Vous pourriez simplement utiliser :
$location.search().targetpour accéder au paramètre de recherche "target".
Pour référence, voici le jsFiddle fonctionnel : http://web.archive.org/web/20130317065234/
var myApp = angular.module('myApp', []);
function MyCtrl($scope, $location) {
$scope.location = $location;
$scope.$watch('location.search()', function() {
$scope.target = ($location.search()).target;
}, true);
$scope.changeTarget = function(name) {
$location.search('target', name);
}
}<div ng-controller="MyCtrl">
<a href="#!/test/?target=Bob">Bob</a>
<a href="#!/test/?target=Paul">Paul</a>
<hr/>
URL 'target' param getter: {{target}}<br>
Full url: {{location.absUrl()}}
<hr/>
<button ng-click="changeTarget('Pawel')">target=Pawel</button>
</div>
Pour donner une réponse partielle à ma propre question, voici un échantillon fonctionnel pour les navigateurs HTML5 :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<script>
angular.module('myApp', [], function($locationProvider) {
$locationProvider.html5Mode(true);
});
function QueryCntl($scope, $location) {
$scope.target = $location.search()['target'];
}
</script>
</head>
<body ng-controller="QueryCntl">
Target: {{target}}<br/>
</body>
</html>La clé était d'appeler $locationProvider.html5Mode(true); comme fait ci-dessus. Cela fonctionne maintenant en ouvrant http://127.0.0.1:8080/test.html?target=bob. Le fait que cela ne fonctionne pas dans les anciens navigateurs ne m'enchante pas, mais je vais peut-être utiliser cette approche de toute façon.
Une alternative qui fonctionnerait avec les anciens navigateurs serait de laisser tomber l'appel html5mode(true) et d'utiliser l'adresse suivante avec hash+slash à la place :
http://127.0.0.1:8080/test.html#/?target=bob
La documentation correspondante se trouve à l'adresse [Developer Guide : Angular Services : Using $location][1] (étrange que ma recherche sur Google n'ait pas permis de la trouver...).
