El documento presenta una introducción a AngularJS, un framework de JavaScript para crear aplicaciones web dinámicas. Explica que AngularJS adopta el modelo MVC, extiende HTML y promueve el uso de pruebas unitarias. Luego describe brevemente los componentes clave de AngularJS como controladores, modelos, vistas, directivas, enrutamiento y recursos. Finalmente, incluye algunos consejos sobre el uso de AngularJS y agradece a la audiencia.

1. AngularJS

2. Sobre mi
René Olivo
rene@minet.com.do
http://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-webdevelopment

3. Què veremos?
1.
2.
3.
4.
5.
6.
7.
Què es AngularJS?
Por què usar AngularJS?
MVC
Controladores y Modelos
Views y Directivas
Enrutamiento / SPA
Resources

4. 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.

5. Por què usar AngularJS?
●
●
●
●
Plain old Javascript
KISS
Stand Alone
Full-featured

6. AngularJS / Otros
● Ember (link)
● KnockOut(link)
● Angular (link)

7. Angular MVC

8. Controladores / Modelos

9. Vistas / Directivas

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

11. 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.

12. 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ì

13. Demo màs completo
http://plnkr.co/edit/nOJqrklbC48i71ETHb6p?
p=preview

14. Servicios $http y $timeout
http://plnkr.co/edit/3Nhrc3eEQRZg7uMsSec3

15. $scope Inheritance
http://plnkr.co/edit/LOfEWjsEjMammFtBK1N5

16. Vistas
● Despliegan la informaciòn contenida en los
modelos de un controlador en especìfico.
● Pueden declarar distintos controladores para
diferentes àreas.

17. Filtros
● Helpers para modificar modelos.
● Se pueden usar tanto en los views,
directivas y hasta desde los controladores.

18. Ejemplo Filtro
http://plnkr.co/edit/L4KeMW0XuU5s82T3qKZo

19. 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.

20. Demo Directivas
http://plnkr.co/edit/E1Lqg1DHXhDQSY0LJxBD

21. 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.

22. Ejemplo Enrutamiento
http://plnkr.co/edit/zhnts7QBavD1zyKsGARt

23. 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.

24. Demo
Resources, Modulos, Forms,
Animaciones….

25. Conclusiòn
● Ya pueden borrar a EmberJS de sus discos
duros.
● No se olviden del WHERE en el DELETE
FROM.
● No le pongan el nombre de un animal extinto
a su empresa.

26. 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 aprendiendo
http://marcosecchi.blogspot.com/2013/08/angularjs-resource-page.html

27. Preguntas y
Respuestas

28. Gracias