Ya hace mucho que está sonando el nombre AngularJS; un framework de Javascript de lado cliente. Mi resumen tras unos meses trabajando con él es que, al principio cuando lees el “powered by Google”, piensas: ¡lo va a petar fijo!; luego cuando empiezas a trastear con él piensas: ¡lo peto!; hasta que te das con la primera piedra y piensas “de esta no me salgo”, es ahí cuando aparece tu tozudez y finalmente observas lo delicado pero potente que es este framework.
Adelantaros que los posts que iré poniendo a partir de ahora referente a AngularJS, me ayudarán a mí mismo a aprender sobre este framework y espero que también a vosotros. Así que espero vuestras aportaciones para, entre todos, enriquecernos sobre este GRAN framework!
En este primer post, haremos un Hello World pero nosotros somos más molones y haremos un Hello forCoders!
La idea es la siguiente, al principio veremos cómo cargar datos al iniciar la página con el tag ng-init; pero luego mostraremos los datos que se introduzcan en un TextBox con el tag ng-model… y lo mejor de todo: ¡SIN REFRESCAR LA PÁGINA!
Empecemos
Os paso la estructura de html que usaré de base. Para los que hayáis trabajado ya en temas de web, no tiene misterio. Simple estructura básica html con un enlace a la CDN de AngularJS.
<!DOCTYPE html> <html> <head> <title>Hello forCoders! - Angular JS</title> <!-- AngularJS --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script> </head> <body> </body> </html>
Hasta ahora de AngularJS solamente tenemos un enlace… Que rollo, no? Vamos a jugar.
Algo a tener en cuenta y que nos da una primera pista que estamos trabajando en angular, es cuando encontramos en el html algún tag ng-, pero siempre encontraremos ng-app. Con este tag le decimos a AngularJS en qué región se usará el framework. De este modo, podríamos tener toda una web con otros frameworks, pero solamente la región que nosotros queramos aplicará Angular.
Añadid el siguiente código que más adelante lo iremos comentando. En él, querremos imprimir dentro del tag <h1> la variable {{texto}} la cual no tiene valor; pero ya se lo pondremos. Comentar que las dobles claves indica a Angular que debe renderizar lo que tiene dentro, ya sea una variable, un cálculo, etc.
<html ng-app>
...
<body>
<div>
<h1>Hello {{texto}}</h1>
</div>
</body>
...
Ejemplo 1: Cargar datos con ng-init
Con la directiva ng-init = «», podemos inicializar variables para luego usarlas durante el html (Puntualizar que no se recomienda usar dicha directiva, ya que los valores se modificarán cuando usemos controladores y módulos). Introduzcámoslo inicializando una variable llamada “texto” con valor “forCoders” y veremos mejor como actúa.
Código:
...
<div ng-init="texto='forCoders'">
<h1>Hello {{texto}}</h1>
</div>
...
Resultado:
Comentario:
Como podéis apreciar, en el tag ng-init podemos inicializar variables para luego usarlas en la web. Estas solo tendrán el valor que le indiquemos en ng-init cuando se cargue la página por primera vez. En el siguiente ejemplo, veremos como cambiar dicho valor.
Ejemplo 2: Cargar datos con ng-model
Con la directiva ng-model puesto en un TexBox, veremos que estaremos enlazando elementos HTML con datos de la aplicación de AngularJS. En nuestro caso, recogiendo el valor del TexBox y automáticamente lo mostraremos en {{texto}}.
Dicha directiva también nos proporciona otras funcionalidades:
- Provee validación de tipos de los datos de la aplicación ( número, email, requerido).
- Provee de estado a los datos de la apicación (invalid, dirty, touched, error).
- Provee de clases CSS a los elementos HTML.
- Enlaza elementos HTML a formularios.
Código:
<div ng-init="texto='forCoders'">
<h1>Hello {{texto}}</h1>
<input ng-model="texto" type="text" />
</div>
Resultado:
Comentario:
En este ejemplo estamos jugando con ambos tags. Con ng-init para inicializar el valor de {{texto}} y ng-model para coger o modificar el valor según lo que introduzcamos en el textbox.
Conclusión
Como vemos, ng-init inicializa el valor de la variable texto, este valor se printa en {{texto}} y ng-model lo introduce en el textox. Finalmente, cuando modificamos el valor que hay en el textbox, veremos como se modifica el valor de nuestra variable y acto seguido cambia el título de nuestra web!
Espero que os haya sido de utilidad, volveremos pronto con más sobre AngularJS!