Hola Mundo AngularJS
A pesar que el hola mundo es una forma sencilla de ver cómo funciona una tecnología nueva, no siempre nos va a dar una probada de lo que verdaderamente representa dicha tecnología, es por ello que debemos ir un paso más allá y probar las diferentes características avanzadas del lenguaje o del framework.
¿Pero para probar las nuevas características hay que hacer algún proyecto más complejo?
No en lo absoluto, simplemente debemos buscar alguna forma más ingeniosa de llevar un paso más allá el Hola Mundo clásico, veamos.
Data-Binding
Antes de pasar a la parte práctica vamos a explicar el concepto de lo que es el data-binding, si recordamos en tiempos anteriores a la popularización de AJAX y de frameworks como jQuery, siempre utilizábamos los lenguajes tradicionales como PHP, Ruby o JSP para ayudarnos a construir parte de la interfaz con los datos dinámicos.
Esta práctica no está mal, pero genera un exceso de recargas de la página cada vez que necesitáramos ver si hubo alguna actualización de los datos, con jQuery las cosas fueron cambiando ya que podíamos invocar un evento y de esta forma solo actualizar la sección que nos interesaba, reduciendo de esta manera las veces que debíamos recargar nuestra página.
¿Qué pasa si lo que queremos es que se actualice una sección sin depender de estos procesos antes descritos?
Esto es lo que conocemos como data-binding, no es más que unir secciones de datos con secciones de nuestra interfaz y cuando haya un cambio en alguna, la otra se actualice de forma automática ya que está esperando o escuchando sus eventos.
AngularJS posee un soporte para este tipo de desarrollo de forma nativa, de hecho sin tener que hacer algo adicional podemos disfrutar en nuestras aplicaciones del data-binding.
Enfoque Distinto de Hola Mundo
Ya que conocemos lo que es el data-binding vamos a construir nuestro nuevo Hola Mundo, veamos entonces que necesitamos para ello:
- Como siempre debemos incluir AngularJS en nuestra aplicación, para ello podemos recurrir a la versión del CDN de Google.
- Vamos a crear un controlador que nos coloque el primer dato en nuestra aplicación, para ello vamos a colocar un código personalizado en una etiqueta script de HTML.
- Generaremos un div con la propiedad ng-controller esta le va a indicar a AngularJS que debe trabajar con dicho elemento.
- Vamos a generar luego un elemento input de HTML al cual le agregaremos la propiedad ng-model, con ello haremos que AngularJS genere un data-binding con el contexto de nuestra aplicación.
A simple vista no parece nada muy complicado y es porque es así, AngularJS se encarga de todo lo complejo dejando que solo coloquemos nuestros toques de lógica, vemos también que en el input le decimos que variable de contexto debe modificar en este caso saludo.text y al escribir esto se cambiará en tiempo real.
Veamos como luce en nuestro navegador:
Vemos como en el controlador tenemos la palabra Hola en el contexto text y hemos escrito luego Saludos cambiando inmediatamente comprobando así lo que mencionamos del data-binding.
Con esto finalizamos este curso, hemos hecho un Hola Mundo diferente que nos ayuda a conocer más las bondades de AngularJS y de esta forma ir entrando en materia para próximos tutoriales.
