Diferencias

Muestra las diferencias entre dos versiones de la página.

--- unidades:07_rutas:03_parametros [2014/08/26 19:03] – admin
+++ unidades:07_rutas:03_parametros [2014/12/21 08:51] (actual) – [Ruta indefinida] admin
@@ Línea 1: / Línea 1: @@
-====== Parámetros ======
+====== 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.
+En este tema vamos a ver cómo incluir parámetros en las rutas. Antes de explicar en qué consiste, volvamos a ver cómo funciona gmail.
 Página "Recibidos" . URL=<nowiki>https://mail.google.com/mail/u/0/#inbox/147aa0e5820</nowiki>
@@ Línea 6: / Línea 6: @@
 {{:unidades:07_rutas:gmail-inbox-detail.png?nolink|}}
-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".
+Estamos en la página de recibidos pero estamos viendo un correo concreto. Para indicar qué 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.
@@ Línea 23: / Línea 23: @@
   * 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''.
+Ahora, vamos 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''  ^
@@ Línea 33: / Línea 33: @@
-<note tip>Notar que si que se permite una barra al final pero no estará contenida como valor de la variable.</note>
+<note tip>Nótese que sí que se permite una barra al final pero no estará contenida como valor de la variable.</note>
 Pero **NO** podrá tener la siguientes formas:
@@ Línea 45: / Línea 45: @@
-===== Mas de un parámetro =====
+===== Más 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:
+¿Qué pasa si queremos 2 variables porque nos interesan 2 //barras//? Se pueden  definir simplemente 2 variables, como en el siguiente ejemplo:
 <sxh js>
@@ Línea 58: / Línea 58: @@
 ^  Path  ^  valor ''variable1''  ^ valor ''variable2'' ^
-| /pagina1/pepe/juan | pepe | juan |
+| /pagina2/pepe/juan | pepe | juan |
-| /pagina1/34/hola | 34 | hola |
+| /pagina2/34/hola | 34 | hola |
-| /pagina1/hola/1234 | hola | 1234 |
+| /pagina2/hola/1234 | hola | 1234 |
-| /pagina1/_/_ | _ | _ |
+| /pagina2/_/_ | _ | _ |
-| /pagina1/hola/adios/ | hola | adios |
+| /pagina2/hola/adios/ | hola | adios |
@@ Línea 77: / Línea 77: @@
 ^  Path  ^  valor ''variable1''  ^ valor ''variable2'' ^
-| /pagina1/rojo/pepe/verde/juan/azul | pepe | juan |
+| /pagina3/rojo/pepe/verde/juan/azul | pepe | juan |
-| /pagina1/rojo/34/verde/hola/azul | 34 | hola |
+| /pagina3/rojo/34/verde/hola/azul | 34 | hola |
-| /pagina1/rojo/hola/verde/1234/azul | hola | 1234 |
+| /pagina3/rojo/hola/verde/1234/azul | hola | 1234 |
-| /pagina1/rojo/_/verde/_/azul | _ | _ |
+| /pagina3/rojo/_/verde/_/azul | _ | _ |
-| /pagina1/rojo/hola/verde/adios/azul/ | hola | adios |
+| /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.
+Hemos visto cómo podemos definir exactamente la forma de la ruta pero con parámetros, pero ¿qué ocurre si no sabemos cuántas partes tiene la ruta? AngularJS nos permite añadir un "*" asterisco a la ruta y casará con cualquier tamaño.
 <sxh js>
@@ Línea 94: / Línea 94: @@
 </sxh>
-^  Path  ^  valor ''variable4''
+^  Path  ^  valor ''variable1''  ^
-| /pagina1/rojo | rojo|
+| /pagina4/rojo | rojo|
-| /pagina1/rojo/34 | rojo/34 |
+| /pagina4/rojo/34 | rojo/34 |
-| /pagina1/hola/verde/1234/azul | hola/verde/1234/azul |
+| /pagina4/hola/verde/1234/azul | hola/verde/1234/azul |
-| /pagina1/rojo/_/ | rojo/_ |
+| /pagina4/rojo/_/ | rojo/_ |
-| /pagina1/rojo/hola/verde/adios/azul/ | rojo/hola/verde/adios/azul |
+| /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.
+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
+Por último , ¿qué pasa si hay partes de la ruta que pueden o no pueden estar? AngularJS nos permite añadir una incógnita al final de parámetro.
 <sxh js>
-  $routeProvider.when('/pagina5/:variable1*', {
+  $routeProvider.when('/pagina5/:variable1?', {
     templateUrl: "pagina5.html",
     controller: "Pagina5Controller"
@@ Línea 115: / Línea 115: @@
 ^  Path  ^  valor ''variable1''  ^
-| /pagina1/pepe | pepe |
+| /pagina5/pepe | pepe |
-| /pagina1/ | ''undefined'' |
+| /pagina5/ | ''undefined'' |
-| /pagina1/hola_mundo | hola_mundo |
+| /pagina5/hola_mundo | hola_mundo |
 Si no está la parte optativa su valor será ''undefined''.
@@ Línea 124: / Línea 124: @@
 ===== 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.
+Ahora que hemos definido el parámetro, tenemos que poder obtener dicho valor. El valor se usa en el controlador ya que el controlador 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 [[https://docs.angularjs.org/api/ngRoute/service/$routeParams|$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.
-Veamos un ejemplo.
+Suponiendo la siguiente ruta:
 <sxh js>
+$routeProvider.when('/pagina2/:variable1/:variable2', {
+  templateUrl: "pagina2.html",
+  controller: "Pagina2Controller"
+});
+</sxh>
+Podemos acceder a esos parámetros de la siguiente forma:
+<sxh js>
+app.controller("Pagina2Controller", ["$scope","$routeParams",function($scope,$routeParams) {
+   $scope.mensaje="variable1='" + $routeParams.variable1 + "' y variable2='" + $routeParams.variable2 + "'";
+}]);
 </sxh>
+  * Línea 1: Inyectamos el servicio de ''$routeParams''
+  * Línea 2: Hacemos uso de las propiedades ''$routeParams.variable1'' y ''$routeParams.variable2'' que contiene los valores de los parámetros ''variable1'' y ''variable2''
+Como vemos es muy sencillo obtener el valor de los parámetros de las rutas.
+<note important>
+Recordad que el tipo de datos de los parámetros siempre es un "String" aunque pongamos cosas como "34" o "51".
+Así que si queremos que sean un Integer o cualquier otro tipo tendremos que transformarlo nosotros.
+</note>
+==== QueryString ====
+Si la URL real incluye [[http://es.wikipedia.org/wiki/Query_string|Query String]] también se pueden acceder a esos 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.
-<note important>Como este ejemplo necesita de ver como cambia la URL del navegador , es mejor abrir en una nueva página el [[http://run.plnkr.co/plunks/brKFp5|ejemplo]].</note>
+<note important>Como este ejemplo necesita ver cómo cambia la URL del navegador , es mejor abrir en una nueva página el [[http://run.plnkr.co/plunks/brKFp5|ejemplo]].</note>
 {{url>http://embed.plnkr.co/brKFp5}}