Como obter os parâmetros de URL usando AngularJS

199

Código fonte 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 fonte 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>

Aqui, as variáveis loce as loc1duas retornam teste como resultado para o URL acima. Esta é a maneira correta?

praveenpds
fonte
1
Você pode conferir $ routeParams .
22430 Nick Elliner
Não está claro o que você está perguntando aqui ... os métodos dos métodos $ routeParams e $ location # devem ajudá-lo a começar
deck
7
Considere adicionar um comentário ao votar para que a pergunta possa ser melhorada. Obrigado.
praveenpds

Respostas:

314

Sei que essa é uma pergunta antiga, mas levei algum tempo para resolver isso, dada a escassa documentação Angular. O RouteProvider e routeParams são o caminho a percorrer. A rota liga o URL ao seu Controller / View e o routeParams pode ser passado para o controlador.

Confira o projeto de semente Angular . No app.js, você encontrará um exemplo para o provedor de rotas. Para usar parâmetros, basta anexá-los assim:

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

Em seguida, no seu controlador, injete $ routeParams:

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

Com essa abordagem, você pode usar parâmetros com um URL como: " http://www.example.com/view1/param1/param2 "

Jeff
fonte
2
Observe que a última linha deste exemplo });deve ser}]);
Andrew Lank 18/13
44
Também pode obter outros parâmetros arbitrários na forma string de consulta /view/1/2?other=12com $routeParams.other
DavidC
Eu acho que você tem o 'var param1' repetido no seu controlador. Não pude editar uma alteração tão simples.
Tom
Make angular é tão fácil, e também a sua resposta é tão bom descritivo
Mohammad Kermani
1
Atribua e envie exemplo: var param1 = "abc"; $ location.path ('/ view1 /:' + param1); $ route.reload ();
precisa saber é o seguinte
158

Embora o roteamento seja realmente uma boa solução para análise de URL no nível do aplicativo, convém usar o $locationserviço de nível mais baixo , injetado em seu próprio serviço ou controlador:

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

Essa sintaxe simples funcionará http://example.com/path?myParam=paramValue. No entanto, somente se você tiver configurado o $locationProviderno modo HTML 5 antes:

$locationProvider.html5Mode(true);

Caso contrário, consulte a http://example.com/#!/path?myParam=someValue "Hashbang" sintaxe que é um pouco mais complicada, mas tem o benefício de trabalhar em navegadores antigos (não compatíveis com HTML 5) como bem.

Javarome
fonte
16
parece que você precisa adicionar $ locationProvider.html5mode (true) como uma configuração de módulo da seguinte maneira: angular.module ("myApp", []). config (function ($ locationProvider) {$ locationProvider.html5Mode (true);});
Sq1020
4
E o html5Mode requer uma <base href="http://example.com/en/" />tag no seu index.html.
Cde
1
o que eu mais gosto na sua solução é que você pode até passar objetos e obtê-los como objeto.
21715 Shilan
2
Também é possível não adicionar a tag <base> e especificá-la da seguinte forma:.config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ enabled: true, requireBase: false }); }])
Guillaume
1
No Angular 1.5.8, não era necessário configurar $locationProviderpara que isso funcionasse. http://example.com/path#?someKey=someVal, Então $location.search().someKey // => 'someVal'
jiminikiz
11

Eu encontrei solução como usar $ location.search () para obter o parâmetro da URL

primeiro na URL você precisa colocar a sintaxe "#" antes do parâmetro como este exemplo

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

e, em seguida, no controlador, coloque $ location na função e use $ location.search () para obter o parâmetro URL para

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

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

}]);
Mekha Lomlao
fonte
Suas obras para os parâmetros de consulta e a resposta abaixo de @ Jeff é para variáveis de caminho
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
fonte
0

Maneira simples e fácil de obter valor de 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
fonte
0

Ao usar angularjs com express

No meu exemplo, eu estava usando angularjs com express fazendo o roteamento, então usar $ routeParams atrapalharia o meu roteamento. Usei o seguinte código para obter o que eu esperava:

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;
};

Isso recebe um modelo de URL e o caminho do local especificado. O que eu chamo de:

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

Juntando tudo, meu controlador é:

.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);
}]);

O resultado será:

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

Espero que isto seja útil a alguém!

Antonio
fonte