menú
buscar
¡Esta es una revisión vieja del documento!
−Tabla de Contenidos
7.3 Parámetros
En este tema vamos a ver como incluir parámetros en las rutas. Antes de explicar en que consiste, volvamos a ver como funciona gmail.
Página “Recibidos” . URL=https://mail.google.com/mail/u/0/#inbox/147aa0e5820
Estamos en la página de recibidos pero estamos viendo un correo concreto. Para indicar que correo queremos ver se pone en la propia URL de la ruta. En el ejemplo de gmail vemos que se quiere ver el correo “147aa0e5820”.
El valor del correo a mostrar lo indicaremos como parámetro en la ruta ya que no es un valor fijo sino que queremos que nos pasen el valor del parámetro en variable para poder usar ese valor.
Definir el parámetro
Para poder definir un parámetro en la URL es tan sencillo como incluir el nombre de la variable en el path de la ruta precedido por ”:”. Veamos un ejemplo:
1 2 3 4 | $routeProvider.when('/pagina1/:variable1', { templateUrl: "pagina1.html", controller: "Pagina1Controller"}); |
- Línea 1: Ahora en el path hemos añadido una variable llamada
variable1.
Vamos ahora a poner ejemplos de posibles paths que casarían con la ruta que acabamos de definir y el valor de la variable variable1.
| Path | valor variable1 |
|---|---|
| /pagina1/pepe | pepe |
| /pagina1/34 | 34 |
| /pagina1/hola_mundo | hola_mundo |
| /pagina1/_ | _ |
| /pagina1/hola/ | hola |
Pero NO podrá tener la siguientes formas:
- /pagina1
- /pagina1/
- /pagina1/pepe/3
- /pagina1/34/hola/mundo
- /pagina1/hola_mundo/_
Es decir que si no tiene nada tras la segunda barra o tiene algo mas allá de la tercera barra el path no casará.
Mas de un parámetro
¿Que pasa si queremos 2 variable porque nos interesan 2 barras? Se pueden simplemente definir 2 variables, como en el siguiente ejemplo:
1 2 3 4 | $routeProvider.when('/pagina2/:variable1/:variable2', { templateUrl: "pagina2.html", controller: "Pagina2Controller"}); |
Vamos ahora a poner ejemplos de posibles paths que casarían con la ruta que acabamos de definir y el valor de las variables variable1 y variable2.
| Path | valor variable1 | valor variable2 |
|---|---|---|
| /pagina2/pepe/juan | pepe | juan |
| /pagina2/34/hola | 34 | hola |
| /pagina2/hola/1234 | hola | 1234 |
| /pagina2/_/_ | _ | _ |
| /pagina2/hola/adios/ | hola | adios |
Tambien podemos definir partes estáticas entre las variable sin ningún problema como en:
1 2 3 4 | $routeProvider.when('/pagina3/rojo/:variable1/verde/:variable2/azul', { templateUrl: "pagina3.html", controller: "Pagina3Controller"}); |
Vamos ahora a poner ejemplos de posibles paths que casarían con la ruta que acabamos de definir y el valor de las variables variable1 y variable2.
| Path | valor variable1 | valor variable2 |
|---|---|---|
| /pagina3/rojo/pepe/verde/juan/azul | pepe | juan |
| /pagina3/rojo/34/verde/hola/azul | 34 | hola |
| /pagina3/rojo/hola/verde/1234/azul | hola | 1234 |
| /pagina3/rojo/_/verde/_/azul | _ | _ |
| /pagina3/rojo/hola/verde/adios/azul/ | hola | adios |
Ruta indefinida
Hemos visto como podemos definir exactamente la forma de la ruta pero con parámetros, pero ¿que ocurre si no sabemos cuantas parte tiene la ruta? AngularJS nos permite añadir un “*” asterisco a la ruta y casara con cualquier tamaño.
1 2 3 4 | $routeProvider.when('/pagina4/:variable1*', { templateUrl: "pagina4.html", controller: "Pagina4Controller"}); |
| Path | |
|---|---|
| /pagina4/rojo | rojo |
| /pagina4/rojo/34 | rojo/34 |
| /pagina4/hola/verde/1234/azul | hola/verde/1234/azul |
| /pagina4/rojo/_/ | rojo/_ |
| /pagina4/rojo/hola/verde/adios/azul/ | rojo/hola/verde/adios/azul |
Como en el caso anterior también podríamos definir partes estáticas antes o después o varias variables.
Rutas optativas
Por último , ¿que pase si hay partes de la ruta que puede o no pueden estar? AngularJS nos permite añadir una incógnita al final de parámetro
1 2 3 4 | $routeProvider.when('/pagina5/:variable1?', { templateUrl: "pagina5.html", controller: "Pagina5Controller"}); |
| Path | valor variable1 |
|---|---|
| /pagina5/pepe | pepe |
| /pagina5/ | undefined |
| /pagina5/hola_mundo | hola_mundo |
Si no está la parte optativa su valor será undefined.
Como en el caso anterior también podríamos definir partes estáticas antes o después o varias variables. Y por supuesto se pueden mezclar todo lo que hemos visto en la misma ruta.
Obtener el parámetro
Ahora que hemos definido el parámetro tenemos que poder obtener dicho valor. El valor se usa en el controlador ya que es el código JavaScript que está asociado a la página que acaba de cargarse gracias a la ruta.
La forma de obtener el valor es simplemente llamando al servicio $routeParams. Este servicio contiene tantas propiedades como parámetros hayamos definido en la ruta. Y el valor de cada propiedad del servicio es el valor de cada parámetro de la ruta.
Suponiendo la siguiente ruta:
1 2 3 4 | $routeProvider.when('/pagina2/:variable1/:variable2', { templateUrl: "pagina2.html", controller: "Pagina2Controller"}); |
Podemos acceder a esos parámetros de la siguiente forma:
1 2 3 | app.controller("Pagina2Controller", ["$scope","$routeParams",function($scope,$routeParams) { $scope.mensaje="variable1='" + $routeParams.variable1 + "' y variable2='" + $routeParams.variable2 + "'";}]); |
- Línea 1: Inyectamos el servicio de
$routeParams - Línea 2: Hacemos uso de las propiedades
$routeParams.variable1y$routeParams.variable2que contiene los valores de los parámetrosvariable1yvariable2
Como vemos es muy sencillo obtener el valor de los parámetros de las rutas.
QueryString
Si la URL real incluye Query String también se pueden acceder a eso valores desde $routeParams.
Por ejemplo si la URL fuera:
/pagina2/hola/mundo?idCuenta=345&importe=678
Las propiedades de $routeParams tendrían el siguiente valor:
| Variable | Valor |
|---|---|
| variable1 | hola |
| variable2 | mundo |
| idCuenta | 345 |
| importe | 678 |
Ejemplo
En este ejemplo hemos puesto todas las rutas que hemos visto en este tema y ejemplos de llamadas a ellas.
Referencias
Ir hasta arriba
