Your SlideShare is downloading. ×
0
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Introducciòn a AngularJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introducciòn a AngularJS

1,377

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,377
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
60
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×