Comment obtenir les paramètres d'URL en utilisant 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 locet les loc1deux renvoient test comme résultat pour l'URL ci-dessus. C'est la bonne route?

Je sais que c'est une vieille question, mais il m'a fallu un certain temps pour résoudre ce problème étant donné la documentation angulaire clairsemée. Le RouteProvider et routeParams est le chemin à parcourir. L'itinéraire relie l'URL à votre Controller / View et les routeParams peuvent être transmis au contrôleur.

Découvrez le projet de semences angulaires . Dans app.js, vous trouverez un exemple pour le fournisseur d'itinéraire. Pour utiliser des 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 "

Bien que le routage soit en effet une bonne solution pour l'analyse d'URL au niveau de l'application, vous souhaiterez peut-être utiliser le service de plus bas niveau $location, tel qu'il est 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, uniquement si vous avez configuré le $locationProviderdans le mode HTML 5 avant:

$locationProvider.html5Mode(true);

Sinon, jetez un œil à la syntaxe http://example.com/#!/path?myParam=someValue "Hashbang" qui est un peu plus compliquée, mais qui a l'avantage de fonctionner sur d'anciens navigateurs (non compatibles HTML 5) comme bien.

Si vous utilisez ngRoute, vous pouvez injecter $routeParamsdans votre contrôleur

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

Si vous utilisez un routeur ui angulaire, vous pouvez injecter $stateParams

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

J'ai trouvé une solution pour 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 comme cet exemple

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

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

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

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

}]);

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

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

Un moyen simple et plus facile d'obtenir la valeur de l'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"

Lorsque vous utilisez angularjs avec express

Sur mon exemple, j'utilisais angularjs avec express faisant le routage, donc l'utilisation de $ routeParams gâcherait mon routage. J'ai utilisé le code suivant pour obtenir ce que j'attendais:

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

Celui-ci reçoit un modèle d'URL et le chemin de l'emplacement donné. Je l'appelle avec:

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

Assembler tout cela mon contrôleur est:

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

Le résultat sera:

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

J'espère que cela aide quelqu'un là-bas!