Qual é a maneira mais concisa de ler os parâmetros de consulta no AngularJS?

Gostaria de ler os valores dos parâmetros de consulta de URL usando o AngularJS. Estou acessando o HTML com o seguinte URL:

http://127.0.0.1:8080/test.html?target=bob

Como esperado, location.search é "?target=bob" . Para acessar o valor do destino , encontrei vários exemplos listados na web, mas nenhum deles funciona no AngularJS 1.0.0rc10. Em particular, os seguintes são todos undefined :

  • $location.search.target
  • $location.search['target']
  • $location.search()['target']

Alguém sabe o que vai funcionar? (Eu estou usando $location como um parâmetro para o meu controlador)


Atualizar:

Eu publiquei uma solução abaixo, mas não estou totalmente satisfeito com ela. A documentação no Guia do desenvolvedor: Angular Services: usando $ location indica o seguinte sobre $location :

Quando devo usar a localização $?

Sempre que seu aplicativo precisar reagir a uma alteração no URL atual ou se você quiser alterar o URL atual no navegador.

Para meu cenário, minha página será aberta a partir de uma página da Web externa com um parâmetro de consulta, portanto, não estou “reagindo a uma alteração no URL atual” em si. Então talvez a $location não seja a ferramenta certa para o trabalho (para os detalhes mais desagradáveis, veja minha resposta abaixo). Por isso, mudei o título desta pergunta de “Como ler parâmetros de consulta no AngularJS usando $ location?” para “Qual é a maneira mais concisa de ler os parâmetros de consulta no AngularJS?”. Obviamente, eu poderia apenas usar JavaScript e expressões regulares para analisar location.search , mas ir a esse nível baixo para algo tão básico realmente ofende minhas sensibilidades de programador.

Então, existe uma maneira melhor de usar $location que eu na minha resposta, ou existe uma alternativa concisa?

Você pode injetar $ routeParams (requer ngRoute ) no seu controlador. Aqui está um exemplo dos documentos:

 // 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 de search : $ location.search () .

$ routeParams são menos úteis após o carregamento inicial do controlador; $location.search() pode ser chamado a qualquer momento.

É bom que você tenha conseguido trabalhar com o modo html5, mas também é possível fazê-lo funcionar no modo hashbang.

Você poderia simplesmente usar:

 $location.search().target 

para obter access ao parâmetro de pesquisa “alvo”.

Para a referência, aqui está o trabalho jsFiddle: http://web.archive.org/web/20130317065234/http://jsfiddle.net/PHnLb/7/

 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); } } 
 
Bob Paul
URL 'target' param getter: {{target}}
Full url: {{location.absUrl()}}

Para dar uma resposta parcial à minha própria pergunta, aqui está uma amostra de trabalho para navegadores HTML5:

        Target: {{target}}

A chave era chamar $locationProvider.html5Mode(true); como feito acima. Agora funciona ao abrir http://127.0.0.1:8080/test.html?target=bob . Eu não estou feliz com o fato de que não funcionará em navegadores mais antigos, mas eu poderia usar essa abordagem de qualquer maneira.

Uma alternativa que funcionaria com navegadores mais antigos seria descartar a html5mode(true) e usar o seguinte endereço com hash + slash:

http://127.0.0.1:8080/test.html#/?target=bob

A documentação relevante está em Developer Guide: Angular Services: Usando $ location (estranho que minha pesquisa no google não tenha encontrado isso …).

Isso pode ser feito de duas maneiras:

  1. Usando $routeParams

A melhor e recomendada solução é usar $routeParams no seu controlador. Requer que o módulo ngRoute seja instalado.

  function MyController($scope, $routeParams) { // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby // Route: /Chapter/:chapterId/Section/:sectionId // $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'} var search = $routeParams.search; } 
  1. Usando $location.search() .

Há uma ressalva aqui. Ele funcionará apenas no modo HTML5. Por padrão, ele não funciona para a URL que não possui hash ( # ) em http://localhost/test?param1=abc&param2=def

Você pode fazê-lo funcionar adicionando #/ no URL. http://localhost/test#/?param1=abc&param2=def

$location.search() para retornar um object como:

 { param1: 'abc', param2: 'def' } 

$ location.search () funcionará apenas com o modo HTML5 ativado e somente no navegador de suporte.

Isso funcionará sempre:

$ window.location.search

Apenas para summerize.

Se o seu aplicativo está sendo carregado de links externos, então o angular não detectará isso como uma alteração de URL, então $ loaction.search () lhe dará um object vazio. Para resolver isso, você precisa definir o seguinte na configuração do aplicativo (app.js)

 .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .otherwise({ redirectTo: '/' }); $locationProvider.html5Mode(true); }]); 

Apenas uma precisão para a resposta de Ellis Whitehead. $locationProvider.html5Mode(true); não funcionará com a nova versão do angularjs sem especificar o URL base para o aplicativo com uma tag ou configurando o parâmetro requireBase como false

Do doc :

Se você configurar $ location para usar html5Mode (history.pushState), será necessário especificar a URL base do aplicativo com uma tag ou configurar $ locationProvider para não exigir uma tag base passando um object de definição com requireBase: false para $ locationProvider. html5Mode ():

 $locationProvider.html5Mode({ enabled: true, requireBase: false }); 

você também pode usar $ location. $$ search.yourparameter

isso pode ajudar você

Qual é a maneira mais concisa de ler os parâmetros de consulta no AngularJS?

 // 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'}        Target: {{target}}
($location.search()).target

Descobri que para um SPA HTML5Mode causa muitos problemas de erro 404, e não é necessário fazer $ location.search funcionar neste caso. No meu caso, eu quero capturar um parâmetro de string de consulta de URL quando um usuário acessa o meu site, independentemente de qual “página” eles inicialmente vinculam, e ser capaz de enviá-los para essa página uma vez que eles se conectem. essas coisas no app.run

 $rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) { if (fromState.name === "") { e.preventDefault(); $rootScope.initialPage = toState.name; $rootScope.initialParams = toParams; return; } if ($location.search().hasOwnProperty('role')) { $rootScope.roleParameter = $location.search()['role']; } ... } 

depois, depois do login, posso dizer $ state.go ($ rootScope.initialPage, $ rootScope.initialParams)

Está um pouco atrasado, mas acho que o seu problema foi o seu URL. Se em vez de

 http://127.0.0.1:8080/test.html?target=bob 

você tinha

 http://127.0.0.1:8080/test.html#/?target=bob 

Tenho certeza que teria funcionado. Angular é muito exigente com o seu # /