AngularJS: Inicio Rápido

! This post hasn't been updated in over 2 years.

AngularJS es un framework para la creación de aplicaciones web en Javascript, es una excelente herramienta y en este articulo les hablare de como pueden comenzar a usarlo de una forma sencilla, realmente no soy un experto en AngularJS sin embargo voy a tratar de platicar acerca de mi experiencia y espero esto les pueda ayudar, por supuesto cualquier comentario es bienvenido .

Lo primero es comenzar, en este breve video de 5 minutos ustedes verán rápidamente un poco  de lo que se trata AngularJS:

Conceptos básicos.

Lo primero que tenemos que entender es que AngularJS trabaja muchísimo sobre HTML, extendiéndolo, y este es el primer punto clave a la hora de desarrollar con Angular:

AngularJS extiende HTML, lo mejora!!!

Normalmente esto seria una practica poco recomendada, sin embargo en este caso podemos hacerlo debido a que lo que vamos a hacer es precisamente extender HTML.

AngularJS utiliza nuevos atributos o tags en HTML para extenderlo, a esto le llamamos directivas y lo mas común es ver atributos que inicien con el prefijo “ng”, una directiva muy importante en nuestra app es ng-app y esta ayuda a iniciar una aplicación, puedes egragr este atrbuto en cualquier parte de tu aplicacion, aunque es comun verlo en el tag html, simplement con agregar este tag ya estamos corriendo una aplicacion AngularJS.

<!DOCTYPE html>
<html ng-app>
 ... 
</html>

Vamos hablando de los conceptos básicos que usa AngularJS:

Controllers: Una aplicación de AngularJS esta formada por controladores, y cada uno de ellos engloba una parte de tu aplicación.

Scope: El scope es como el pegamento entre la vista y los modelos, algo asi como lo que llaman ViewModel en el patron MVVM, cada vez que tu actualizas un modelo en un controlador este valor se actualiza en la vista tambien, $scope es una parte muy importante de AngularJS, lee sobre el tema, los métodos relacionados y experimenta con ellos. 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 parent del scope actual.

Directives: Basicamente las directivas encapsulan bloques de codigo reusables, que pueden incluso tener cierta logica y que sera usado dentro de nuestro HTML, es decir, extienden HTML, AngularJS ya incluye muchas directivas muy útiles para ti, sin embargo es posible crear nuevas.

Templates: Muchas cosas en Angular están relacionadas con una vista, y esta se puede usar en forma de templates, lo mas común es relacionar controladores y directivas con templates.

Services/Factories: En una idea MVC esto podría ser el Modelo de tu aplicación.

Filters: Este concepto se usa en 2 partes de angular, la mas importante es que puedes usar un filter para darle formato a tus variables, por ejemplo le puedes aplicar un formato de moneda a un valor numérico, en esta caso AngularJS tambien viene con algunos pero tu puedes crear los tuyos. El otro concepto relacionado es el que usamos con la directiva ng-repeat, esta directiva permite repetir elementos HTML basados en un arreglo y los filtros nos ayudan a definir que elementos se muestran.

Modules: AngularJS ofrece módulos para organizar tu codigo, son una excelente herramienta, de hecho puedes crear módulos e incluirlos dentro de otros, esto muchas veces ayuda dividir mejor los archivos de tu proyecto. Nota importante: Cuando creas un modulo se hace con la funcion angulra.module, esta recibe el nombre del modulo y  sus dependencias, en caso de que no existan dependencias debes pasar un arreglo vacio, es muy importante este parametro o tu modulo no funcionara.

Inyección de dependencias.

Todo en AngularJS se maneja usando inyección de dependencias, de hecho los mismos servicios que vienen con AngularJS deben ser inyectados para poder ser usados, también tus módulos deben ser inyectados, por ejemplo puedes tener un modulo especial que agrupe todos los filtros que necesitas y luego inyectar para ser usado en tu aplicación.

Este modo de trabajar AngularJS lo hace de una forma muy sencilla y el se encargara de inyectar automaticamente lo que necesita, por ejemplo, cualquier controlador necesita trabajar con $scope, y basta con simplemente agregar la variable $scope como parametro de nuestra funcion, AngularJS se encargara de inyectar lo que sea necesario.

Servicios de AngularJS.

Existen varios servicios que AngularJS ofrece, algunos de los mas importantes son:

$http: Es lo que comúnmente llamamos Ajax, permite hacer peticiones a servidores remotos y siempre regresa una promesa, las promesas son un patron de diseno muy util a la hora de usar programacion asincrona, y un buen tema para estudiar.

