Después del veranito empezamos con las pilas bien cargadas. En los artículos anteriores empecé a escribir sobre Ionic Framework e incluso creamos una aplicación simple. Como ya comenté, esta tecnología tiene como base AngularJS, así que hoy voy a escribir sobre este framework, de cara a poder entender mejor el funcionamiento de Ionic.

¿Qué es AngularJS?

AngularJS es un framework de JavaScript open source, mantenido por Google. Está orientado sobre todo a las denominadas Single Page Applications (Aplicaciones de una sola página). Su objetivo es facilitar el desarrollo y el testeo de dichas aplicaciones, respondiento a patrones de arquitectura como MVC o MVVM.

Librería de AngularJS

A pesar de que al crear una aplicación de Ionic esta librería ya está referenciada, desde el HTML deberíamos incluir esta referencia:

<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></script>

Modelo y Vista: Una simbiosis

Una de las peculiaridades de AngularJS es la adaptación a patrones de diseño como MVC (Model View Controller), MVVM (Model View ViewModel), MVP (Model View Presenter).

En este punto vamos a demostrar cómo funciona la relación Vista-Modelo en AngularJS. Como veremos, la actualización es bidireccional. El modelo constará de un elemento “Nombre“. A medida que la vista (una caja de texto) vaya actualizándose, se actualizará el modelo y a su vez, cuando se actualice el modelo, automáticamente se actualizará el valor en la vista.

En el siguiente ejemplo vamos a crear una página que solicite el nombre del usuario y que dicho nombre se imprima dentro de un <p>. Para ello, al input le estableceremos el atributo ng-model para que actualice el modelo. Y al elemento <p>, le estableceremos el atributo ng-bind, para que recoja el nuevo valor del modelo a medida que éste se actualice. Un elemento a tener en cuenta es la etiqueta body, a la que le indicamos mediante el atributo ng-app que va a manejar una aplicación AngularJS

Directivas comunes

Al trabajar con AngularJS, vamos a ver que la clave es combinar correctamente las directivas o atributos de que disponemos. Para que la validación HTML sea correcta, es posible añadir el prefijo “data-“ a las siguientes directivas

  • ng-app: Se aplica sobre un contenedor y especifica que su contenido va a a ser manejado por una aplicación AngularJS
  • ng-model: Se suele aplicar en los controles de formulario para indicar que debe estar sincronizado con el modelo. Es decir, se aplica lectura y escritura sobre el modelo que se le indique
  • ng-bind: Al aplicarlo sobre un elemento, le indicamos que el contenido o valor de dicho elemento va a estar leyendo continuamente las actualizaciones del modelo. A diferencia de la directiva anterior, estaríamos hablando de una actualización de sólo lectura.
  • ng-init: Se aplica en el mismo elemento en el que se declare ng-app y permite establecer unos valores iniciales para el modelo.

Basándonos en el ejemplo anterior, voy a modificar el ejemplo para que ahora proponga un nombre antes de que el usuario escriba en la caja de texto. Por otro lado, añadiré otra caja de texto pidiendo verificar el nombre, de tal manera que haya dos cajas de texto realizando operaciones de lectura y escritura contra el mismo modelo.

Hasta aquí hemos visto un para de conceptos básicos, en el siguiente artículo veremos cómo manejar Módulos, Scopes y Controladores.

¡Hasta la próxima!

Rupert.