Angularjs y Simple Page Applications
Upcoming SlideShare
Loading in...5
×
 

Angularjs y Simple Page Applications

on

  • 556 views

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

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

Statistics

Views

Total Views
556
Views on SlideShare
556
Embed Views
0

Actions

Likes
1
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Angularjs y Simple Page Applications Angularjs y Simple Page Applications Presentation Transcript

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