$location: Permite controlar las url de tus paginas, de este modo puedes usar back and forward de tu navegador aunque realmente no estés cambiando de pagina.

Por convención los servicios de AngularJS comienzan con el signo $, por esto no es recomendable que nombres así tus servicios propios.

Rutas

AngularJS brinda un excelente sistema de rutas el cual te permite crear una aplicación mucho mas tipo MVC, este sistema de rutas ayuda mucho

Donde comenzar

Pues para empezar la pagina oficial de AngularJS es un buen punto de inicio, de ahí puedes descargar AngularJS y ver la documentacion, aunque en muchos casos no es muy buena, la comunidad ayuda con buenos comentarios y ejemplos.

AngularJS ofrece un template de aplicación llamado angular-seed este proyecto muestra un esqueleto básico para una aplicación de AngularJS.

El canal de YouTube de AngularJS esta lleno de excelentes videos.

Existen excelentes librerías externas que ayudan a que tu experiencia con Angular sea aun mejor, por ejemplo angular-ui y angular-strap.

Batarang es una extensión de Google Chrome que te ayudara a depurar tus archivos de AngularJS.

Una excelente pagina donde te muestran Angular con pequeños ejemplos es http://egghead.io/

Busca artículos y ejemplos, en Internet encontraras muchos, checa las fechas y las versiones que usan:

http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED

Algunos tips y consejos.

Deja de pensar en términos de JQuery o MooTools, AngularJS requiere cambies un poco tu mentalidad al programar, para empezar: Deja de acceder el DOM desde tus Controladores!!!

AngularJS y PHP Template engines: algunos template engines de PHP como twig usan una sintaxis muy similar a AngularJS, es por esto que puedes modificar la configuración de AngularJS y cambiar el uso de {{ }} por algo como [[ ]].

Protegiendo tus templates, cuando desarrollas con tecnologías Server side es común que no te sientas muy cómodo usando templates públicos, una solución muy sencilla y que ademas puede ayudarte al performance, es incluir tus templates en el mismo código que usas en tu vista, esto lo puedes hacer agregando bloque de código con la siguiente forma:

<script type="text/ng-template" id="nombreDelTemplate.html">...</script>

Compartiendo datos entre controladores, los Services en AngularJS funcionan como Singleton, es por eso que si usas un Service en dos controladores puedes estar intercambiando datos entre ellos.

Usando 2 apps en un archivo, la directiva ng-app ayuda  a inicializar tu aplicacion de forma automática pero solo funciona con la primer ocurrencia de ng-app, este proceso también se puede realizar usando el método bootstrap de angular e incluso podrías inicializar múltiples ng-apps.

En caso de que necesites saber cuando el DOM esta listo, algo como el ready de jQuery, puede usar el servicio $timeout de AngularJS, no es muy elegante pero funciona.

$timeout(function(){console.log("DOM Ready!!!");});

AngularJS $scope.apply() puede causarte algunos problemas, sobre todo cuando eres nuevo en este framework, tal vez este Safe apply te puede ayudar.

https://coderwall.com/p/ngisma

Cuando cambias de ruta en AngularJS el contexto se reinicia, sin embargo esto se puede evitar usando la propiedad reloadOnSearch

$routeProvider
     .when(
        "/users/index",
         {
          templateUrl: '/users/list.html', 
          controller: UsersListController,
          reloadOnSearch: false
          } 
          ....
     )

Angular-ui cuenta con un excelente Router que amplia las capacidades de AngularJS.

La directiva ng-cloak permite ocultar elementos hasta que AngularJS los tiene listos, sin embargo en algunas ocasiones tus hojas de estilo pueden interferir, agregando el siguiente código a tus hojas de estilo lo soluciona.

En AngularJS es muy común ver elementos del tipo {{variable}} sin embargo es importante que sepas que la directiva ngBind hace exactamente lo mismo.

Que sigue?

La era de Javascript ya esta aqui y este lenguaje esta tomando cada día mas protagonismo, por eso es importante que no dejes de actualizarte en este tema, ademas de que sigas aprendiendo AngularJS, existen muchas otras cosas que puedes aprender para seguir creciendo, algunas de mis recomendaciones son las siguientes.

Agregar un gestor de paquetes para Javascript es una excelente idea, Bower es una gran opción.

RequireJS tambien ayuda mucho a organizar la forma en la que se llaman tus archivos.

Para BDD/TDD AngularJS usa Jasmine, de hecho las mismas pruebas de AngularJS están sobre lo mismo.

NodeJS con ExpressJS son una excelente combinación para comenzar a desarrollar del lado del servidor usando javascript.