© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |© 2011 Medullan,...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Agenda
1. Angul...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Qué y Por qué A...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Expresiones
• U...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Directivas (Dir...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Componentes (Ba...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Componentes (Or...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Modulo
• Aplica...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Enrutador
• Con...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Controlador
• D...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Modelo
• Propie...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Simple Page App...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Vistas Parciale...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
REST
• Represen...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Servicios en An...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Demo
• Servidor...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Recursos
•http:...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Medullan
• Solu...
© 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Gracias
Upcoming SlideShare
Loading in …5
×

Angularjs y Simple Page Applications

780 views

Published on

Rapida introduccion a angularjs y el desarrollo de Simple Page Applications.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
780
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Angularjs y Simple Page Applications

  1. 1. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |© 2011 Medullan, Inc. |© 2012. Prepared by Medullan, Inc. | Ing. Jhon Samamé Gómez Septiembre 10, 2013 Simple Page Web Applications con
  2. 2. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Agenda 1. AngularJs: Qué es? Por qué usarlo? 2. Expresiones y Directivas 3. Modulo 4. Enrutador 5. Controlador 6. Modelo 7. Simple Page Applications 8. Vistas Parciales 9. Comunicacion REST 10. Servicios 11. Demo 12.Recursos
  3. 3. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Qué y Por qué AngularJs? • Open Source Javascript MVC Framework (como Backbone.js, Ember.js) • Mejora la Organizacion(Modulos y Servicios). • Modelos POJO(Plain Old JavaScript Objects). • Extiende el HTML(Directivas). • Inyeccion de Dependencia. • Facil de Testear (Mocking).
  4. 4. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Expresiones • Usadas para pequeñas operaciones. • Usadas como {{ expresion }} • Dinamicas.
  5. 5. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Directivas (Directives) • Usadas para grandes operaciones. • Extienden el HTML. • Permiten crear componentes. • Comunes: ng-model, ng-repeat, ng-switch, etc. http://bit.ly/15MQt2E
  6. 6. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Componentes (Basico)
  7. 7. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Componentes (Orden de Implementacion)
  8. 8. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Modulo • Aplicaciones organizadas en modulos. • Pueden depender de otros modulos. • Contienen controladores, directivas, filtros, servicios, etc. • angular.module(…)
  9. 9. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Enrutador • Configuracion de las rutas de nuestra aplicacion web. • Asocia la Url a una vista parcial y un controlador especifico. • $routeProvider.
  10. 10. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Controlador • Definen el comportamiento. • Construyen el modelo que sera renderizado en la vista parcial. • No deben contener acceso a la UI. • Se comunican con la vista a traves del objeto $scope. • angular.controller(…)
  11. 11. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Modelo • Propiedad del $scope dentro del controlador. • Cada vez que cambia, actualiza la vista. • Puede ser enlazado a la UI (textbox, labels, etc). • $scope.miModelo = [{…}];
  12. 12. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Simple Page Applications • SPA o SPI (Interface) • Mejoran la experiencia del usuario (desktop). • Habilidad de cambiar la UI sin obtener el HTML desde el servidor nuevamente. • JSON, Ajax, REST,etc.
  13. 13. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Vistas Parciales • Porcion de HTML que es embebido. • Se cargan dinamicamente (Ajax). • Generalmente asociadas a un Controlador. • Renderizan informacion del Modelo. • Son mantenidas en memoria por el explorador como templates.
  14. 14. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | REST • Representational State Transfer. • Usa HTTP simple. • GET and POST convencionales. • GET/POST/PUT/DELETE. • Simple CRUD llevado a la web. • Autenticacion antes de ejecutar.
  15. 15. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Servicios en AngularJS • Fabricas de objetos reusables. • Usa la Inyeccion de Dependencia. • Son inyectados al Controlador. • Faciles de testear. • Usados para obtener los datos desde el servidor y que seran transformados en el Modelo.
  16. 16. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Demo • Servidor: nodeJs, ExpressJs • Cliente: Simple HTML, Vistas Parciales, AngularJS. • Modulo, Enrutador, Vistas Parciales, Controladores, Servicios. • Interface REST simple en NodeJs. (GET/POST)
  17. 17. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Recursos •http://angularjs.org/ •https://plus.google.com/u/0/+AngularJS/posts •http://tecnimedios.com/blog/programacion/jquery/single- page-application-spa-una-tendencia-creciente/ •http://expressjs.com/guide.html •http://nodejs.org/ •http://jhonpierre.blogspot.com/ •https://jhonpierre.wordpress.com/
  18. 18. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Medullan • Soluciones a medida. • Rubro: Cuidado de la Salud, Bienestar Social. • Career Manager. Ultimas Tecnologias. • Developer, Project Manager, QA Tester. • Trinidad y Tobago / USA. • Visita http://medullan.com/ • CV a careers@medullan.com • O a jsamame@medullan.com
  19. 19. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. | Gracias

×