Cargando



AngularJS - Entradas en Formularios

En este curso veremos cómo manejar las entradas en formularios con AngularJS desde sus aspectos más básicos hasta la utilización de métodos avanzados que nos ayudarán en el desarrollo de nuestra aplicación.


jul 20 2014 00:00
Avanzado
jul 21 2014 18:53

Manejo Avanzado



Ya sabemos que la principal forma en que pueden interactuar nuestros usuarios con nuestra aplicación es a través del formulario, sin embargo surge un problema, los modelos no siempre serán actualizados por medio de campos en el formulario, hay veces en que tendremos que traer datos desde algún servicio web que se comunique con un una base de datos, este caso también debemos tomarlo en cuenta cuando hacemos nuestras lógicas de interacción dentro de la aplicación.

AngularJS no es ajeno a estos escenarios por lo cual nos ofrece herramientas y métodos con los cuales podemos tomar en cuenta estas situaciones y poder atacar la forma en que funciona nuestra aplicación tomando en cuenta el lado del usuario y el lado de obtención de datos de un servidor.

En esta sección veremos como incluir el método $watch que nos permite mantener una vigilancia sobre los cambios en el modelo para poder manipular nuestros datos de forma adecuada.

Situación


Tenemos una aplicación en la cual hacemos un cálculo de un capital de emprendimiento, este capital lo coloca el usuario directamente y se hace el cálculo del capital necesario para que logre el objetivo, pero este cálculo únicamente se ejecuta cuando el usuario hace un cambio en el input, si por ejemplo hubiese un cambio que no venga causado por el usuario no habría forma que se pudiera actualizar el cambio.

¿Cómo evitarlo?
Para evitar esto debemos utilizar un método que viene asociado al $scope o ámbito de nuestro controlador, que es el $watch, básicamente este método evalúa una expresión y llama un callback cuando la misma tiene un cambio.


Veamos el siguiente ejemplo:


angular_entradaForm_Avanz.jpg


Aquí vemos como establecemos los valores de nuestro modelo, tanto fondo como estimadoInicial son 0 al empezar la aplicación y luego construimos nuestra función calcularNecesario que nos da un cálculo del estimado inicial cuando lo colocamos.

Lo interesante es la última instrucción, como vemos utilizamos $watch y le pasamos como string o cadena de texto el objeto del ámbito de la aplicación, luego la función que debe ejecutarse, con ello nuestro HTML podría quedar de la siguiente forma:


angular_entradaForm_Avanz2.jpg


Vemos que aquí no tenemos que indicar nada con el atributo ng-change como pudiéramos haber hecho, ya que con la función $watch automáticamente se hace el cálculo con un cambio del modelo, esto es lo que también nos permite actualizar por un medio diferente al usuario el campo.

Como vemos este tipo de herramientas que nos ofrece AngularJS dan pie a que hagamos aplicaciones más dinámicas ya que no solo podemos contar con la entrada del usuario para ejecutar acciones, si no que podemos automatizar esto y tener otras fuentes de ingreso de datos, esto es valioso cuando tenemos aplicaciones basadas en servicios web, como por ejemplo las nuevas aplicaciones REST que se pueden desarrollar en django, Laravel o Rails.

Vemos entonces que es una estructura un poco más avanzada de como manipular la entrada de datos a través de un formulario, ya sea por medio de la intervención de un usuario o por otros medios automatizados.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X