¿Cuál es la forma más concisa de leer los parámetros de consulta en AngularJS?

Me gustaría leer los valores de los parámetros de consulta URL usando AngularJS. Estoy accediendo al HTML con la siguiente URL:

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

Como era de esperar, location.search es "?target=bob" . Para acceder al valor del objective , he encontrado varios ejemplos enumerados en la web, pero ninguno de ellos funciona en AngularJS 1.0.0rc10. En particular, los siguientes no están undefined :

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

Alguien sabe lo que funcionará? (Estoy usando $location como parámetro para mi controlador)


Actualizar:

He publicado una solución a continuación, pero no estoy del todo satisfecho con ella. La documentación en Developer Guide: Angular Services: el uso de $ location indica lo siguiente sobre $location :

¿Cuándo debería usar $ location?

Cada vez que su aplicación necesite reactjsr ante un cambio en la URL actual o si desea cambiar la URL actual en el navegador.

Para mi caso, mi página se abrirá desde una página web externa con un parámetro de consulta, por lo que no estoy “reactjsndo a un cambio en la URL actual” per se. Así que tal vez $location no es la herramienta adecuada para el trabajo (para los detalles desagradables, vea mi respuesta a continuación). Por lo tanto, he cambiado el título de esta pregunta de “¿Cómo leer los parámetros de consulta en AngularJS usando $ location?” a “¿Cuál es la forma más concisa de leer los parámetros de consulta en AngularJS?”. Obviamente, podría usar javascript y expresión regular para analizar location.search , pero ir por ese nivel bajo para algo tan básico realmente ofende las sensibilidades de mi progtwigdor.

Entonces, ¿hay una forma mejor de usar $location que en mi respuesta, o hay una alternativa concisa?

Puede inyectar $ routeParams (requiere ngRoute ) en su controlador. Aquí hay un ejemplo de los 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'} 

EDITAR: También puede obtener y establecer parámetros de consulta con el servicio $ location (disponible en ng ), particularmente su método de search : $ location.search () .

$ routeParams son menos útiles después de la carga inicial del controlador; $location.search() se puede llamar en cualquier momento.

Es bueno que haya logrado que funcione con el modo html5, pero también es posible hacerlo funcionar en el modo hashbang.

Simplemente puedes usar:

 $location.search().target 

para obtener acceso al parámetro de búsqueda ‘objective’.

Para la referencia, aquí está el jsFiddle de trabajo: 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 una respuesta parcial a mi propia pregunta, aquí hay una muestra de trabajo para los navegadores HTML5:

        Target: {{target}}

La clave era llamar $locationProvider.html5Mode(true); como se hizo arriba. Ahora funciona al abrir http://127.0.0.1:8080/test.html?target=bob . No estoy contento con el hecho de que no funcionará en navegadores más antiguos, pero de todos modos podría usar este enfoque.

Una alternativa que podría funcionar con navegadores más antiguos sería soltar la html5mode(true) y usar la siguiente dirección con hash + slash en su lugar:

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

La documentación relevante se encuentra en Developer Guide: Angular Services: Utilizando $ location (es extraño que mi búsqueda en Google no haya encontrado esto …).

Se puede hacer de dos maneras:

  1. Usando $routeParams

La mejor y recomendada solución es usar $routeParams en su controlador. Requiere que se ngRoute módulo ngRoute .

  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() .

Hay una advertencia aquí. Funcionará solo con el modo HTML5. Por defecto, no funciona para la URL que no tiene hash ( # ) en ella http://localhost/test?param1=abc&param2=def

Puede hacer que funcione agregando #/ en la URL. http://localhost/test#/?param1=abc&param2=def

$location.search() para devolver un objeto como:

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

$ location.search () solo funcionará con el modo HTML5 activado y solo con el navegador compatible.

Esto funcionará siempre:

$ window.location.search

Solo para veranear.

Si su aplicación se carga desde enlaces externos, angular no detectará esto como un cambio de URL, por lo que $ loaction.search () le daría un objeto vacío. Para resolver esto, necesita establecer lo siguiente en la configuración de su aplicación (app.js)

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

Solo una precisión a la respuesta de Ellis Whitehead. $locationProvider.html5Mode(true); no funcionará con la nueva versión de angularjs sin especificar la URL base para la aplicación con una etiqueta o estableciendo el parámetro requireBase en false

Del doc :

Si configura $ location para usar html5Mode (history.pushState), debe especificar la URL base para la aplicación con una etiqueta o configurar $ locationProvider para que no requiera una etiqueta base pasando un objeto de definición con requireBase: false a $ locationProvider. html5Mode ():

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

también puedes usar $ location. $$ search.yourparameter

esto puede ayudarte

¿Cuál es la forma más concisa de leer los parámetros de consulta en 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

Encontré que para un SPA HTML5Mode causa muchos errores 404 y no es necesario hacer que $ location.search funcione en este caso. En mi caso, quiero capturar un parámetro de cadena de consulta de URL cuando un usuario llega a mi sitio, independientemente de la “página” a la que inicialmente se vinculen, y poder enviarlos a esa página una vez que inician sesión. Así que solo capturo todo esas cosas en la 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']; } ... } 

luego, después del inicio de sesión, puedo decir $ state.go ($ rootScope.initialPage, $ rootScope.initialParams)

Es un poco tarde, pero creo que tu problema fue tu URL. Si en lugar de

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

tu tenias

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

Estoy bastante seguro de que hubiera funcionado. Angular es muy exigente con su # /