© 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

© 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

© 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).

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

© 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

© 2011 Medullan, Inc. | IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |

Componentes (Basico)

© 2011 Medullan, Inc. | IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |

Componentes (Orden de Implementacion)

© 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(…)

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

© 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(…)

© 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 = [{…}];

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

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

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

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

© 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)

© 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/

© 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

© 2011 Medullan, Inc. | IHS Zing Executive Checkpoint – March 29, 2011 © 2012. Prepared by Medullan, Inc. |

Gracias