Diferencias

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

Enlace a la vista de comparación

unidades:02_angular:03_input [2014/07/04 13:25]
admin [Entrada de datos]
unidades:02_angular:03_input [2014/08/29 19:58] (actual)
admin
Línea 1: Línea 1:
-====== Entrada de datos ====== +====== ​2.3 Entrada de datos ====== 
-Por ahora hemos visto como generar información desde JavaScript y mostrarla en la página HTML, en este tema vamos a ver como usando el tag ''<​input>''​ podemos pasar la información desde el HTML a las variables de JavaScript. Es decir vamos a modificar la variable ''​mensaje''​ del ''​$scope''​ desde la propia página HTML mediante el tat ''<​input>''​. ​+Por ahora hemos visto cómo generar información desde JavaScript y mostrarla en la página HTML. En este tema vamos a ver cómo usando el tag ''<​input>''​ podemos pasar la información desde el HTML a las variables de JavaScript. Es decirvamos a modificar la variable ''​mensaje''​ del ''​$scope''​ desde la propia página HTML mediante el tat ''<​input>''​. ​
  
 El ejemplo ahora quedaría así:  El ejemplo ahora quedaría así: 
Línea 23: Línea 23:
 </​sxh>​ </​sxh>​
  
-  * Linea 13: Lo único que hemos añadido es un ''<​input>''​ pero con la directiva de angular ''​ng-model''​. Esta directiva indica ​que variable del ''​$scope''​ está asociado a este ''<​input>''​. Si ejecutas el ejemplo verás ​como al escribir texto en el ''<​input>''​ automáticamente se modifica el texto del título ''<​h1>''​ en la página HTML. También prueba a pulsar en el botón "​Cambia"​ y mira lo que ocurre.+  * Linea 13: Lo único que hemos añadido es un ''<​input>''​ pero con la directiva de angular ''​ng-model''​. Esta directiva indica ​qué variable del ''​$scope''​ está asociado a este ''<​input>''​. Si ejecutas el ejemplo verás ​cómo al escribir texto en el ''<​input>''​ automáticamente se modifica el texto del título ''<​h1>''​ en la página HTML. También prueba a pulsar en el botón "​Cambia"​ y mira lo que ocurre.
  
  
Línea 42: Línea 42:
  
 ===== databinding ===== ===== databinding =====
-Seguimos con el //​Data-binding//​ y vemos ahora que al escribir el usuario en el ''<​input>''​ se modifica el modelo (la variable JavaScript) lo que hace que se vuelva a regenerar el HTML.+Seguimos con el //​Data-binding//​ y vemos ahora que al escribir el usuario en el ''<​input>''​ se modifica el modelo (la variable JavaScript)lo que hace que se vuelva a regenerar el HTML.
  
-**La modificación del HTML en el ''<​input>''​ modifica el modelo lo que a su vez regenera otra vez el HTML**+**La modificación del HTML en el ''<​input>''​ modifica el modelolo que a su vez regenera otra vez el HTML**
  
 {{:​unidades:​02_angular:​databinding3.png|}} {{:​unidades:​02_angular:​databinding3.png|}}
  
-Ahora es cuando podemos decir que el sistema de //​Data-binding//​ y plantillas de AngularJS no se genera una vez sino que constantemente se está regenerando en cuanto cambia alguna parte del modelo o del HTML. Esta es una diferencia muy importante respecto a otros motores de plantillas. Ya no es necesario que nosotros hagamos nada para sincronizar el HTML y el modeloAngular lo hace todo por nosotros!!!! Se acabó el programa en el que una parte de la pantalla no estaba actualizada porque se nos había olvidado decir que se refrescara esa parte con los nuevos datos.+Ahora es cuando podemos decir que el sistema de //​Data-binding//​ y plantillas de AngularJS no se genera una vez sino que constantemente se está regenerando en cuanto cambia alguna parte del modelo o del HTML. Ésta es una diferencia muy importante respecto a otros motores de plantillas. Ya no es necesario que nosotros hagamos nada para sincronizar el HTML y el modeloAngular lo hace todo por nosotros!!!! Se acabó el programa en el que una parte de la pantalla no estaba actualizada porque se nos había olvidado decir que se refrescara esa parte con los nuevos datos.
  
 Es decir que el //​Data-binding//​ funciona en ambas direcciones. Es decir que el //​Data-binding//​ funciona en ambas direcciones.
Línea 57: Línea 57:
  
 ==== El precio ==== ==== El precio ====
 +Por ahora son todo ventajas pero como todo en la vida todo tiene un precio. ¿Cuál es el precio por sincronizar automáticamente el modelo y el HTML?
  
 +Antes de responder a la pregunta hay que ver cómo hace AngularJS esta sincronización. Lo que hace angular es antes de cualquier evento en angular (por ejemplo un ng-click) guardarse el estado del ''​$scope''​ y cuando acaba el evento comprueba que se ha modificado del ''​$scope''​ respecto a su copia original. De esa forma sabe que tiene que actualizar. ​
  
 +Pero éso tiene 2 inconvenientes,​ que son el precio a pagar:
 +
 +  * Rendimiento:​ AngularJS tiene problemas de rendimiento y en ciertos caso son tablas excesivamente largas. Éso suele darse en el típico scroll sin fin en el que vamos añadiendo datos a la página.
 +  * Eventos externos a AngularJS: Si se produce un evento fuera de Angular, él no se enterará y no se actualizará nada. Éso nos obliga a que todo lo que ocurra en AngularJS tiene que pasar por él. El problema es que algunas cosas de jQuery dejarán de funcionar a no ser que le digamos a AngularJS que ha ocurrido algo.
 +
 +Para ambos problemas realmente hay solución. Lo único es que cuando tengamos que resolverlos se perderá parte de la sencillez de AngularJS , pero como se decía antes: "Nadie da duros ((Un duro eran 5 pesetas)) a 4 pesetas"​.
 +
 +Para los problemas de rendimiento podemos ver una posible solución en : [[http://​blog.scalyr.com/​2013/​10/​angularjs-1200ms-to-35ms/​|Optimizing AngularJS: 1200ms to 35ms]] y para los problemas de jQuery veremos durante el curso los trucos a usar.
 ===== Ejemplo ===== ===== Ejemplo =====
  
Línea 64: Línea 74:
  
 ===== Referencias ===== ===== Referencias =====
-  * [[https://​docs.angularjs.org/​api/​ng/​directive/​ngClick|ngClick]]+  * [[https://​docs.angularjs.org/​api/​ng/​directive/​ngModel|ngModel]]
unidades/02_angular/03_input.1404473109.txt.gz · Última modificación: 2014/07/04 13:25 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0