TUT: AngularJS Parte 1 de 12: Introducción a AngularJS

Introducción

Recientemente comencé a aprender AngularJS, fue muy complicado para mí encontrar algún buen articulo detallado o un tutorial para principiantes de AngularJS. He tenido que leer de diferentes artículos, libros y tutoriales. Por eso decidí crear paso a paso ayuda para aprendices como yo, para que encuentren una ayuda completa de un singular canal. Angular es un rico framework por eso decidí escribir una serie de artículos que ayudaran a principiantes quienes quieran aprender a trabajar en SPA(Single Page Application) usando AngularJS. Estoy asumiendo que los lectores de este tutorial tienen noción de HTML y JavaScript/Jquery. Vamos a empezar con un corto pero detallado tutorial AngularJS donde serás capaz de entender rápidamente el poder de AngularJS en el mundo de la web.

Antecedentes

Habran oido a gente hablar de MVC/MVVM/MV*/MVW(Model View Whatever) o alguna vez han trabajado con estos, en algunos otros lenguajes de programación. Aunque MV*/MVW no son conceptos específicos de AngularJS, sino más bien un enfoque de arquitectura de programación el cual es implementado en variedades de lenguajes de programación y entornos de desarrollo. Esto depende del arquitecto de la arquitectura en como quiere la arquitectura del software y AngularJS provee facilidades para diseñar la aplicación en Model View and Whatever que quieres tener(vamos a decir MVC, MVVM etc.). Hay un montón de temas que vamos a estar cubriendo uno por uno en la parte posterior del presente tutorial, pero voy a tratar de hacer que estés familiarizado con al menos algunas de las terminologías que he utilizado aqui en esta parte del tutorial.

Bueno primero vamos a tratar de entender el concepto MV* relativo a AngularJS

Vista

La vista en una aplicación en realidad es una pieza que es representado en un navegador a través del usuario puede interactuar o ver cualquier dato que haya sido solicitada. en una aplicación AngularJS la vista esta compuesto por directivas, filtros y data-bindings. pero para hacer vistas simples y mantenibles nosotros no incluimos todo el código en la Vista. esto nos ayuda a separar el código de la vista y también hace que sea fácil escribir pruebas para la lógica de negocios.

Controlador

El controlador tiene toda la lógica de nuestra aplicación en AngularJS. El controlador controla y prepara lo datos en el formulario para que pueda ser presentado en la vista. Funcionalmente que controlador actualmente hace esto, que recoge todos los datos representados en el formulario y toma de la vista y lo asigna al modelo después de validarlo. El controlador es responsable de comunicar código de servidor para recuperar los datos desde un servidor utilizando peticiones Ajax y enviar los datos al servidor desde la vista.

Model/View Model/$Scope

Lo más importante y parte principal de la arquitectura MV* es el modelo o View Model o $Scope. $Scope es un término que es introducido en AngularJS y lo revisaremos en los posteriores artículos del presente tutorial. Model es el puente entre el Controlador y la Vista. Vamos a suponer que tenemos a un controlador asignado para el registro de usuarios, para este propósito se puede tener diferentes vistas para escritorio y otros vista para móviles.

En realidad el controlador esta en blanco acerca de las vistas y no tiene información acerca de las vistas y similarmente la Vista es independiente de la lógica implementada o presentación de datos en el controlador. $scope actúa como un tunel entre las vista y controladores.

La imagen de arriba está relacionada  al ejemplo de aplicación que vamos a crear en la parte posterior del artículo. Pero por ahora de la imagen puedes obtener una idea del patrón  MV*

¿Qué es exactamente AngularJS?

En mis términos AngularJS es nada diferente a HTML plano, sino simplemente una extensión para HTML con nuevos atributos. AngularJS es un framework estructurado JavaScript MV* o MVW para aplicaciones web dinámicas. Este es mantenido por Google para permitir desarrollar aplicaciones web con buena arquitectura y fácilmente mantenibles. AngularJS hace uso de programación declarativa para construir interfaces de usuario. AngularJS esta del lado del cliente y todas las cosas tienen suceso en los navegadores y se obtiene elegantes e independientes aplicaciones.

¿Por qué usar AngularJS?

Hay muchos framework front-end disponibles en el mundo web como Backbone, Knockout, Ember, Spline, etc. y todos de ellos tienen sus pro y contras. Pero como en este tutorial es acerca de AngularJS surge la pregunta ¿Que de peculiar hay en AngularJS? Aqui esta la respuesta a todas tus preguntas.

Con AngularJS necesitas escribir menos código, ya que este te permitirá reutilizar componentes. También este provee una manera fácil de dos vías bindings e inyección de dependencias. También AngularJS esta del lado del cliente todas las cosas suceden en el navegador, lo que da la sensación de aplicaciones independientes(Aplicación de escritorio).

Algunas de las razones porque preferir AngularJS es más bien porque AngularJS ha llegado con la opción con arquitectura para aplicaciones modernas que son descritas a continuación:

1. Se puede crear una plantilla y reutilizar en múltiples aplicaciones al mismo tiempo.

2. Puedes enlazar datos a cualquier elemento de dos formas, en ambos sentidos ya que significa se realiza el cambio de datos automáticamente cambiará elementos y cambio de elementos cambiara los datos.

