30/11/2017 Qu es AngularJS?

Primeros pasos para aprender el framework de JS

Qu es
AngularJS?
Primeros pasos
para aprenderlo

AngularJS es un framework MVC de JavaScript para el

Desarrollo Web Front End que permite crear
aplicaciones SPA Single-Page Applications. Entra dentro
de la familia de frameworks como BackboneJS o EmberJS.

Con tanta oferta de frameworks se nos hace difcil elegir cul usar en

nuestras aplicaciones, qu ventajas tienen unos frente a otros, etc. En esta

entrada voy a comentar que hace a AngularJS diferente al resto y unos

https://carlosazaustre.es/empezando-con-angular-js/ 1/7
30/11/2017 Qu es AngularJS? Primeros pasos para aprender el framework de JS

cuantos enlaces a recursos online donde aprender a usar este framework

y coger soltura. All vamos.

ACTUALIZACIN: Nueva entrada en el blog con un sencillo tutorial

de cmo crear una aplicacin web con Angular JS y una API

REST en Node.

Anteriormente en la parte Front-End de las aplicaciones web slo

tenamos a jQuery (adems de otras libreras parecidas como Mootools,

Prototype,) para ayudarnos con el cdigo JavaScript del cliente.

Podamos manipular el DOM de una forma ms sencilla, aadir efectos,

llamadas AJAX, etc pero no tenamos un patrn a seguir. Todo el cdigo

JS iba en funciones que bamos creando segn necesitramos, lo que

provocaba que con el tiempo el cdigo fuera difcilmente manejable y se

convirtiese en el temido Spaguetti Code.

Por suerte surgieron frameworks que implementaban el patrn MVC

(Modelo, Vista, Controlador) y nos ayudaban a separar conceptos. El ms

conocido es BackboneJS, que surgi en 2010 creada por Jeremy

Ashkenas(Creador tambin de CoffeeScript) y depende de otras 2

libreras: jQuery y Underscore.js Es usado por mltiples Start-ups

como Pinterest, Foursquare, AirBnB, Trello, etc

BackboneJS te permite crear tu app rpidamente aunque en ocasiones es

https://carlosazaustre.es/empezando-con-angular-js/ 2/7
30/11/2017 Qu es AngularJS? Primeros pasos para aprender el framework de JS

complicado de utilizar. La mayora de los desarrolladores eligen

BackboneJS porque parece la opcin ms segura, lleva ms tiempo entre

nosotros, hay mucha documentacin sobre l y est mantenido por una

gran comunidad.

Sin embargo AngularJS est pisando fuerte. Aunque su primera versin

es de 2009, se ha hecho muy popular a finales de 2012 y ahora en 2013

est en pleno auge. Tanto que ya se habla de una nueva technology

stack como antes era LAMP (Linux + Apache + MySQL + PHP) ahora la

tendencia es MEAN(MongoDB/Mongoose + ExpressJS + AngularJS

+ NodeJS), lo que tambin se traduce a aplicaciones JavaScript End-to-

End. AngularJS est mantenido por Google y bastante comunidad.

https://carlosazaustre.es/empezando-con-angular-js/ 3/7
30/11/2017 Qu es AngularJS? Primeros pasos para aprender el framework de JS

Tambin como punto a su favor est lo sencillo que crear Tests unitarios

y End-to-End con Jasmine y Karma, algo que suele ser un poco costoso al

principio.

Este es un ejemplo de como se implementa el patrn MVC en AngularJS:

//Model: Objetos JavaScript

$scope.files = ['foo','bar', 'baz'];

<!-- View: HTML -->

<div ng-repeat="f in files"></div>

//Controller: Cdigo Javascript

function addFile(fileName){
$scope.files.push(fileName);
}

lo que da como resultado:

foo
bar
baz

AngularJS permite extender el vocabulario HTML con directivas y

https://carlosazaustre.es/empezando-con-angular-js/ 4/7
30/11/2017 Qu es AngularJS? Primeros pasos para aprender el framework de JS

atributos, manteniendo la semntica y sin necesidad de emplear libreras

externas como jQuery o Underscore.jspara que funcione. Para aprender a

utilizar este framework en poco tiempo os recomiendo sigis estos pasos

que Joel Hooks cita en su blog:

1.Tutorial oficial de AngularJS

Google ha puesto a disposicin de nosotros en la pgina oficial del

proyecto un tutorial paso a paso a travs de una sencilla aplicacin web

(Un catlogo de Smartphones) que nos sirve para entender lo bsico y el

vocabulario. La nica contra de este material es que utiliza como plantilla

el proyecto angular-seed que aunque es bueno para aprender, no es

recomendable para un proyecto real que necesite escalar. Aun as,

empezar por aqu es un buen paso.

2. Video-Tutoriales deEgghead.io.
Una vez completado el tutorial el siguiente paso es echar un vistazo a los

videos de John Lindquist, un experto desarrollador en AngularJS. Son

vdeos cortos, de no ms de 8 minutos cada uno, en los que entra en

detalle en los conceptos ms difciles de AngularJS. Aunque no

entiendas todo de primeras no importa, ten estos vdeos presente para

ms adelante.

https://carlosazaustre.es/empezando-con-angular-js/ 5/7
30/11/2017 Qu es AngularJS? Primeros pasos para aprender el framework de JS

3. Un vistazo a unaAplicacin AngularJS

real

Ahora es momento de ver las tripas de una aplicacin AngularJS que

funciona en el mundo real. El mejor ejemplo es el cdigo que

desarrollaron Peter Bacon Darwin y Pawel Kozlowski para el

libro Mastering Web Application with AngularJS. El cdigo fuente est

disponible en GitHub y podemos ver la estructura de directorios, el uso

de mdulos, testing, comunicacin con un API RESTful en el Back-End,

seguridad, etc. Es una aplicacin 100% MEAN !:)

4. Crea tu primera aplicacin

conNg-Boilerplate.
Llegados a este punto ya deberamos tener bastantes conocimientos para

construir una aplicacin con AngularJS. Para ello podemos utilizar el

proyecto ng-boilerplate el cual es una buena base para empezar a

desarrollar una aplicacin vlida para un entorno de produccin al

contrario que angular-seed el cual solo es vlido para aprender la

tecnologa.

Si consigues llegar hasta aqu, tendrs un buen conocimiento del

desarrollo de aplicaciones web usando AngularJS, yo me encuentro ahora

mismo entre la 2 y 3 etapa y voy viendo los avances, por lo tanto

i d i t
https://carlosazaustre.es/empezando-con-angular-js/
i t i t d t 6/7
30/11/2017 Qu es AngularJS? Primeros pasos para aprender el framework de JS
recomiendo seguir estos pasos si ests interesado en este nuevo

framework, el cul creo que en poco tiempo pasar a ser bastante ms

usado que Backbone.

Quieres ms? Descarga mi ebook en espaol sobre desarrollo web

gil con AngularJS y GulpJS.

https://carlosazaustre.es/empezando-con-angular-js/ 7/7