Angular JS: La facilidad del desarrollo web

Hoy día el desarrollo de aplicaciones web, en muchas ocasiones, obliga a utilizar varias tecnologías para lograr crear algo simple y a la vez mantenible lo cual nos lleva a tener un sistema/sitio que debería ser chico pero que no lo es, esto se debe en gran medida por los muchos lenguajes de programación involucrados para obtener el resultado esperado.

Un claro ejemplo seria utilizar HTML junto con PHP (o Java) para poder enviar un simple formulario o interactuar con algún servicio que provee la información necesaria para nuestro sistema. Con esta combinación de tecnologías se logra obtener algo sencillo, pero a su vez, se requiere mucho tiempo de desarrollo, y se termina teniendo una aplicación bastante pesada.

Frente a estas problemáticas de hoy en día sale al rescate un framework Javascript llamado AngularJS.

¿Que es?

AngularJS es un framework de javascript desarrollado por Google el cual implementa el patron MVC, como su nombre lo indica, funciona para separar en capas lo que es Vista, Modelo y Controlador permitiendo así tener en una sola tecnología lo que en otras es necesario combinarlas.

Además permite extender mediante tags personalizados en el Html, definir comportamiento y vincular variables entre lo que es la vista y el controlador, validación de formularios, manipular datos que se encuentran en JSON entre otras cosas.

¿Que ventajas tiene?

De entre las innumerables características que posee este framework, las mas esenciales e importantes a destacar en AngularJS son básicamente:

  • Directives

De entre todas las características esta es la que mas fuerza e identidad brinda el framework. Con las directivas de AngularJS se puede dar “significado y comportamiento al html”, pero ¿que significa esto?, esto significa que se pueden crear tags html que tengan un significado que sea legible e interpretado por otra persona y tener idea de que es lo que contiene ese tag sin saber en verdad lo que hace.

Con esto se logran varias cosas:

Primero, por un lado, se logra tener un HTML mucho mas limpio y reutilizable, evitando así código duplicado.

Por otro lado se logra encapsular el comportamiento del HTML y delegar en otro componente propio de AngularJS teniendo así centralizada la funcionalidad del HTML.

  • Routing

El sistema de routing que posee AngularJS es prácticamente indispensable para lograr una aplicación o página web verdaderamente rápida.

Este sistema permite configurar los mapeos de URL con los html a los que debería redirigirse, pero no solo esto sino que también permite decidir que URL son válidas para la aplicación y cuales no, y con esto se puede re direccionar o mostrar una pagina de error en caso de no cumplir con estas definiciones. Esto es una gran ventaja ya que no se delega la responsabilidad de la seguridad de re direccionamiento en otra tecnología o configuración del servidor sino que esto es controlado por AngularJS teniendo control absoluto del sitio haciéndolo muy seguro y confiable.

Para las personas que vengan o transiten el mundo de Java, el routing funciona de forma similar a lo que se conoce como el framework llamado sitemesh. Al funcionar de esta manera permite “inyectar” en el HTML únicamente lo que necesita mostrar sin tener que tener en el HTML código duplicado, logrando así, un alto rendimiento en el procesamiento de las paginas web que debe levantar el sistema y descargar del servidor únicamente lo necesario para mostrarlo.

  • Dependecy Injection

La inyección de dependencias es otra de las características más importantes de AngularJS puesto que con ellas se puede tener un sistema o aplicación web totalmente modularizada.

Esta particularidad no solo permite crear distintos componentes de la aplicación y relacionarlos entre si, sino que también, permite utilizar módulos desarrollados por otras personas que sirvan para el negocio en cuestión.

¿Como lo uso?

Si bien el framework está disponible en el sitio de AngularJS para utilizarlo con el CDN especificado directamente en un tag de script dentro de la aplicación a desarrollar, o bien descargándolo al disco y utilizarlo desde allí, es recomendable utilizar las siguientes tecnologías que ayudan no solo a incrementar la velocidad en el desarrollo de la aplicación, sino que también, va a servir a mantener el control y poder instalar muchas de las funcionalidades y módulos que se le pueden agregar al sistema a través de AngularJS

Como recomendación para poder instalar AngularJS debemos previamente tener instalado NodeJs y npm, para luego poder instalar Bower el cuál funciona como un gestor de dependencias de librerías y frameworks Javascript. Para las personas que tengan conocimientos de Java, Bower se asemeja muchísimo a lo que seria Maven (Java) o composer (PHP) como para que se den una idea.

Luego de haber credo la carpeta del proyecto dentro de la misma ejecutamos el comando siguiente:

Luego de ejecutado el mismo va a crear (en el mismo lugar del filesystem donde se ejecuto el comando) una carpeta llamada bower_components, dentro de la cual, se encontrará el framework de AngularJS con el minificado del mismo para utilizarlo en su forma mas óptima a nivel tamaño, o bien, en su forma normal para cualquier modificación que se le quiera hacer al framework.

Luego de esto, solo basta con agregar la ruta del source de donde se encuentra el framework, un ejemplo seria el siguiente:

Agregando esta linea en el HTML (ya sea en el head o en el body del HTML) ya se pueden acceder a todas las funcionalidades que ofrece el framework de Google.

La idea de este post no es sobrecargarlo con demasiada información de como crear una aplicación desde cero con AngularJS, sino brindarles un panorama o una idea de como funciona y cuales son las fortalezas el mismo. El “como utilizarlo” se encuentra disponible en el post Angular JS: Creando una aplicación desde cero

Google publicó un curso online gratuito para aquellos que quieran aprender a utilizar el framework y no tengan idea de como empezar. El curso esta disponible en Code School en este link.

Conclusión

Con AngularJS podemos crear aplicaciones web de una forma fácil, sencilla y muy rápida gracias a las directivas, routing e inyección de dependencias que provee el framework MVC de Google.

You may also like...

2 Responses

  1. Alejandro Garcia dice:

    Que tal una duda, al instalar el paquete de Node.JS de su sitio oficial se instala también NPM o hay que hacerlo por separado, se que de igual forma se puede descargar directamente el framework de Angular de su página oficial para usarlo, pero me pareció hacerlo como buena practica la forma que mencionas para poder instalar los paquetes, saludos

    • Teraswap Teraswap dice:

      Alejandro, ya desde un tiempo a esta parte cuando instalas NodeJs tambien se instala npm.
      Puede ser que si lo instales desde los repositorios de Linux esten un poco desactualizados y debas instalar tanto NodeJs como npm.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *