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í:

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

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

var app=angular.module("app",[]);
 
function PruebaController($scope) {
  $scope.mensaje="Hola Mundo";
  
  $scope.cambiarMensaje=function() {
    $scope.mensaje="Adios mundo cruel :-)";
  }
  
}

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

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 1) a 4 pesetas”.

Para los problemas de rendimiento podemos ver una posible solución en : Optimizing AngularJS: 1200ms to 35ms y para los problemas de jQuery veremos durante el curso los trucos a usar.

Ejemplo

Referencias

1) Un duro eran 5 pesetas
unidades/02_angular/03_input.txt · Última modificación: 2014/08/29 19:58 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