Podemos decir que vivimos en una auténtica época de cambio. Cada día vemos tecnologías, aplicaciones o páginas webs que se realizan con diferentes lenguajes de programación.
Hoy comenzaremos a hablar de AngularJS, un framework creado y mantenido por Google. Esto significa que va a pegar fuerte durante mucho tiempo.
AngularJS es un framework que nos facilita el trabajo de manera muy notable. Podemos pensar que jQuery también lo hace. jQuery nos permite realizar cosas geniales, pero con AngularJS podemos vincular los datos con lo que vemos y además de manera organizada en nuestra aplicación. AngularJS utiliza un patrón de diseño como el MVVM (ya que permite interactuar vista y modelo rápidamente), muy utilizado en aplicaciones pero hasta ahora no se había utilizado apenas con Javascript. No obstante, existen más frameworks que utilizan el MVC como BackboneJS o EmberJS.
Poco a poco iré poniendo ejemplos de código en AngularJS para que vayáis viendo el partido que se le puede sacar a éste framework.
AngularJS extiende el HTML de manera que podemos trabajar con nuevos tags de HTML. Para ello utiliza un prefijo para los tags que implementa. El prefijo es ng.
Términos principales de AngularJS:
Modules
AngularJS ofrece módulos para organizar el código. Gracias a esto podemos dividir de manera clara el código de nuestra aplicación y organizarlo de manera adecuada. Para cargar módulos utilizaremos angular.module(‘nombreModulo’,array_dependencias). Si no tenemos dependencias pasaremos el array vacío.
var myApp = angular.module('myApp',[]);Controllers
Los controladores son una parte importante de las aplicaciones con AngularJS. Con ellos podemos encapsular lógica para diferentes módulos de nuestra aplicación. Primero cargamos nuestro módulo y sobre el módulo inyectamos el controlador. Un ejemplo es el siguiente:
myApp.controller('MyController', function($scope) {...}
Scope
El scope podemos definirlo como el pegamento entre la vista y los modelos. Se podría llamar el ViewModel en el patron MVVM. Cada vez que tu actualizas un modelo en un controlador este valor se actualiza también en la vista. Se define con la variable $scope y es una parte muy importante de AngularJS. Un punto importante es que cada elemento de AngularJS tiene su propio $scope y este se encuentra en una jerarquía similar a la del DOM, por ello es posible acceder a elementos especiales como puede ser el nodo root (o nodo padre).
Directives
Las directivas permiten encapsulan bloques de código para poder ser reutilizado. Angular ya cuenta con muchas directivas útiles pero si necesitas alguna más específica puedes crear una directiva nueva a medida.
Templates
Angular vincula las vistas con los controladores. Una buena forma de simplificar esto es creando templates que nos permitirán ser reutilizables.
Services/Factories
Los Servicios o Factories son los que nos permiten recuperar los datos de la aplicación. Es el modelo de datos.
Filters
Este concepto se puede utilizar de dos formas en angular. Primero, los filters pueden darle formato a las variables como las fechas o valores numéricos. El otro concepto relacionado es el que usamos con la directiva ng-repeat, esta directiva permite repetir elementos HTML basados en variables y los filtros nos ayudan a definir que elementos se muestran.
Two-way data binding
Todo se hace solo mediante Two-way data binding.
¿Qué es esto? Simplemente nos permite que los datos de la vista y el modelo permanezcan unidos de tal forma que al modificar los datos de la vista o del modelo se sincronicen en ambos sentidos. Con esto quiero decir que podemos estar rellenando un formulario y estar rellenándolo al mismo tiempo en el modelo.
