AngularJS: strutturazione di un'applicazione Web con più ng-app

Ecco il design con cui lavoro. L'ho trovato utile in due progetti più grandi che ho costruito e che finora non ha colpito 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 framework web del tuo server per trovare apps/app1/index.html quando arriva una richiesta di /app1 . Utilizza URL amici (ad esempio the-first-application/ anziché app1/ e mappali utilizzando la tecnologia server se necessario.
• La tecnologia del server deve includere global.html in index.html perché contiene il fornitore include (vedi sotto).
• Includi le risorse richieste dalla rispettiva app in index.html (vedi sotto).
• Inserisci ng-app e root <div ui-view></div> in index.html .
• Ogni app e lib è un modulo angolare separato.
• Ogni app riceve un file <app-name>.module.js che contiene la definizione del modulo angolare e l'elenco di dipendenze.
• Ogni app riceve un file <app-name>.js che contiene i blocchi di configurazione ed esecuzione dei moduli e la configurazione di routing come parte di esso.
• Ogni app riceve una cartella parts 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 come controllers/ , views/ etc, perché non vengono ridimensionate, ma YMMV.
• Le librerie seguono la stessa struttura delle app, ma lasciano fuori 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 in un'altra app, refactoring in una biblioteca. Cerca di creare librerie funzionalmente coerenti, non solo librerie di tutte le direttive o di tutti i servizi.

Attività

Minimizzo sia i file JS che i file CSS per le build di rilascio ma utilizzo i file non ancora terminati durante lo sviluppo. Ecco una configurazione che supporta questo:

• Gestisci il fornitore include globalmente in global.html . In questo modo, gli oggetti pesanti possono essere caricati dalla cache durante la navigazione tra le SPA. Assicurati che la cache funzioni correttamente.
• Le risorse per SPA sono definite in index.html . Questo dovrebbe includere solo i file specifici dell'app e le librerie utilizzate.

La struttura delle cartelle sopra riportata facilita la ricerca dei file giusti per i passaggi di generazione dei minifici.

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

Un modo per affrontare questo è usare una pagina di navigazione che ti porterà alle singole SPA. La pagina di navigazione sarà abbastanza leggera, quindi caricherete solo una SPA alla volta in base a ciò che è stato selezionato. Puoi fornire una barra di collegamento con i link di navigazione all'interno di ciascuna delle tue SPA in modo che gli utenti non debbano sempre tornare alla pagina di navigazione quando devono recarsi in un'altra area.

L'utilizzo di questo approccio può creare alcune sfide con le informazioni persistenti su tutte le SPA. Ma stiamo parlando di qualcosa che le SPA non intendevano fare. Ci sono 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 riguardano il layout di un grande progetto, a seconda delle esigenze particolari. Mi sono imbattuto in questo e questo . Non c'è nulla di magico nelle SPA che possa influire sul layout dell'applicazione oltre a quello che è già stato risposto in queste domande.

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

Se l'applicazione richiede più dichiarazioni di ng-app sulla stessa pagina, è necessario eseguire manualmente il bootstrap del modulo AngularJS, immettendo 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.