Cómo obtener los parámetros de url usando AngularJS

199

Código fuente HTML

<div ng-app="">
    <div ng-controller="test">
      <div ng-address-bar browser="html5"></div>
      <br><br>
      $location.url() = {{$location.url()}}<br>
      $location.search() = {{$location.search('keyword')}}<br>
      $location.hash() = {{$location.hash()}}<br>     
      keyword valus is={{loc}} and ={{loc1}}
  </div>
</div>

Código fuente AngularJS

<script>
function test($scope, $location) {
  $scope.$location = $location;
  $scope.ur = $scope.$location.url('www.html.com/x.html?keyword=test#/x/u');
  $scope.loc1 = $scope.$location.search().keyword ;    
    if($location.url().indexOf('keyword') > -1){    
        $scope.loc= $location.url().split('=')[1];
        $scope.loc = $scope.loc.split("#")[0]        
    }
  }
 </script>

Aquí las variables locy loc1ambos devuelven la prueba como resultado de la URL anterior. ¿Es esta la forma correcta?

praveenpds
fuente
1
Es posible que desee consultar $ routeParams .
Nick Heiner
No está claro lo que está preguntando aquí ... los documentos $ routeParams y $ location # métodos deberían ayudarlo a comenzar
mazo del
77
Considere agregar un comentario cuando vote hacia abajo para que la pregunta pueda mejorarse. Gracias.
praveenpds

Respuestas:

314

Sé que esta es una vieja pregunta, pero me tomó algo de tiempo resolver esto dada la escasa documentación angular. El RouteProvider y routeParams es el camino a seguir. La ruta conecta la URL a su Controlador / Vista y los routeParams se pueden pasar al controlador.

Echa un vistazo al proyecto de semillas Angular . Dentro de app.js encontrarás un ejemplo para el proveedor de ruta. Para usar parámetros, simplemente agréguelos de esta manera:

$routeProvider.when('/view1/:param1/:param2', {
    templateUrl: 'partials/partial1.html',    
    controller: 'MyCtrl1'
});

Luego, en su controlador, inyecte $ routeParams:

.controller('MyCtrl1', ['$scope','$routeParams', function($scope, $routeParams) {
  var param1 = $routeParams.param1;
  var param2 = $routeParams.param2;
  ...
}]);

Con este enfoque, puede usar parámetros con una URL como: " http://www.example.com/view1/param1/param2 "

Jeff
fuente
2
Tenga en cuenta que la última línea de este ejemplo });debería ser}]);
Andrew Lank
44
También puede obtener otros parámetros arbitrarios en el formulario de cadena de consulta /view/1/2?other=12con $routeParams.other
DavidC
Creo que tienes el 'var param1' repetido en tu controlador. No pude editar un cambio tan simple.
Tom
Angular lo hace tan fácil, y también su respuesta es muy descriptiva
Mohammad Kermani
1
Asignar y enviar ejemplo: var param1 = "abc"; $ location.path ('/ view1 /:' + param1); $ route.reload ();
Robot70
158

Si bien el enrutamiento es una buena solución para el análisis de URL de nivel de aplicación, es posible que desee utilizar el servicio de más bajo nivel $location, como se inyecta en su propio servicio o controlador:

var paramValue = $location.search().myParam; 

Esta sintaxis simple funcionará http://example.com/path?myParam=paramValue. Sin embargo, solo si configuró el $locationProvideren el modo HTML 5 antes:

$locationProvider.html5Mode(true);

De lo contrario, eche un vistazo a la sintaxis http://example.com/#!/path?myParam=someValue "Hashbang", que es un poco más complicada, pero tiene la ventaja de trabajar en navegadores antiguos (no compatibles con HTML 5) como bien.

Javarome
fuente
16
parece que tiene que agregar $ locationProvider.html5mode (true) como una configuración de módulo como esta: angular.module ("myApp", []). config (function ($ locationProvider) {$ locationProvider.html5Mode (true);});
sq1020
44
Y html5Mode requiere una <base href="http://example.com/en/" />etiqueta en su index.html.
cespon
1
Lo que me gusta de su solución es que incluso puede pasar objetos, y los obtiene como objeto.
Shilan
2
También es posible no agregar la etiqueta <base> y especificarla así:.config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ enabled: true, requireBase: false }); }])
Guillaume
1
En Angular 1.5.8, no tuve que configurar $locationProviderpara que esto funcione. http://example.com/path#?someKey=someVal, entonces $location.search().someKey // => 'someVal'
jiminikiz
11

Encontré una solución para usar $ location.search () para obtener el parámetro de la URL

primero en la URL, necesita poner la sintaxis "#" antes del parámetro como este ejemplo

"http://www.example.com/page#?key=value"

y luego en su controlador, ponga $ location en función y use $ location.search () para obtener el parámetro URL para

.controller('yourController', ['$scope', function($scope, $location) {

     var param1 = $location.search().param1; //Get parameter from URL

}]);
Mekha Lomlao
fuente
Funciona para parámetros de consulta y la respuesta a continuación de @jeff es para variables de ruta
Abdeali Chandanwala
1
function GetURLParameter(parameter) {
        var url;
        var search;
        var parsed;
        var count;
        var loop;
        var searchPhrase;
        url = window.location.href;
        search = url.indexOf("?");
        if (search < 0) {
            return "";
        }
        searchPhrase = parameter + "=";
        parsed = url.substr(search+1).split("&");
        count = parsed.length;
        for(loop=0;loop<count;loop++) {
            if (parsed[loop].substr(0,searchPhrase.length)==searchPhrase) {
                return decodeURI(parsed[loop].substr(searchPhrase.length));
            }
        }
        return "";
    }
Russell Hankins
fuente
0

Manera simple y fácil de obtener el valor de la URL

First add # to url (e:g -  test.html#key=value)

url in browser (https://stackover.....king-angularjs-1-5#?brand=stackoverflow)

var url = window.location.href 

(output: url = "https://stackover.....king-angularjs-1-5#?brand=stackoverflow")

url.split('=').pop()
output "stackoverflow"
Rohit Parte
fuente
0

Cuando se usa angularjs con express

En mi ejemplo, estaba usando angularjs con express haciendo el enrutamiento, por lo que usar $ routeParams podría estropear mi enrutamiento. Usé el siguiente código para obtener lo que esperaba:

const getParameters = (temp, path) => {
  const parameters = {};
  const tempParts = temp.split('/');
  const pathParts = path.split('/');
  for (let i = 0; i < tempParts.length; i++) {
    const element = tempParts[i];
    if(element.startsWith(':')) {
      const key = element.substring(1,element.length);
      parameters[key] = pathParts[i];
    }
  }
  return parameters;
};

Esto recibe una plantilla de URL y la ruta de la ubicación dada. Lo acabo de llamar con:

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $location.path()); 

Poniendo todo junto, mi controlador es:

.controller('TestController', ['$scope', function($scope, $window) {
  const getParameters = (temp, path) => {
    const parameters = {};
    const tempParts = temp.split('/');
    const pathParts = path.split('/');
    for (let i = 0; i < tempParts.length; i++) {
      const element = tempParts[i];
      if(element.startsWith(':')) {
        const key = element.substring(1,element.length);
        parameters[key] = pathParts[i];
      }
    }
    return parameters;
  };

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $window.location.pathname);
}]);

El resultado será:

{ table: "users", id: "1", place_id: "43", interval: "week" }

Espero que esto ayude a alguien por ahí!

Antonio
fuente