Comment obtenir les paramètres d'URL à l'aide de js angulaire

Question

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>
 

Angular.js code source

 <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 le test comme résultat pour l'URL ci-dessus. C'est la bonne route?

Answer 1

Je sais que c'est une vieille question, mais il m'a fallu un certain temps pour régler cette question compte tenu du peu d'éléments Angulaires de la documentation. Le RouteProvider et routeParams est le chemin à parcourir. La route des fils de l'URL de votre Contrôleur/Vue et la routeParams peuvent être passés dans le contrôleur.

Découvrez l' Angulaire de graines de projet. Au sein de l'app.js vous trouverez un exemple pour le fournisseur d'itinéraire. Pour utiliser params ajouter simplement comme ceci:

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

Puis dans votre contrôleur injecter $routeParams:

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

Answer 2

Alors que le routage est en effet une bonne solution pour application au niveau de l'analyse d'URL, vous pouvez utiliser le plus bas niveau $service de localisation, comme injecté dans votre propre service ou de contrôleur:

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

Cette syntaxe simple va travailler pour http://example.com/path?myParam=someValue. Toutefois, uniquement si vous avez configuré l' $locationProvider dans le mode html5 avant:

$locationProvider.html5Mode(true);

Sinon, jetez un oeil à la http://example.com/#!/chemin d'accès?myParam=someValue "Hashbang" syntaxe qui est un peu plus compliqué, mais ont l'avantage de travailler sur les anciens navigateurs (non html5 compatible).

Answer 3

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

Answer 4

Vous souhaiterez peut-être utiliser Angulaire intégré de routage plutôt que de le faire vous-même. Voici quelques tutoriels pour commencer:

• Angulaire Tutorals: Plusieurs points de Vue, le Routage et le Modèle de Mise en page
• Cartographie AngularJS Routes Sur les Paramètres d'URL Et d'Événements Côté Client
• Exemple d'Application avec Angular.js
• Construire un Site web avec AngularJS – Routes et Partiels

J'ai aussi un exemple d'application sur Github qui met en œuvre le routage, si vous souhaitez prendre un coup d'oeil.