AngularJS: strutturare un'applicazione web con più app ng

La blogosfera contiene numerosi articoli sull'argomento delle linee guida per la strutturazione delle app di AngularJS come queste (e altre):

• 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

Tuttavia, uno scenario che devo ancora trovare per le linee guida e le migliori pratiche è il caso in cui si disponga di un'applicazione Web di grandi dimensioni contenente più app "mini-spa" e tutte le app mini-spa condividano una certa quantità di codice.

Non mi riferisco al caso di provare ad avere più ng-appdichiarazioni sulla stessa pagina; piuttosto, intendo diverse sezioni di un sito di grandi dimensioni che hanno una propria ng-appdichiarazione unica .

Come scrive Scott Allen nel suo blog OdeToCode :

Uno scenario che non ho trovato indirizzato molto bene è lo scenario in cui esistono più app nella stessa applicazione Web più grande e richiedono un codice condiviso sul client.

Ci sono approcci consigliati da adottare, insidie ​​da evitare o buone strutture di esempio di questo scenario a cui puoi puntare?

Aggiornamento - 9/10/2015
Un progetto con un'interessante strategia organizzativa è MEAN.JS e la sua cartella dei moduli.
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/modules

Un altro esempio è quello dell'esempio di ASP.NET Music Store SPA. https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

Ecco il design con cui lavoro. L'ho trovato utile su due progetti più grandi che ho realizzato e finora non ho raggiunto nessun blocco stradale.

Struttura delle cartelle

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/

• Configura il tuo framework web server per trovare apps/app1/index.htmlquando /app1arriva una richiesta . Usa URL amichevoli (ad esempio the-first-application/invece di app1/e mappali usando la tua tecnologia server se necessario.
• La vostra tecnologia server deve includere global.htmlin index.htmlquanto contiene il fornitore abbia incluso (vedi sotto).
• Includi le risorse richieste dalla rispettiva app in index.html(vedi sotto).
• Inserisci il ng-appe la radice <div ui-view></div>in index.html.
• Ogni app e lib è un modulo angolare separato.
• Ogni app ottiene un <app-name>.module.jsfile che contiene la definizione del modulo angolare e l'elenco delle dipendenze.
• Ogni app ottiene un <app-name>.jsfile che contiene i moduli di configurazione ed esecuzione dei blocchi e la configurazione del routing come parte di esso.
• Ogni app ottiene una partscartella che contiene i controller, le viste, i servizi e le direttive delle applicazioni in una struttura che ha senso per l'app specifica . Non considero utili sottocartelle controllers/, views/ecc., Perché non si ridimensionano, ma YMMV.
• I libs seguono la stessa struttura delle app, ma tralasciano le cose di cui non hanno bisogno (ovviamente).

Inizia con servizi e direttive all'interno dell'app in cui vengono utilizzati. Non appena hai bisogno di qualcosa anche in un'altra app, fai riferimento a una libreria. Prova a creare librerie funzionalmente coerenti, non solo librerie all-direttiva o all-services.

Risorse

Minimizzo i file JS e CSS per le build di rilascio, ma lavoro con i file non minimizzati durante lo sviluppo. Ecco una configurazione che supporta questo:

• Gestire il fornitore include a livello globale in global.html. In questo modo, le cose pesanti possono essere caricate dalla cache durante la navigazione tra le SPA. Assicurarsi che la memorizzazione nella cache funzioni correttamente.
• Le attività per SPA sono definite in index.html. Ciò dovrebbe includere solo i file specifici dell'app e le librerie utilizzate.

La struttura delle cartelle sopra semplifica la ricerca dei file giusti per i passaggi di creazione della minificazione.

Le app a pagina singola (SPA) non sono pensate per essere utilizzate nel modo che stai suggerendo con un'applicazione davvero grande e più mini-SPA all'interno di quella principale. Il problema più grande saranno i tempi di caricamento della pagina poiché tutto deve essere caricato in anticipo.

Un modo per affrontarlo è utilizzare una pagina di navigazione che ti porterà alle singole SPA. La pagina di navigazione sarà abbastanza leggera, quindi caricherai solo una SPA alla volta in base a ciò che è stato selezionato. È possibile fornire una barra dei collegamenti con collegamenti di navigazione all'interno di ciascuna SPA in modo che gli utenti non debbano sempre tornare alla pagina di navigazione quando devono andare in un'altra area.

L'uso di questo approccio può creare alcune sfide con informazioni persistenti in tutte le SPA. Ma stiamo parlando di qualcosa che le SPA non erano destinate a fare. Esistono alcuni framework che possono aiutare con la persistenza dei dati lato client. Breeze è il primo che viene in mente, ma ce ne sono altri.

Per quanto riguarda il layout: diverse domande dei programmatori affrontano il layout di grandi progetti, a seconda delle esigenze specifiche. Mi sono imbattuto in questo e in questo . Non c'è nulla di magico nelle SPA che possa influire sul layout dell'applicazione oltre a quello a cui è già stata data risposta in quelle domande.

Detto questo, ci sono approcci diversi che funzionano meglio per diversi progetti. Consiglierei di attenermi al layout di base fornito dal progetto del seme angolare. Crea cartelle separate da quelle fornite per i tuoi pacchetti personalizzati e codice sorgente. E all'interno della cartella di origine, utilizzare un layout di progetto che abbia senso per le tue esigenze.

Se l'applicazione richiede più dichiarazioni di ng-app sulla stessa pagina, è necessario avviare manualmente il modulo AngularJS, inserendo il nome di un modulo come mostrato di seguito:

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

Questo plunker spiega come avremmo potuto avviare manualmente AngularJS.