Una introducción a AngularJS

Cuando me encontré con AngularJS hace un par de semanas, al principio me intrigaba. Para cuando trabajé en el conjunto de tutoriales disponibles en el sitio web de AngularJS, estaba encantado de haber encontrado este marco.

¿Qué es AngularJS? AngularJS es el (relativamente) nuevo chico en el bloque de codificación. Para citar desde su sitio web es "un marco estructural para aplicaciones web dinámicas", que es especialmente adecuado para desarrollar aplicaciones web de una página, aunque ciertamente no se limita a eso.

Desarrollado en 2009 por Miško Hevery y Adam Abrons, ambos empleados de Google en ese momento, es completamente JavaScript y completamente del lado del cliente, por lo que en cualquier lugar que se pueda ejecutar JavaScript, AngularJS puede ejecutarse. También es pequeño: comprimido y minificado tiene menos de 29 kb. Y es de código abierto bajo la licencia de MIT. Incluso puede usar el logotipo, disponible bajo la licencia Creative Commons Attribution-ShareAlike 3.0 Unported.

Según Wikipedia, el objetivo de Angular "es aumentar las aplicaciones basadas en navegador con la capacidad de modelo-vista-controlador (MVC)" y lo hace, proporcionando un marco vinculante / MVC. Eso es vinculante en ambos sentidos, fíjate. Delicioso. Con una estructura tan simple como {{mis datos}}, vincula datos a su página. El servicio $ scope detecta cambios en el modelo y modifica las expresiones HTML en la vista por medio de controladores. Trabajando en la otra dirección, los cambios a la vista se reflejan en el modelo. Esto elimina la necesidad de la gran mayoría de las manipulaciones de DOM centradas en datos que muchos de nosotros, incluido yo mismo, damos por sentado cuando trabajamos con una biblioteca como jQuery.

Angular se ejecuta inmediatamente, sin dependencias de biblioteca, aunque puede ampliarse con muchos módulos disponibles y, por supuesto, puede crear uno propio que se adapte a sus necesidades específicas. Al ser JavaScript puro, también tiene la ventaja de ser independiente del servidor.

Al estar acostumbrado a una poderosa biblioteca como jQuery, es fácil querer mezclarla para hacer cosas que Angular ya puede hacer. Reconociendo esta trampa potencial, los desarrolladores tienen esto que decir: "Si estás luchando por romper el hábito, considera eliminar jQuery de tu aplicación. De Verdad. Angular tiene el servicio $ http y potentes directivas que lo hacen casi siempre innecesario. "Una cosa es segura, si se apega a Angular, los bucles jQuery y el intercambio explícito con el servidor estarán ausentes de su código, ya que Angular proporciona un método tan sucinto y limpio para lograr las mismas cosas.

Directivas

Angular usa directivas para conectar su acción en la página. Las directivas, todas prologadas con ng-, se colocan en atributos html.

Algunas directivas comunes que vienen preconstruidas con Angular son:

ng-app: este es esencialmente el punto de entrada inicial de Angular a la página. Le dice a Angular dónde actúa. es todo lo que se necesita para definir una página como una aplicación angular.

ng-bind: cambia el texto de un elemento al valor de una expresión.
mostrará el valor de 'nombre' dentro del lapso. Cualquier cambio en 'nombre' se refleja instantáneamente en el DOM donde quiera que se use la variable.

ng-controller: especifica la clase de JavaScript para la acción dada. Los controladores generalmente se guardan en archivos .js externos.

ng-repeat: crea las estructuras de bucle muy limpias en su página.

{{item.description}}

sin esfuerzo recorre cada elemento de la colección.

Todavía no los he usado, pero he leído que la creación de directivas personalizadas puede ser un asunto complicado, algo que toma algo de tiempo para abarcar. Angular ofrece un video para ayudar a aclarar el concepto.

Algunos ejemplos de código

Como se mencionó anteriormente, la directiva ng-app en el etiqueta establece el escenario para que Angular se ejecute en la página.

Añadir al encabezado de página para incluir el marco angular mismo.

señala el archivo JavaScript externo o los archivos que contienen las clases de JavaScript que llamará su aplicación Angular. Una clase muy simple, como ejemplo, podría ser:

function ItemListCtrl ($scope) {$scope.items = [{ "description": "coffee pot" }  , {"descripción": "pistola nerf"}, {"descripción": "teléfono"},];} 

Al pasar ng-controller "ItemListCtrl", el nombre de mi clase de JavaScript imaginario, le dice a Angular qué código ejecutar:

y la notación de doble corchete le dice a Angular qué expresiones evaluar.

ng-repeat es una directiva de repetidor maravillosamente sucinta que recorre la colección actual y realiza la acción especificada o proporciona los datos especificados. Es tan simple y limpio.

Stuff on my desk:
{{item.description}}

Esta sencilla configuración mostrará:

Stuff on my desk:coffee potnerf gunphone

Es cierto que eso no parece tan impresionante, pero la idea en sí misma es. El marcado y los controladores de página muy simples hacen que comenzar con Angular, bueno, muy simple.

Obtener datos reales en su aplicación es agradablemente simple también. Angular le gusta consumir JSON:

function ItemListCtrl ($scope, $http) {$http.get(‘items/list.json').success(function (data) {$scope.items = data;}  } 

Esto devuelve un objeto JSON que puede manipularse a voluntad en su aplicación angular.

¡Y está hecho para pruebas también!

Uno de los principios básicos en que se fundó Angular fue que las aplicaciones creadas con él pueden probarse por completo. Para las pruebas de extremo a extremo, tenemos Angular Scenario Runner para simular las interacciones del usuario con su aplicación. Usted alimenta las pruebas de escenarios escritas en JavaScript.

Para la depuración en el navegador, AngularJS Batarang es una extensión de Chrome disponible en github.

Recursos

A medida que AngularJS gane más tracción, habrá más recursos disponibles, pero ya hay una cantidad de sitios que brindan instrucciones y formas de ampliar Angular.

los Sitio AngularJS en sí mismo, es por supuesto tu fuente definitiva. Ofrecen tutoriales sencillos y sólidos y tienen una actividad bastante activa Presencia de Google+

Hay una serie de Angular repositorios en GitHub.

Módulos angulares, ofrece una colección de módulos enviados por el usuario, desde servicios Backbone hasta la integración de Rails.

¿Ya usaste AngularJS? ¿Cómo se compara con bibliotecas mucho más grandes como jQuery? Háganos saber en los comentarios.

Imagen / miniatura destacada, imagen de ángulo a través de Shutterstock.