TUTORIALES

Paso de parámetros en la ruta


En AngularJS, puedes pasar parámetros en la ruta utilizando el servicio $routeParams junto con la definición de la ruta en el enrutador ($routeProvider). Aquí te muestro cómo puedes pasar parámetros en la ruta en tu aplicación AngularJS:

  1. Definir la ruta con parámetros en el enrutador:

    Utiliza el método when() del servicio $routeProvider para definir la ruta que aceptará parámetros. Puedes definir parámetros en la ruta colocando un segmento de URL precedido por :. Por ejemplo:

    angular.module('miApp')
      .config(function($routeProvider) {
        $routeProvider
          .when('/usuario/:id', {
            templateUrl: 'vistas/usuario.html',
            controller: 'UsuarioController'
          });
      });

    En este ejemplo, hemos definido una ruta /usuario/:id que acepta un parámetro id.

  2. Acceder a los parámetros en el controlador:

    Para acceder a los parámetros pasados en la ruta, puedes inyectar el servicio $routeParams en el controlador correspondiente. Este servicio proporciona un objeto que contiene los valores de los parámetros pasados en la ruta. Por ejemplo:

    angular.module('miApp')
      .controller('UsuarioController', function($scope, $routeParams) {
        $scope.usuarioId = $routeParams.id;
      });

    En este ejemplo, hemos inyectado $routeParams en el controlador UsuarioController y hemos accedido al parámetro id utilizando $routeParams.id. Ahora $scope.usuarioId contendrá el valor del parámetro id pasado en la URL.

  3. Usar parámetros en la vista:

    Puedes usar los valores de los parámetros pasados en la ruta en tu vista HTML. Por ejemplo:

    <p>Usuario ID: {{ usuarioId }}</p>

    En esta vista, estamos mostrando el valor del parámetro id que hemos pasado en la ruta.

  4. Navegación con parámetros:

    Para navegar a una ruta que acepta parámetros, puedes usar cualquiera de los métodos de navegación mencionados anteriormente, ya sea utilizando enlaces <a> con ng-href o utilizando el servicio $location. Asegúrate de incluir el valor del parámetro en la URL cuando navegues a la ruta.

    Por ejemplo, utilizando enlaces <a>:

    <a ng-href="#/usuario/123">Ver usuario 123</a>

    O utilizando el servicio $location:

    $location.path('/usuario/' + usuarioId);

Con estos pasos, has aprendido cómo pasar parámetros en la ruta en tu aplicación AngularJS y cómo acceder a ellos en el controlador correspondiente. Esto te permite crear rutas dinámicas y reutilizables que pueden recibir datos específicos según la URL actual.



0 Comments:

Publicar un comentario