AngularJS
Sobre mi
René Olivo
rene@minet.com.do
http://minet.com.do/

●
●
●
●

BSc. Ingenieria de Sistemas.
MSc. Electronic Commerce...
Què veremos?
1.
2.
3.
4.
5.
6.
7.

Què es AngularJS?
Por què usar AngularJS?
MVC
Controladores y Modelos
Views y Directiva...
Què es AngularJS?
●
●
●
●
●

Framework de Javascript.
Adopta el modelo MVC.
Extiende el lenguaje HTML.
Promueve el uso de ...
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 ...
Controladores
● Encapsulan todo el comportamiento y los
modelos que debe tener una vista.
● Inyectan servicios y recursos ...
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 c...
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.
● Permit...
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
r...
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 ...
Demo
Resources, Modulos, Forms,
Animaciones….
Conclusiòn
● Ya pueden borrar a EmberJS de sus discos
duros.
● No se olviden del WHERE en el DELETE
FROM.
● No le pongan e...
Observaciones Finales
● Usen la versión 1.2 (aunque sea inestable)
● No accesen el DOM desde los controladores
http://ruoy...
Preguntas y
Respuestas
Gracias
Upcoming SlideShare
Loading in …5
×

Introducciòn a AngularJS

1,696 views
1,557 views

Published on

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

No Downloads
Views
Total views
1,696
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
67
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Introducciòn a AngularJS

  1. 1. AngularJS
  2. 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. 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. 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. 5. Por què usar AngularJS? ● ● ● ● Plain old Javascript KISS Stand Alone Full-featured
  6. 6. AngularJS / Otros ● Ember (link) ● KnockOut(link) ● Angular (link)
  7. 7. Angular MVC
  8. 8. Controladores / Modelos
  9. 9. Vistas / Directivas
  10. 10. Demo Simple http://plnkr.co/edit/Vk6tt1WByib2AjA0ka7Z? p=preview
  11. 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. 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. 13. Demo màs completo http://plnkr.co/edit/nOJqrklbC48i71ETHb6p? p=preview
  14. 14. Servicios $http y $timeout http://plnkr.co/edit/3Nhrc3eEQRZg7uMsSec3
  15. 15. $scope Inheritance http://plnkr.co/edit/LOfEWjsEjMammFtBK1N5
  16. 16. Vistas ● Despliegan la informaciòn contenida en los modelos de un controlador en especìfico. ● Pueden declarar distintos controladores para diferentes àreas.
  17. 17. Filtros ● Helpers para modificar modelos. ● Se pueden usar tanto en los views, directivas y hasta desde los controladores.
  18. 18. Ejemplo Filtro http://plnkr.co/edit/L4KeMW0XuU5s82T3qKZo
  19. 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. 20. Demo Directivas http://plnkr.co/edit/E1Lqg1DHXhDQSY0LJxBD
  21. 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. 22. Ejemplo Enrutamiento http://plnkr.co/edit/zhnts7QBavD1zyKsGARt
  23. 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. 24. Demo Resources, Modulos, Forms, Animaciones….
  25. 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. 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. 27. Preguntas y Respuestas
  28. 28. Gracias

×