Introducción a AngularJS

Bienvenidos al curso Introducción a AngularJS, mi nombre es William Bonilla y actualmente soy desarrollador en Ninja Web.

Comencemos…

¿Qué es AngularJS? Es un framework JavaScript desarrollado y mantenido por la gran empresa Google, es de código abierto, es decir cualquier persona con conocimientos de programación web puede hacer uso de él.

Angular surge de la necesidad de evitar el famoso código spaguetti que dificultaba el desarrollo por su estructura incomprensible, creando así una nueva forma de desarrollo de aplicaciones web de una sola página conocidas como Single-Page Applications con Angular.

Entonces nos preguntamos…¿Cómo funciona?

Angular hace uso del patrón Modelo Vista Controlador, tenemos el modelo el cual define la lógica de negocio de nuestras aplicaciones, el controlador que hace uso de esa lógica comunicándose entre sí para el manejo de la información, para luego ser presentada en las vistas que son las que el usuario final de la aplicación ve. En todo este proceso AngularJS interviene facilitando la comunicación entre todos estos elementos.

A parte de ser MVC, también Angular es MVVM (Model-View-ViewModel) en el cual el modelo es JavaScript, la vista HTML5 + CSS3 y la VistaModelo es el pegamento entre el Modelo y La Vista. Esto permite el Two-way data binding que asegura que cualquier cambio en el modelo se sincroniza y muestra automáticamente en la vista.

¿Cómo podemos empezar en el mundo del desarrollo web en este asombroso framework? Tener conocimientos de JavaScript, HTML5 y CSS3 es indispensable, además de conocer a la perfección el funcionamiento del patrón MVC. No olvidar también las buenas prácticas de programación como la documentación de código.

Para las vistas utilizaremos bootstrap 3.0 que es un conjunto de clases CSS y JavaScript que nos permiten crear interfaces web fácilmente.

Como todo desarrollador debemos conocer documentación oficial así como obtener el código fuente del framework con el que trabajaremos.

Para esto veremos la página oficial de Angular y de Bootstrap.

La página oficial de Angular es triple w angularjs.org.

Ok, tenemos aca el código en github por si queremos consultarlo además de la opción de descargar el framework si lo queremos minificado, sin comprimir, o descargar el archivo comprimido zip. Además de permitirnos utilizar el CDN.

En la parte de desarrollo que es la que nos interesa tenemos un tutorial oficial, además de una guía para desarrolladores y la documentación oficial del framework.

Como complemento utilizaremos Bootstrap cuya página oficial es getbootstrap.com, tenemos para descárgalo al igual que Angular, y su respectiva documentación.

Comenzaremos creando nuestro primer HolaNinja para el cual utilizaremos el editor de texto Sublime Text el cual está configurado con el paquete EMMET

...