AngularJS: estructurando una aplicación web con múltiples aplicaciones ng

La blogósfera tiene una serie de artículos sobre el tema de las pautas de estructuración de aplicaciones de AngularJS como estas (y otras):

• http://www.johnpapa.net/angular-app-structuring-guidelines/
• http://codingsmackdown.tv/blog/2013/04/19/angularjs-modules-for-great-justice/
• http://danorlando.com/angularjs-architecture-understanding-modules/
• http://henriquat.re/modularizing-angularjs/modularizing-angular-applications/modularizing-angular-applications.html

Sin embargo, un escenario que aún no he encontrado para obtener pautas y mejores prácticas es el caso en el que tiene una gran aplicación web que contiene múltiples aplicaciones "mini-spa", y todas las aplicaciones mini-spa comparten una cierta cantidad de código.

No me refiero al caso de tratar de tener múltiples ng-appdeclaraciones en la misma página; más bien, me refiero a diferentes secciones de un sitio grande que tienen su propia ng-appdeclaración única .

Como Scott Allen escribe en su blog OdeToCode :

Un escenario que no he encontrado muy bien tratado es el escenario en el que existen varias aplicaciones en la misma aplicación web más grande y requieren un código compartido en el cliente.

¿Hay algún enfoque recomendado para tomar, trampas para evitar o buenas estructuras de muestra de este escenario que pueda señalar?

Actualización - 10/09/2015
Un proyecto con una estrategia de organización interesante es MEAN.JS y su carpeta de módulos.
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/modules

Otro ejemplo es del ejemplo ASP.NET Music Store SPA. https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

Aquí está el diseño con el que trabajo. Lo encontré útil en dos proyectos más grandes que construí y hasta ahora no he llegado a ningún obstáculo.

Estructura de carpetas

your-project/
  apps/
    global.html
    app1/
      index.html
      app1.module.js
      app1.js
      parts/
        foo.js
        foo.html
        ...
    app2/
  libs
    lib1/
      lib1.module.js
      parts/
        directive1.js
        directive1.html
    lib2/
  third-party/

• Configure el marco web de su servidor para encontrar apps/app1/index.htmlcuándo /app1llega una solicitud . Use URL amigables (por ejemplo, en the-first-application/lugar de app1/y mapeelos usando la tecnología de su servidor si es necesario.
• Su tecnología de servidor debe incluir global.htmlen el index.html, ya que contiene el proveedor incluye (ver más abajo).
• Incluya los activos requeridos por la aplicación respectiva en index.html(ver más abajo).
• Pon el ng-appy la raíz <div ui-view></div>en el index.html.
• Cada aplicación y lib es un módulo angular separado.
• Cada aplicación obtiene un <app-name>.module.jsarchivo que contiene la definición del módulo angular y la lista de dependencias.
• Cada aplicación obtiene un <app-name>.jsarchivo que contiene la configuración de los módulos y los bloques de ejecución, y la configuración de enrutamiento como parte de ella.
• Cada aplicación obtiene una partscarpeta que contiene los controladores, vistas, servicios y directivas de las aplicaciones en una estructura que tiene sentido para la aplicación específica . No considero útiles las subcarpetas controllers/, views/etc., porque no se escalan, sino YMMV.
• Las bibliotecas siguen la misma estructura que las aplicaciones, pero dejan de lado las cosas que no necesitan (obviamente).

Comience con servicios y directivas dentro de la aplicación donde se utilizan. Tan pronto como necesite algo en otra aplicación también, refactorice a una biblioteca. Intente crear bibliotecas funcionalmente consistentes, no solo bibliotecas con todas las directivas o con todos los servicios.

Bienes

Minimizo los archivos JS y CSS para las versiones de lanzamiento, pero trabajo con archivos no minificados durante el desarrollo. Aquí hay una configuración que admite esto:

• Gestionar proveedor incluye globalmente en global.html. De esta manera, las cosas pesadas se pueden cargar desde la memoria caché cuando se navega entre los SPA. Asegúrese de que el almacenamiento en caché funcione correctamente.
• Los activos por SPA se definen en index.html. Esto solo debe incluir los archivos específicos de la aplicación, así como las bibliotecas utilizadas.

La estructura de carpetas anterior facilita la búsqueda de los archivos correctos para los pasos de compilación de minificación.

Las aplicaciones de una sola página (SPA) en realidad no están destinadas a usarse de la manera que sugieres con una aplicación realmente grande y múltiples mini-SPA dentro de la principal. El mayor problema será el tiempo de carga de la página, ya que todo debe cargarse por adelantado.

Una forma de abordar esto es usar una página de navegación que lo llevará a SPA individuales. La página de navegación será bastante liviana, y luego solo cargará un SPA a la vez según lo seleccionado. Puede proporcionar una barra de enlaces con enlaces de navegación dentro de cada uno de sus SPA para que los usuarios no siempre tengan que volver a la página de navegación cuando necesiten ir a otra área.

El uso de este enfoque puede crear algunos desafíos con la información persistente en las SPA. Pero estamos hablando de algo que los SPA no estaban destinados a hacer. Hay algunos marcos que pueden ayudar con la persistencia de datos del lado del cliente. Brisa es lo primero que viene a la mente, pero hay otros.

Con respecto al diseño: varias preguntas de los Programadores abordan el diseño del proyecto grande, dependiendo de sus necesidades particulares. Encontré este y este . No hay nada mágico en los SPA que pueda afectar el diseño de su aplicación más allá de lo que ya se respondió en esas preguntas.

Dicho esto, existen diferentes enfoques que funcionan mejor para diferentes proyectos. Recomendaría seguir con el diseño base según lo provisto por el proyecto de semilla angular. Cree carpetas separadas de las proporcionadas para sus paquetes personalizados y código fuente. Y dentro de su carpeta de origen, use un diseño de proyecto que tenga sentido para sus necesidades.

Si su aplicación necesita múltiples declaraciones ng-app en la misma página, entonces necesita iniciar manualmente el módulo AngularJS, inyectando un nombre de módulo como se muestra a continuación:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

Este plunker explica cómo podríamos arrancar manualmente AngularJS.