web-dev-qa-db-fra.com

Comment obtenir les paramètres d'URL avec AngularJS

Code source 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>

Code source 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>

Ici, les variables loc et loc1 renvoient toutes deux test comme résultat pour l'URL ci-dessus. Est-ce la bonne façon?

javascriptangularjsrouteparams
197
praveenpds

Je sais que c’est une vieille question, mais il m’a fallu un certain temps pour résoudre ce problème compte tenu de la faible documentation Angular. Le RouteProvider et routeParams est la voie à suivre. La route relie l'URL à votre contrôleur/vue et les routeParams peuvent être transmis au contrôleur.

Découvrez le projet graine angulaire . Dans le fichier app.js, vous trouverez un exemple pour le fournisseur d'itinéraire. Pour utiliser les paramètres, ajoutez-les simplement comme ceci:

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

Ensuite, dans votre contrôleur, injectez $ routeParams:

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

Avec cette approche, vous pouvez utiliser des paramètres avec une URL telle que: " http://www.example.com/view1/param1/param2 "

310
Jeff

Bien que le routage soit effectivement une bonne solution pour l'analyse des URL au niveau de l'application, vous pouvez utiliser le service $location de plus bas niveau, tel qu'injecté dans votre propre service ou contrôleur:

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

Cette syntaxe simple fonctionnera pour http://example.com/path?myParam=paramValue. Cependant, seulement si vous avez configuré le $locationProvider en mode HTML 5 avant:

$locationProvider.html5Mode(true);

Sinon, jetez un coup d’œil à la syntaxe http://example.com/#!/path?myParam=someValue "Hashbang" qui est un peu plus compliquée, mais qui offre l’avantage de travailler sur de vieux navigateurs ( non-HTML 5 compatible) également.

154
Javarome

Si vous utilisez ngRoute, vous pouvez injecter $routeParams dans votre contrôleur.

http://docs.angularjs.org/api/ngRoute/service/$routeParams

Si vous utilisez angular-ui-router, vous pouvez injecter $stateParams

https://github.com/angular-ui/ui-router/wiki/URL-Routing

32
jlents

J'ai trouvé une solution comment utiliser $ location.search () pour obtenir le paramètre de l'URL

d'abord dans l'URL, vous devez mettre la syntaxe "#" avant le paramètre tel que cet exemple

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

puis dans votre contrôleur, mettez $ location en fonction et utilisez $ location.search () pour obtenir le paramètre d'URL pour

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

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

}]);
8
Mekha Lomlao

Si les réponses déjà postées n'ont pas aidé, on peut essayer avec $ location.search (). MyParam; avec des URL http: //example.domain#? myParam = paramValue

1
ak1
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 "";
    }
0
Russell Hankins

Moyen le plus simple et le plus simple d’obtenir une valeur d’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"
0
Rohit Parte