javascript - route - Angular 1: obtenga los parámetros de URL actuales

otherwise angularjs

Question

Quiero extraer datos de la URL actual y usarlos en el controlador. Por ejemplo, tengo esta url:

app.dev/backend/surveys/2

Bits que quiero extraer:

app.dev/backend/ : type / : id

¿Hay algo en Angular que pueda ayudarme con esta tarea?

Answer 1

En la configuración de tu ruta, normalmente defines una ruta como,

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

A continuación, puede obtener la ruta en el objeto de resolución utilizando $route.current.params o en un controlador, $routeParams . En cualquier caso, los parámetros se extraen utilizando la asignación de la ruta, de modo que param1 se puede acceder mediante $routeParams.param1 en el controlador.

Editar : También tenga en cuenta que el mapeo tiene que ser exacto

/some/folder/:param1

Solo coincidirá con un solo parámetro.

/some/folder/:param1/:param2 

Solo coincidirá con dos parámetros.

Esto es un poco diferente de la mayoría de las rutas dinámicas del lado del servidor. Por ejemplo, mapeo de ruta NodeJS (Express) donde puede suministrar solo una ruta con un número X de parámetros.

Answer 2

Mejor habría sido generar url como

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

y luego usa

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

e inyectar $ location en el controlador.

Answer 3

Para obtener los parámetros de URL con ngRoute . Significa que deberá incluir angular-route.js en su aplicación como una dependencia. Más información sobre cómo hacer esto en la documentación oficial de ngRoute .

La solución para la pregunta:

// 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 no habilita $locationProvider.html5Mode(true); . Las URL usarán hashbang ( /#/ ).

Se puede encontrar más información sobre el enrutamiento en la documentación oficial de la API $ route angular.

Nota al margen: Esta pregunta responde cómo lograr esto usando ng-Route; sin embargo, recomendaría usar el ui-Router para el enrutamiento. Es más flexible, ofrece más funcionalidad, la documentación es excelente y se considera la mejor biblioteca de enrutamiento para angular.

Answer 4

Puede inyectar $routeParams a su controlador y acceder a todos los parámetros que se utilizaron cuando se resolvió la ruta.

P.ej:

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

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

Consulte la documentación angular $ routeParams para obtener más información.

Answer 5

Solo tiene que inyectar el servicio routeParams:

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

Answer 6

ex: url /: id

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