I'gostaria de ler os valores dos parâmetros de consulta de URL usando AngularJS. I'm acessando o HTML com a seguinte URL:
13 de Janeiro de 2010
Como esperado, location.search
é "?target=bob"
.
Para acessar o valor de target, I'encontrei vários exemplos listados na web, mas nenhum deles funciona no AngularJS 1.0.0rc10. Em particular, os seguintes são todos `infinidos':
$localização.search.target
$location.search['target']
$location.search()['target']
Alguém sabe o que vai funcionar? (I'estou usando $location
como parâmetro para o meu controlador)
Atualização:
I'postei uma solução abaixo, mas I'não estou totalmente satisfeito com ela. A documentação em Developer Guide: Angular Services: Using $location afirma o seguinte sobre `$location':
Quando devo usar $location?
Sempre que a sua aplicação precisar de reagir a uma alteração na URL ou se você quiser alterar o URL atual no navegador.
Para o meu cenário, a minha página será aberta a partir de uma página web externa com um parâmetro de consulta, portanto I'm não "reagindo a uma mudança na URL" atual; por si só. Então talvez $location
seja't a ferramenta certa para o trabalho (para os detalhes feios, veja minha resposta abaixo). I'portanto mudou o título desta pergunta de "Como ler parâmetros de consulta em AngularJS usando $location?" para "Qual'é a maneira mais concisa de ler parâmetros de consulta em AngularJS?". Obviamente eu poderia apenas usar javascript e expressão regular para parse location.search
, mas ir tão baixo nível para algo tão básico realmente ofende minha sensibilidade de programador.
Então: existe uma maneira melhor de utilizar $location
do que eu na minha resposta, ou existe uma alternativa concisa?
Você pode injetar $routeParams (requer ngRoute) em seu controlador. Aqui's um exemplo do docs:
// 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: Você também pode obter e definir parâmetros de consulta com o serviço $location (disponível em ng
), particularmente seu método search
: $location.search().
$routeParams são menos úteis após a carga inicial do controlador's; $location.search()
pode ser chamado a qualquer momento.
Ainda bem que você'conseguiu pô-lo a funcionar com o modo html5 mas também é possível pô-lo a funcionar no modo hashbang.
Você poderia simplesmente usar:
$location.search().target
para obter acesso ao 'target' parâmetro de busca.
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>
Para dar uma resposta parcial à minha própria pergunta, aqui está uma amostra de trabalho para os navegadores 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>
A chave era chamar $locationProvider.html5Mode(true);
como foi feito acima. Agora funciona ao abrir `http://127.0.0.1:8080/test.html?target=bob'. I'não estou feliz com o fato de que ele ganhou'não funciona em navegadores mais antigos, mas eu poderia usar esta abordagem de qualquer forma.
Uma alternativa que funcionaria com navegadores mais antigos seria abandonar a chamada html5mode(true)
e utilizar o seguinte endereço com hash+slash em seu lugar:
http://127.0.0.1:8080/test.html#/?target=bob
A documentação relevante está em Developer Guide: Angular Services: Using $location (estranho que minha busca no google não't encontrei isto...).