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

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. © 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. © 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. © 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. © 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. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Componentes (Basico)

7. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Componentes (Orden de Implementacion)

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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 2011 Medullan, Inc. |IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |
Gracias