Introducciòn a AngularJS

AngularJS

Sobre mi

René Olivorene@minet.com.dohttp://minet.com.do/

● BSc. Ingenieria de Sistemas.● MSc. Electronic Commerce.● 14 años de experiencia en

el área web.● Hobbies: Cerveza, aprender,

enseñar & all-things-web-development

Què veremos?

1. Què es AngularJS? 2. Por què usar AngularJS?3. MVC 4. Controladores y Modelos 5. Views y Directivas6. Enrutamiento / SPA7. Resources

Què es AngularJS?

● Framework de Javascript.● Adopta el modelo MVC.● Extiende el lenguaje HTML.● Promueve el uso de unit tests.● jQuery ahorra Javascript; Angular ahorra

jQuery.

Por què usar AngularJS?

● Plain old Javascript● KISS● Stand Alone● Full-featured

AngularJS / Otros

● Ember (link)● KnockOut(link)● Angular (link)

Angular MVC

Controladores / Modelos

Vistas / Directivas

Demo Simple

http://plnkr.co/edit/Vk6tt1WByib2AjA0ka7Z?p=preview

Modelos

● Contienen toda la informaciòn a desplegarse en las vistas.

● Se insertan a travès de $scope.● Pueden ser tipos primitivos, objetos, clases,

etc.● Es buena práctica colocar los modelos

dentro de un objeto.

Controladores

● Encapsulan todo el comportamiento y los modelos que debe tener una vista.

● Inyectan servicios y recursos al scope.● Posibilidad de herencia de scope en forma

de cascada.● Pueden emitir y escuchar eventos.● No se debe accesar el DOM desde aquì

Demo màs completo

http://plnkr.co/edit/nOJqrklbC48i71ETHb6p?p=preview

Servicios $http y $timeout

http://plnkr.co/edit/3Nhrc3eEQRZg7uMsSec3

$scope Inheritance

http://plnkr.co/edit/LOfEWjsEjMammFtBK1N5

Vistas

● Despliegan la informaciòn contenida en los modelos de un controlador en especìfico.

● Pueden declarar distintos controladores para diferentes àreas.

Filtros

● Helpers para modificar modelos.● Se pueden usar tanto en los views,

directivas y hasta desde los controladores.

Ejemplo Filtro

http://plnkr.co/edit/L4KeMW0XuU5s82T3qKZo

Directivas

● Sirven para enlazar los modelos con las vistas.

● Extienden el comportamiento de las etiquetas HTML.

● Permiten la creaciòn de nuevas etiquetas y/o atributos.

Demo Directivas

http://plnkr.co/edit/E1Lqg1DHXhDQSY0LJxBD

Enrutamiento

● Controla el flujo de la aplicaciòn.● SPA (Single Page Applications).● Ayudan a separar la aplicaciòn en

responsabilidades.● Soporta enrutamiento de HTML5 (urls

clàsicas y history).● Permite hacer bookmark de una url en

especìfica.

Ejemplo Enrutamiento

http://plnkr.co/edit/zhnts7QBavD1zyKsGARt

Resources

● Facilitan la interacciòn con servicios basados en REST

● Permiten la definiciòn de servicios REST con mètodos estàticos y particulares para cada instancia.

● Permite la definiciòn de acciones. Conectores a distintas partes de nuestros end-points.

DemoResources, Modulos, Forms, Animaciones….

● No le pongan el nombre de un animal extinto a su empresa.

Conclusiòn

● Ya pueden borrar a EmberJS de sus discos duros.

● No se olviden del WHERE en el DELETE FROM.

Observaciones Finales

● Usen la versión 1.2 (aunque sea inestable)● No accesen el DOM desde los controladores

http://ruoyusun.com/2013/05/25/things-i-wish-i-were-told-about-angular-js.html

● Sigan aprendiendohttp://marcosecchi.blogspot.com/2013/08/angularjs-resource-page.html

Preguntas y Respuestas

Gracias