Cómo pasar parámetros por url con AngularJS

AngularJS

En el post anterior hablé de cómo crear una single page application con el sistema de rutas de AngularJS. En esta ocasión explicaré cómo podemos pasar parámetros por url con AngularJS gracias al sistme de rutas. Te recomiendo que descargues este repositorio antes de continuar ya que trabajaremos sobre él.

Podemos pasar a nuestra url parámetros para que los lea angular, se conoce como parámetros de ruta o route paramters. Previamente habíamos configurado las rutas para que tuvieran una coincidencia exacta contra el método $location.path(). Es algo que está bien a pequeña escala pero, en un caso con artículos de una tienda quedaría algo asi:

JavaScript
1
2
3
$routeProvider.when("/articulo/313", { templateUrl: "articulo.html" });
$routeProvider.when("/articulo/989", { templateUrl: "articulo.html" });
$routeProvider.when("/articulo/526", { templateUrl: "articulo.html" });

Hacer una ruta por cada articulo o cada noticia o cualquier otro dato es una locura. Aquí es donde entraría los parámetros de ruta y poder pasar parámetros por url con AngularJS..

Para el siguiente ejemplo vamos hacer que en la pagina sobre-nosotros.html se muestra una información u otra dependiendo de la url. Por ejemplo, si el usuario da en sobre-nosotros/equipo hablaría sobre los miembros de la empresa. Si por el contrario le diese a sobre-nosotros/empresa hablaría de la historia de la empresa.

Para ello vamos a cambiar un poco el sobre-nosotros.html del post anterior que puedes descargar de este repositorio.

XHTML
1
2
3
4
5
6
<div class="jumbotron text-center">
<h1>Sobre nosotros</h1>
<p>{{ message }}</p>
<h2>{{ infoTitulo }}</h2>
<p>{{ infoTexto }}</p>
</div>

En él hay 2 variables que tendrán un valor u otro dependiendo del parámetro de la URL.

El siguiente paso será modificar el index.html y agregar 2 opciones: equipo y empresa. Ambas irán a la página sobre nosotros pero con un parámetro distinto.

XHTML
1
2
<li><a href="#sobre-nosotros/equipo"><i class="fa fa-users"></i> Equipo</a></li>
<li><a href="#sobre-nosotros/empresa"><i class="fa fa-industry"></i> Empresa</a></li>

Uno de los enlaces tendrá como parámetro equipo y el otro empresa. El segundo segmento actúa como parámetro de ruta.

Para poder obtener el valor de ese parámetro de ruta tenemos que añadir el siguiente código en la definición de rutas que está dentro del <head> de index.html .

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
....
.when('/sobre-nosotros', {
        templateUrl: 'paginas/sobre-nosotros.html',
        controller: 'nosotrosController'
})
 
.when('/sobre-nosotros/:tema', {
templateUrl: 'paginas/sobre-nosotros.html',
controller: 'nosotrosController'
})
.when('/contacto', {
templateUrl: 'paginas/contacto.html',
...
})

El segundo segmento de la ruta (:tema) que está en la url, es el nombre del parámetro de la ruta. Este parámetro actúa como referencia a cualquier valor que se le proporciona al segundo segmento de la URL que coincida. Por ejemplo

URL Coincide
#sobre-nosotros/equipo Si. El valor del parámetro es equipo
#sobre-nosotros/empresa Si. El valor del parámetro es empresa
#sobre-nosotros/marca Si. El valor del parámetro es marca
#sobre-nosotros/ No. Pocos argumentos
#sobre-nosotros/equipo/perfil No. Demasiados argumentos

Como el segundo segmento puede tener de valor cualquiera, habrá que controlar que valor se podrá pasar por la URL. Por tanto, modificamos la parte del nosotrosController que está definido en index.html

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
app.controller('nosotrosController', function ($scope, $routeParams) {
$scope.message = 'Aquí puedes encontrar información sobre nosotros.';
 
 
var infoTitulo = '';
var infoTexto = '';
if ($routeParams['tema'] == "equipo")
{
infoTitulo = 'Nuestro equipo';
infoTexto = 'Nuestro equipo consiste en un grupo de personas especializadas.....';
} else if ($routeParams['tema'] == "empresa") {
infoTitulo = 'Historia de la empresa';
infoTexto = 'Nuestra empresa lleva 3 décadas en la explotación de minerales.....';
}
$scope.infoTitulo = infoTitulo;
$scope.infoTexto = infoTexto;
});

Como puedes ver, extraer los valores es bastante sencillo con el servicio $routeParams que pasamos al controlador. en el controlador tenemos 2 variables vacías: el título y el texto. Los valores de ambas variables dependerán del valor del parámetro de ruta que obtenemos de $routeParams.

Resultado final

Cómo pasar parámetros por url con AngularJS - Resultado

Espero que os haya gustado este post sobre cómo pasar parámetros por url con AngularJS. A seguir picando 🙂