web-dev-qa-db-fra.com

Angular 1 - Obtenir les paramètres d'URL actuels

Je souhaite extraire des données de l'URL actuelle et les utiliser dans le contrôleur. Par exemple, j'ai cette URL:

app.dev/backend/surveys/2

Bits que je veux extraire:

app.dev/backend/ : type/: id

Y at-il quelque chose dans Angular qui pourrait m'aider dans cette tâche?

javascriptangularjsngroute
35
sarunast

Pour obtenir les paramètres de l'URL avec ngRoute. Cela signifie que vous devrez inclure angular-route.js dans votre application en tant que dépendance. Plus d'informations sur la façon de le faire sur officiel documentation de ngRoute .

La solution à la question:

// You need to add 'ngRoute' as a dependency in your app
angular.module('ngApp', ['ngRoute'])
    .config(function ($routeProvider, $locationProvider) {
        // configure the routing rules here
        $routeProvider.when('/backend/:type/:id', {
            controller: 'PagesCtrl'
        });

        // enable HTML5mode to disable hashbang urls
        $locationProvider.html5Mode(true);
    })
    .controller('PagesCtrl', function ($routeParams) {
        console.log($routeParams.id, $routeParams.type);
    });

Si vous n'activez pas la $locationProvider.html5Mode(true);. Les URL utiliseront hashbang (/#/).

Plus d'informations sur le routage sont disponibles sur angular documentation de l'API $ route) .

Note latérale: Cette question répond à la question de savoir comment y parvenir en utilisant ng-Route. Toutefois, je vous recommande d'utiliser le - ui-Router pour le routage. Il est plus flexible, offre plus de fonctionnalités, la documentation est excellente et est considérée comme la meilleure bibliothèque de routage angulaire.

53
sarunast

Vous pourriez injecter $routeParams sur votre contrôleur et accédez à tous les paramètres utilisés lors de la résolution de la route.

Par exemple.:

// route was: app.dev/backend/:type/:id

function MyCtrl($scope, $routeParams, $log) {
    // use the params
    $log.info($routeParams.type, $routeParams.id);
};

Voir documentation $ routeParams angulaire pour plus d'informations.

14
fdomig

Mieux aurait été générer url comme

app.dev/backend?type=surveys&id=2

et ensuite utiliser

var type=$location.search().type;
var id=$location.search().id;

et injecter $ location dans le contrôleur.

4
Himanshu Chandra

Dans votre configuration d'itinéraire, vous définissez généralement un itinéraire tel que,

.when('somewhere/:param1/:param2')

Vous pouvez alors obtenir la route dans l'objet de résolution en utilisant $route.current.params ou dans un contrôleur, $routeParams. Dans les deux cas, les paramètres sont extraits en utilisant le mappage de la route, donc param1 peut être consulté par $routeParams.param1 dans le contrôleur.

Edit: Notez également que le mappage doit être exact

/some/folder/:param1

Ne correspondra qu'à un seul paramètre. 

/some/folder/:param1/:param2

Ne correspondra qu'à deux paramètres.

C'est un peu différent de la plupart des routes côté serveur dynamiques. Par exemple, le mappage de route NodeJS (Express) où vous ne pouvez fournir qu'un seul itinéraire avec un nombre X de paramètres.

3
Index

ex: url /: id

var sample= app.controller('sample', function ($scope, $routeParams) {
  $scope.init = function () {
    var qa_id = $routeParams.qa_id;
  }
});
2
NgocSon

Il suffit d'injecter le service routeParams:

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

1
xmysteriox