menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:01_introduccion:02_modelo [2014/07/12 16:49] admin borrado |
— (actual) | ||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| - | ====== Modelo ====== | ||
| - | Ya hemos visto cómo tener un esqueleto básico de una aplicación, aunque ésta realmente no hace nada. Veamos ahora cómo declarar un modelo con nuestros datos y cómo mostrarlo en la página HTML. | ||
| - | |||
| - | ===== Creando el modelo ===== | ||
| - | |||
| - | Vamos a desarrollar un ejemplo para capturar datos de usuarios en una compañía de seguros. | ||
| - | |||
| - | <sxh js> | ||
| - | function MiPageController($scope) { | ||
| - | |||
| - | var datos={ | ||
| - | nombre:"Rafel Lorenzo", | ||
| - | ape1:"González", | ||
| - | ape2:"Aznar" | ||
| - | }; | ||
| - | |||
| - | |||
| - | $scope.seguro=datos; | ||
| - | } | ||
| - | </sxh> | ||
| - | |||
| - | * Vemos cómo en las líneas de la 3 a la 7 declaramos un objeto JavaScript con los datos que queremos mostrar en la aplicación. | ||
| - | * En la línea 10 guardamos esos datos en el ''$scope'' con el nombre de ''seguro''. | ||
| - | ===== Mostrando el modelo ===== | ||
| - | |||
| - | ==== Tags ==== | ||
| - | |||
| - | Modifiquemos ahora la página HTML para mostrar los datos del modelo: | ||
| - | |||
| - | <sxh html> | ||
| - | <body ng-controller="MiPageController" > | ||
| - | Nombre:{{seguro.nombre}}<br /> | ||
| - | Primer apellido:{{seguro.ape1}}<br /> | ||
| - | Segundo apellido:{{seguro.ape2}}<br /> | ||
| - | </body> | ||
| - | </sxh> | ||
| - | |||
| - | Se puede apreciar las %%{{%% %%}}%% (llaves) que usa AngularJS para mostrar los datos del modelo en la página HTML. Como vemos no tenemos que incluir código JavaScript que copia los datos en la página HTML, AngularJS lo realiza automáticamente. | ||
| - | |||
| - | Destacar que debemos incluir la palabra ''seguro'' delante de cada uno de los campos. Esto es así ya que podemos tener todos los modelos que deseemos en el [[unidades:scope|''$scope'']] y cada uno tendría su propio nombre y campos. | ||
| - | |||
| - | |||
| - | **Demo** | ||
| - | {{url>http://jsfiddle.net/logongas/bHYvQ/embedded/result,js,html}} | ||
| - | |||
| - | |||
| - | ==== input ==== | ||
| - | Acabamos de ver cómo mostrar los datos en una página HTML, pero ¿y si queremos modificar el modelo? En HTML utilizaremos por ejemplo los tags ''<input>'' para que el usuario introduzca los datos. Además mediante los atributos ng-model ligamos los datos introducidos por el usuario con el modelo. | ||
| - | |||
| - | Modifiquemos el HTML anterior para ver cómo podemos cambiar el modelo. | ||
| - | |||
| - | <sxh html> | ||
| - | <body ng-controller="MiPageController" > | ||
| - | Nombre:{{unidades:seguro.nombre}}<br /> | ||
| - | Primer apellido:{{unidades:seguro.ape1}}<br /> | ||
| - | Segundo apellido:{{unidades:seguro.ape2}}<br /> | ||
| - | <br /> | ||
| - | <br /> | ||
| - | Nombre:<input type="text" ng-model="seguro.nombre" ><br/> | ||
| - | Primer apellido:<input type="text" ng-model="seguro.ape1" ><br/> | ||
| - | Segundo apellido:<input type="text" ng-model="seguro.ape2" ><br/> | ||
| - | </body> | ||
| - | </sxh> | ||
| - | |||
| - | Observa las líneas 7, 8 y 9. El usuario, cuando modifica el contenido de los controles input, está modificando directamente el modelo, y estos cambios aparecen inmediatamente en las líneas 2, 3 y 4, en las que se muestran los valores de las variables del modelo. | ||
| - | |||
| - | Por tanto, si modificamos alguno de los valores de los ''<input>'', automáticamente se cambia el valor del modelo y se ve reflejado en la página HTML. Esta es la "magia" de Angular. | ||
| - | |||
| - | **Demo** | ||
| - | {{url>http://jsfiddle.net/logongas/6PJyw/embedded/result,js,html}} | ||
