Curso de AngularJS y REST

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 2.3 Entrada de datos ======
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 decir, vamos a modificar la variable ''mensaje'' del ''$scope'' desde la propia página HTML mediante el tat ''<input>''. 

El ejemplo ahora quedaría así: 
<sxh html; title:index.html;highlight:[13] >
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="PruebaController">
    <h1>{{mensaje}}</h1>
    <button ng-click="cambiarMensaje()">Cambio</button>
    <br>
    Mensaje:<input ng-model="mensaje" >
    
  </body>

</html>
</sxh>

  * 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.


<sxh html; title:script.js >
var app=angular.module("app",[]);
 
function PruebaController($scope) {
  $scope.mensaje="Hola Mundo";
  
  $scope.cambiarMensaje=function() {
    $scope.mensaje="Adios mundo cruel :-)";
  }
  
}
</sxh>

El fichero ''script.js'' no lo hemos modificado nada.

===== 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.

**La modificación del HTML en el ''<input>'' modifica el modelo, lo que a su vez regenera otra vez el HTML**

{{: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. É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 modelo. Angular 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.
  * Modelo --> HTML
  * HTML --> Modelo

Y lo mejor de todo es que no cuesta nada hacer las modificaciones en nuestro modelo de JavaScript. Es tan sencillo como modificar una variable de JavaScript y el HTML se actualiza.¡La de tiempo de manejar el DOM que vas a ahorrarte!

==== 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 =====

{{url>http://embed.plnkr.co/EQLAbL}}

===== Referencias =====
  * [[https://docs.angularjs.org/api/ng/directive/ngModel|ngModel]]