3. Puedes directamente llamar al código code-behind en su HMTL.

4. Puedes validar formularios y campos de entradas antes de realizar el submit, sin escribir una sola línea de código.

5. Permite el control completo de la estructura DOM muestra/oculta cambios de todo con las propiedades de AngularJS.

6. AngularJS permite escribir flujo básico de testeo end-to-end, unit-testing y UI mocks.

En resumen, AngularJS provee todas las caracteristicas que necesitas para construir una aplicación CRUD como data-binding, validación de datos, ruteo de URL, componente HTML reutilizable y lo más importante inyección de dependencia.

Usando el Código

Vamos a comenzar con un plano HTML el cual no hay nada que hacer con AngularJS. primero creamos una página HTML Pargina1.html y agregamos una etiqueta DIV con un ID.



Nota: Para realizar los ejemplos puedes utilizar cualquier editor de texto en mi caso estoy usando SublimeText 3.0, el cual me permite instalar un paquete para la sintaxis de AngularJS(puedes revisar el TIP: Instalar paquete de Angular en SublimeText 3.0).

Ahora, vamos a seguir adelante y vamos a tratar de familiarizarnos con la terminología AngularJS que será usado en esta parte del tutorial. Vamos ahora a modificar nuestra página HTML y agregar referencia AngularJS para la página HTML el cual puedes o descargarlo de aquí(https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js) o usar como un script de referencia dentro de la secion HEAD de la pagina. En esta aplicación de ejemplo hemos descargado el archivo y referenciado de una ubicación física. También agregaremos algunas directivas más específicas para AngularJS.

Las Directivas no son mas que etiquetas y atributos HTML(Veremos mas esto en la siguiente parte del tutorial). Angular provee numerosas directivas ya definidas como ng-app, ng-controller, ng-class,ng-repeat y muchos más. puedes también crear directivas personalizadas el cual aprenderemos en la siguiente parte del tutorial. Aqui esta disponible la referencia al API(https://docs.angularjs.org/api/) para AngularJS, puedesbuscar y obtener mas informacion acerca de todas las directivas o descargar Angular Cheat Sheet(http://www.cheatography.com/proloser/cheat-sheets/angularjs/)

En el código anterior, hemos usado algunas directivas ng-app, ng-controller a un delimitador {{ }} para que AngularJS pueda evaluar la expresión. ahora la pregunta llega ¿Qué es exactamente ng-app y ng-controller? y ¿Qué importancia tiene en una aplicación AngularJS?.

ng-app es el importante de todas las directivas en AngularJS. define el alcance de nuestra aplicación que AngularJS puede entender y este puede ser usado dentro la etiqueta HTML o con la etiqueta DIV si se quiere definir el alcance para la extensión de un DIV. En nuestro caso queremos alcanzar la seccion DIV solamente, esto es porque tenemos un atributo ng-app asignado a DIV. Se puede asignar en la etiqueta HTML si se desea. en nuestro ejemplo hemos descrito que tiene un controlador llamado “MyController” y se quiere usar datos del controlador así que necesitamos proveer el valor ng-app tengo asignado con el nombre “MyApp”.

Otro atributo o se debería decir directiva porqu esta definido aqui es ng-controller. la directive ng-controller agrega una clase controlador a la vista. Esto dice a AngularJS que el controlador para el elemento DOM tiene el nombre “MyController” y los elemento hijos DOM tendrán el mismo controlador para ellos a menos que se especifique explícitamente a un nuevo controlador para ellos usando ng-controller. Es esta aplicación tenemos un controlador llamado “myController” el cual está agregado a ng-app=”MyApp”.

y aquí llega la tercera cosa {{ }} el cual nunca lo hemos vista en HTML plano o javascript(Jquery. {{ }} es el delimitador por defecto de AngularJS para límites de expresión. Esto tiene que ser usado cuidadosamente en directivas o atributos HTML y la razón es como AngularJs maneja internamente expresiones.

Vamos a proceder con la parte restante del ejemplo de aplicación y ver lo que tiene que hacer a continuación. tenemos creado un archivo llamado “app.js” esto se puede ver en el siguiente código:

Puedes ver que hay algunas cosas como angular.module. Module es como un contenedor para diferentes parte de nuestra aplicación como controladores, servicios, filtros, directivas, etc. Usando módulos podemos dividir nuestra aplicación en múltiples partes el cual trabaja de forma independiente. Nosotros tenemos asignado el módulo a una variable “app” el cual contendrá nuestro controlador dentro de ella.

ahora crearemos otro archivo llamado “mycontroller.js” el mismo que tiene el siguiente código.

Tenemos un nuevo término aquí “$scope”. scope mantiene la data Model que necesitamos para pasar a la vista. Esto usa AngularJs mecanismos Data Binding para enlazar datos del modelo a la vista.

finalmente la página HTML debería verse como el siguiente código:

Cuando abras en el navegador Pagina1.html verás lo siguiente:

Puntos de Interés

En esta parte del tutorial hemos visto una introducción acerca de AngularJS con una aplicación de ejemplo. Este tutorial debería ser de ayuda para iniciar o quienes estén interesados en trabajar con SPA.

¿Que hay para la siguiente parte?

AngularJS Parte 2 de 12: Data Binding en AngularJS