El día de hoy estaremos hablando de uno de los Frameworks más interesantes de hoy en día, Angular JS. Para aquellos que no estén familiarizados con él, es un Framework que trabaja con un patrón de diseño MVC (Modelo-Vista-Controlador), desarrollado por Google en Javascript. Dicho Framework es de código abierto y consiste básicamente en un conjunto de librerías, que nos permitirán trabajar del lado del cliente, realizando aplicaciones del tipo SPA. Comencemos con la Introducción a Angular JS.
Introducción a Angular JS
Algo muy interesante sobre este Framework es que, si bien tenemos una gran variedad de dónde elegir, ya que hay gran cantidad de Frameworks Javascript que nos ayudan a desarrollar aplicaciones web, Angular JS tiene varias características que veremos más adelante que lo hacen realmente poderoso a la hora de trabajar del lado del cliente. Y no olvidemos por supuesto, que su desarrollador es nada menos que Google.
Algo muy interesante sobre él, es que nos permitirá realizar aplicaciones del tipo SPA (Single Page Application), es decir que nuestra web, podrá cambiar dinámicamente, sin necesidad de recargar toda la página, algo que sin dudas aumenta la experiencia de usuario, ya que la velocidad y performance mejora de gran manera.
Por otro lado, esto no significa que no podremos realizar aplicaciones más robustas y complejas, al contrario, Angular JS, es un Framework muy poderoso que nos permite un abanico de posibilidades en cuanto a desarrollo de web se trata.
¿Cómo trabaja Angula JS?
Siguiendo con la Introducción a Angular JS, ahora que ya conocemos un poco más lo básico de este Framework, con qué tecnologías trabaja, para que nos sirve y por quién fue creado, veamos lo que realmente lo hace interesante. Su estructura y forma de trabajo, así como también aquellos aspectos que lo destacan dentro de los demás Frameworks de su tipo.
Aquí podemos ver una lista de aspectos que debemos tener claros antes de comenzar a trabajar con él.
[wp-svg-icons icon=»screen» wrap=»i»] Templates, Plantillas o Views
Las plantillas o templaes en Angular funcionan de una forma un poco diferente al de la mayoría de los frameworks. Es decir, en la mayoría de los casos, es del lado del servidor en donde se mezcla la plantilla con los datos, y luego es entregado al usuario. En el caso de Angular, el servidor proporcionará los datos y la plantilla por separado, y será el Framework, del lado del cliente, quien se encargará de mezclar ambos para formar la vista que será lo que el cliente a fin de cuentas verá.
[wp-svg-icons icon=»cog-2″ wrap=»i»] Los Controladores
Los controllers o controladores, son quienes nos permitirán realizar la lógica de nuestra aplicación. Algo interesante además de los controladores en Angular, es que vienen en conjunto con otro aspecto, llamado Scope, del cual hablaremos más adelante, pero que cabe destacar, ya que es el controlador quien aumenta las propiedades y el alcance de nuestro Scope.
Un ejemplo de cómo sería un controlador en Angular, podría ser
app.controller(‘TestController’, [‘$scope’, function($scope) {
$scope.test= ‘Hola!’;
}]); Cómo vemos, nuestro controlador recibe una serie de parámetros. El primer parámetro corresponde al nombre que le estaremos asignando, mientras que el segundo será el array de dependencias que necesitemos, en caso de que así sea, y por último la función que éste realizará.
[wp-svg-icons icon=»link» wrap=»i»] El Scope
Como antes mencionamos, el Scope, está relacionado a nuestro controlador. Scope, es quien comparte la información entre la vista y el controlador en nuestra aplicación. Será básicamente, quien nos permitirá asignar nuevas funcionalidades en la vista u objetos.
[wp-svg-icons icon=»tree» wrap=»i»] Las Directivas
Las Directivas en Angular, son una de las cosas más interesantes en este Framework, ya que con ellas podremos aumentar la funcionalidad de nuestro HTML. Básicamente, lo que nos permiten es modificar nuestro DOM, para agregar ya sea funcionalidades, atributos, etc dentro de él.
[wp-svg-icons icon=»settings» wrap=»i»] Los Servicios
Los servicios, son la parte de Angular que se encargará de trabajar con el servidor. Será a través de ellos que se enviará o recibirá la información, que a su vez será enviada a los controladores para que realicen la lógica deseada. Los servicios se encuentran distribuidos en tres categorías, services, factories y providers. Aunque ya estaremos hablando de cada uno de ellos más adelante.
[wp-svg-icons icon=»wand» wrap=»i»] Los Filters o Filtros
Los filtros, son quienes nos ayudan a transformar datos dentro una vista, controlador o servicio.
Se usan de la siguiente forma:
{{ expression | filter }} Algunos ejemplos para que quede más claro serían:
{{ “Hola Mundo” | lowercase}}
{{ “Hola Mundo” | uppercase}} En el ejemplo, nuestro primer filtro mostrará «hola mundo» mientras que el segundo nos mostrará «HOLA MUNDO«.
Como ves ya tienes tu primer Hola Mundo luego de seguir paso a paso nuestra Introducción a Angular JS. ¿No fue tan difícil verdad?
Conclusión
Como podemos ver, hay varios aspectos de Angular JS que debemos aprender en principio, antes de comenzar a trabajar con él. Igualmente, nos daremos cuenta, si ya hemos trabajado antes con Frameworks del tipo MVC, que muchos de ellos, son bastante parecidos, sí podrán diferir en algunos detalles, pero básicamente el patrón es el mismo.
Lo bueno de Angular JS al final de cuentas, es que podremos mejorar la experiencia que le damos a nuestro usuario, veremos que nuestra web y sus secciones cargan a una velocidad significativa, además de que el hecho de poder cambiar partes de nuestra web si tener que estar cargando toda la página es algo que del lado del usuario gusta mucho.
Otro punto que podemos desde ya ver, es el hecho de que está escrito en Javascript. Y Javascript como todos sabemos, es un lenguaje realmente sencillo pero a la vez muy poderoso, con el podemos realizar infinidades de cosas y todo del lado del usuario, es decir que no tenemos que estar esperando por el servidor. Aumentando así, no solamente la performance y velocidad sino también la UX de nuestra web.
Esperamos que te haya gustado nuestra primera parte de la Introducción a Angular JS, síguenos pues pronto publicaremos la segunda parte.