Vorrei leggere i valori dei parametri di query dell'URL usando AngularJS. Sto accedendo all'HTML con il seguente URL:
http://127.0.0.1:8080/test.html?target=bob
.
Come previsto, location.search
è "?target=bob"
.
Per accedere al valore di target, ho trovato vari esempi elencati sul web, ma nessuno di essi funziona in AngularJS 1.0.0rc10. In particolare, i seguenti sono tutti undefined
:
$location.search.target
.$location.search['target']
$location.search()['target']
Qualcuno sa cosa funzionerà? (Sto usando $location
come parametro al mio controller)
Aggiornare:
Ho postato una soluzione qui sotto, ma non ne sono completamente soddisfatto.
La documentazione in Developer Guide: Angular Services: Using $location afferma quanto segue su $location
:
Quando dovrei usare $location?
Ogni volta che la tua applicazione ha bisogno di reagire ad un cambiamento nell'attuale URL o se vuoi cambiare l'URL corrente nel browser.
Per il mio scenario, la mia pagina sarà aperta da una pagina web esterna con un parametro di query, quindi non sto "reagendo a un cambiamento nell'URL corrente" di per sé. Quindi forse $location
non è lo strumento giusto per il lavoro (per i brutti dettagli, vedi la mia risposta qui sotto). Ho quindi cambiato il titolo di questa domanda da "Come leggere i parametri di query in AngularJS usando $location?" a "Qual è il modo più conciso per leggere i parametri di query in AngularJS?". Ovviamente potrei semplicemente usare javascript e l'espressione regolare per analizzare location.search
, ma andare così a basso livello per qualcosa di così basilare offende davvero la mia sensibilità di programmatore.
Quindi: c'è un modo migliore per usare $location
di quello che faccio nella mia risposta, o c'è un'alternativa concisa?
Puoi iniettare $routeParams (richiede ngRoute) nel tuo controller. Ecco un esempio dalla documentazione:
// 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: Puoi anche ottenere e impostare i parametri della query con il servizio $location (disponibile in ng
), in particolare il suo metodo search
: $location.search().
I $routeParams sono meno utili dopo il caricamento iniziale del controllore; $location.search()
può essere chiamato in qualsiasi momento.
È un bene che tu sia riuscito a farlo funzionare con la modalità html5, ma è anche possibile farlo funzionare in modalità hashbang.
Si potrebbe semplicemente usare:
$location.search().target
per avere accesso al parametro di ricerca 'target'.
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>
Per dare una risposta parziale alla mia stessa domanda, ecco un esempio funzionante per i browser 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 chiave era chiamare $locationProvider.html5Mode(true);
come fatto sopra. Ora funziona quando si apre http://127.0.0.1:8080/test.html?target=bob
. Non sono contento del fatto che non funzionerà nei vecchi browser, ma potrei usare questo approccio comunque.
Un'alternativa che funzionerebbe con i vecchi browser sarebbe quella di abbandonare la chiamata html5mode(true)
e usare invece il seguente indirizzo con hash+slash:
http://127.0.0.1:8080/test.html#/?target=bob
.
La documentazione pertinente è in Developer Guide: Angular Services: Using $location (strano che la mia ricerca su Google non l'abbia trovata...).