paulrrdiaz / angularjs

El poder de Angularjs

• Creado por Misko Hevery en el 2009
• Es un framework open source, mantenido por Google
• Tiene una excelente documentación
• Una gran comunidad de usuario que comparten conocimientos y aún sigue creciendo

La idea

El paradigma básico de angular es extender el DOM, para que nosotros dejemos de preocuparnos por el; y así, enfocarnos en la lógica de la aplicación. Además Angular te permite disociar enteramente el front-end del back-end, permitiendo el trabajo en paralelo y un proyecto escalable. Angular también nos da muchas facilidades al momento de crear un Single Page Application (SPA)

Off Topic - De aquí en adelante es probable que comiences a ver términos que quizás no conozcas, pero no temaís, que los conocerás...

Las 3 Ds (en inglés)

• Data-Binding: Se refiere a la sincronización automática entre el modelo y la vista. La vista es una proyección del modelo, si el modelo cambio, la vista cambia; y viceversa.
• Dependency Injection: La inyección de dependencias es una manera de mantener nuestro código con una estructura modular, por la cual angular apostó. Para entenderlo de la forma sencilla, imagina que creas una fábrica, un modulo, un controlador o cualquier otro componente de angular, solo debes de indicarle que dependencias necesita y serás feliz.
• Directives: Las directivas son la manera en la que extendemos los elementos del DOM (como atributo, clase o como un mismo elemento en sí).

Su centro

• Backbone: Es un framework MVC que entre sus principales funciones nos permite una sincronización RESTful con un CRUD backend.
• Underscore: Es una librería que te permite manipular la data de muchas formas interesantes para luego llegar a un template que puede ser renderizado y reutilizado.
• jQuery: Facilidad para manipular el DOM, implementa una manera sencilla y compatible de hacer peticiones AJAX. Angular cuenta con jqLite, algo como un mini-jQuery.
• AMD: La carga asíncrona de modulos, es un concepto muy interesante en js, no sería absurdo pensar que Requirejs es el más usado. La inyección de dependencias es una funcionalidad que Angular toma muy en serio.
• Handlebars: Es una librería para template, derivada de Mustache y es de mucha ayuda para tener estructuras de código definidas y reusables. Angular Templates tiene una estructura muy similar y amigable.

Y como funciona el Data-binding?

La explicaciones más sencilla es entendiendo 3 de las principales funciones de Angular.

• $watch() La función $watch es un Listener que espera algún cambio en algún componente de Angular.
• $digest() La función $digest es el Manager de la lista de watchers.
• $apply(): La función $apply llama al Manager y define el alcance que tendrá en ese momento.

Hasta ahora...

...hemos visto lo siguiente:

• ng
• ng-app
• ng-controller
• ng-model
• ng-show
• ng-hide
• ng-bind
• ng-repeat
• ng-submit
• ng-click
• $scope
• $scope.$watch()
• $scope.$digest()
• $scope.$apply()
• Angular Expressions
• $http
• filter
• orderBy
• ng-src
• ng-href
• ngRoute
• ngResources

Angular UI

Es un paquete de dependencias para facilitarnos la creación de ciertos elementos sobre Angular, por ejemplo:

• UI Bootstrap con sliders, datepickers, tabs, dropdown, pagination, modals, etc.
• UI Gmap Interacción con el API de google maps vía Angular
• UI Validate Que nos permite validar formulario de una forma más rigurosa.

y luego?

Lastimosamente esto no es un workshop y no se puede extender más el tiempo, pero, existe excelente material por toda la red; aquí algunos links recomendados.

• A better way to learn angularjs
• Angularjs Fundamentals
• Libros habidos y por haber de Angularjs
• An Introduction to AngularJS Forms Validation