Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Arquitectura y diseño de una aplicación con AngularJS

fzberlinches
November 18, 2013

Arquitectura y diseño de una aplicación con AngularJS

Presentación utilizada en el meetup del grupo AngularJS Madrid

fzberlinches

November 18, 2013
Tweet

More Decks by fzberlinches

Other Decks in Programming

Transcript

  1. SOBRE MÍ Desarrollador Senior Front End y Consultor de Accesibilidad

    Web. Coorganizador del grupo meetup Accesibilidad Spain. Organizador del grupo meetup WordPress Madrid. Organizador del grupo meetup Madrid Sass & Compass. Aerotranstornado: piloto online P1 y controlador S1 en la red VATSIM.
  2. ANTES DE COMENZAR... En Adesis buscamos gente con ganas de

    trabajar con AngularJS. Aquellos que estéis interesados enviad vuestro cv a [email protected]
  3. Mastering Web Application Development with AngularJS - capítulo 2: Building

    and testing “ There were times when JavaScript was used as a toy language, those days are long over. ”
  4. Building large apps with AngularJS “ My first few weeks

    with AngularJS I was like a kid on Christmas morning, unwrapping presents as fast as I could and running around showing everybody. ”
  5. LA IMPORTANCIA DE UN MÉTODO No importa que tu proyecto

    sea grande o pequeño... pero usa uno. Vale, la documentación de AngularJS es un poco "extraña" pero hay muchos desarrolladores que han compartido y comparten sus experiencias.
  6. ORGANIZACIÓN DE FICHEROS ¿Pero empezamos de forma manual o usamos

    un generador? (...propongo este otro logo para Grunt.)
  7. POR FICHEROS p a r t i a l s

    / h o m e . h t m l l o g i n . h t m l u s e r s . h t m l o r d e r s . h t m l j s / c o n t r o l l e r s . j s d i r e c t i v e s . j s f i l t e r s . j s s e r v i c e s . j s a p p . j s
  8. POR CARPETAS j s / c o n t r

    o l l e r s / h o m e C o n t r o l l e r . j s l o g i n C o n t r o l l e r . j s d i r e c t i v e s / u s e r s D i r e c t i v e . j s o r d e r s D i r e c t i v e . j s f i l t e r s / s e r v i c e s / u s e r S e r v i c e . j s o r d e r S e r v i c e . j s l o g i n S e r v i c e . j s p a r t i a l s / h o m e . h t m l l o g i n . h t m l u s e r s . h t m l o r d e r s . h t m l a p p . j s
  9. POR FUNCIONES o r d e r s / d

    i r e c t i v e s / o r d e r s . h t m l o r d e r s D i r e c t i v e . j s s e r v i c e s / o r d e r S e r v i c e . j s u s e r s / d i r e c t i v e s / u s e r s . h t m l u s e r s D i r e c t i v e . j s s e r v i c e s / u s e r S e r v i c e . j s h o m e / c o n t r o l l e r s / h o m e . h t m l h o m e C o n t r o l l e r . j s l o g i n . h t m l l o g i n C o n t r o l l e r . j s s h a r e d / s e r v i c e s / i 1 8 n S e r v i c e . j s f i l t e r s / i 1 8 n F i l t e r . j s a p p . j s
  10. EL MODELO Manten tus datos en servicios de AngularJS y

    usa los controladores para exponer los datos a tus vistas. Hay que conocer los distintos tipos de servicios en AngularJS.
  11. DIFERENTES TIPOS DE ORGANIZACIÓN múltiples módulos en un único fichero

    de JavaScript. múltiples módulos en múltiples ficheros de JavaScript. un único módulo por fichero de JavaScript.
  12. MÚLTIPLES MÓDULOS EN UN ÚNICO FICHERO Puede resultar complejo encontrar

    un módulo en concreto si nuestro código es muy grande. Útil en proyectos relativamente simples para no tener que manejar demasiados ficheros.
  13. MÚLTIPLES MÓDULOS EN MÚLTIPLES FICHEROS Esta opción debería evitarse, ya

    que nos empieza a influir el orden en el que se cargan los ficheros (las declaraciones necesitan estar antes que los providers por ejemplo). En cuanto los módulos empiezan a crecer, dificultan su mantenimiento.
  14. UN ÚNICO MÓDULO POR FICHERO FICHERO Resulta la mejor opción

    por independencia y para facilitar la labor de los tests.
  15. BONUS TRACK Lazy Loading In AngularJS Cargar sólo lo que

    necesitamos cuándo lo necesitamos.
  16. ENLACES DE INTERÉS Building large apps with AngularJS AngularJS Tutorial:

    Learn to Build Modern Web Apps AngularJS: Conceptual Overview AngularJS CRUD application demo Leveling Up in Angular
  17. ENLACES DE INTERÉS A bunch of links to blog posts,

    articles, videos, etc for learning AngularJS Advanced Design Patterns and Best Practices ng-newsletter Mis enlaces sobre AngularJS Learning JavaScript Design Patterns