Strutturazione della mia applicazione AngularJS

Question

Sono totalmente newbie nell'uso di AngularJs e sebbene abbia svolto le esercitazioni, ho ancora molte domande senza risposta nella mia mente. La mia principale preoccupazione al momento è come dovrei dividere la mia domanda in moduli?

Fondamentalmente ho bisogno di creare un'app che funga da portale per varie app, ognuna delle quali rappresenta una funzionalità aziendale (a volte con un rapporto scarso o nullo tra loro).

Nel tutorial, mostrano come creare un'app con più viste. Quello di cui ho bisogno è un'app con più moduli, ogni modulo ha le sue viste (e probabilmente avrò anche delle viste condivise).

Qualcuno ha mai lavorato su un'app con quel tipo di struttura? Potresti condividere la tua esperienza e come hai organizzato le cose?

Il progetto AngularJS Seed (https://github.com/angular/angular-seed) è buono ma in realtà non mostra come creare un'applicazione complessa.

Answer 1

[EDIT] ho scritto un articolo sul mio blog per spiegare le cose in maggiori dettagli:

read it on sam-dev.net e si può ora read part II, con codice di esempio.

Risponderò alla mia domanda. Non perché penso che sia l'approccio migliore, ma solo perché è quello con cui ho deciso di andare.

Questo è il modo che ho diviso i miei moduli di business in cartelle

• app
  • businessModule
    • controllori
      • index.js
      • firstCtrl.js
      012.
      • secondCtrl.js
    • direttive
    • servizi
    • vista
    • filtri
  • anotherBusinessModule
  • condiviso
  • app.js
  • index.html

Ogni modulo ha una propria struttura di cartelle per i controllori, direttive, ecc ...

Ogni cartella ha un file index.js e poi altri file per separa ciascun controller, ogni direttiva, ecc ..

Il file index.js contiene la definizione del modulo. Per esempio per i controllori della businessModule sopra:

angular.module('myCompany.businessModule.controllers', []); 

C'è dipendenze qui, ma ci potrebbe essere qualsiasi.

Poi nel firstCtrl.js, posso riutilizzare quel modulo e aggiungere il controllore ad esso:

angular.module('myCompany.businessModule.controllers').controller('firstCtrl',  

     function(){ 
}); 

Poi i app.js aggrega tutto il modulo che voglio per la mia applicazione aggiungendoli alle dipendenze array.

angular.module('myApp', ['myCompany.businessModule', 'myCompany.anotherBusinessModule']); 

La cartella condivisa contiene le direttive e le altre cose che non sono specifici di un modulo di business e che può essere riutilizzato ovunque.

Ancora una volta, non so se è l'approccio migliore, ma sicuramente funziona per me. Forse può ispirare altre persone.

EDIT

Poiché i file index.js contengono dichiarazioni moduli, devono essere fatto riferimento nella pagina HTML prima di qualsiasi altro script di applicazione. Per fare ciò, ho usato l'IBundleOrderer di ASP.NET MVC 4:

var bundle = new ScriptBundle("~/bundles/app") { Orderer = new AsIsBundleOrderer() }; 
bundles.Add(bundle.IncludeDirectory("~/app", "*.js", true)); 

public class AsIsBundleOrderer : IBundleOrderer 
{ 
    public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files) 
    { 
     files = files.OrderBy(x => x.Name == "index.js" ? 0 : 1); 
     return files; 
    } 
} 

Answer 2

si dovrebbe andare allo yeoman https://github.com/yeoman/yeoman e la struttura del generatore di yeoman: https://github.com/yeoman/generator-angular, diventa una soluzione migliore per l'installazione dell'applicazione di angular-seed. Per diversi moduli aziendali, è necessario creare diverse app e condividere servizi e direttive

Answer 3

Il draw back Ho trovato l'approccio che il generatore yeoman prende è che non si allinea realmente con i moduli angolari quindi non si sente molto coeso per me. Quindi, man mano che il progetto si ingrandisce e stai lavorando su un particolare componente, mi sono ritrovato a girovagare molto nell'albero dei sorgenti.

Recentemente ho riscontrato un diverso approccio here. Questo approccio raggruppa i file con moduli angolari e mi sembra più coeso. Uno dei possibili inconvenienti è il fatto che è necessario costruire il sito non è possibile eseguirlo sul posto. Tuttavia, il compito di guardare il grunt in quel progetto è d'aiuto.

Answer 4

metodo di Sam sembra essere la strada da percorrere nella maggior parte dei casi. L'attuale documentazione Angular ha impostato come modulo per ogni controller, servizio, ecc., Ma questo è stato contraddetto dallo stesso Miško da Google.

In un recente Angularjs Best Practices video Miško, mostra come la struttura dei moduli potrebbe essere predisposto per facilità di test come pure facile scalabilità. Tieni presente come la struttura dei moduli non dovrebbe influire sulle prestazioni all'interno di un'app angolare.

Per lo sviluppo di app angolari, suggerisco di utilizzare il metodo delle migliori pratiche per i motivi sopra indicati. Potresti voler creare il tuo script di nodo per generare i tuoi controller, ecc. Per il momento, che potrebbe includere il modulo in cui desideri creare il controller e il nome, che genererebbe automaticamente il controller e la corretta creazione delle specifiche di test.

Se si vuole un grande letto della configurazione c'è an excellent post here per quanto riguarda la creazione del progetto in base a dove si pensa che sarà la rubrica.

Answer 5

Per coloro che sono interessati, ho fatto una versione "modulare" di Seed angolare che si adatta meglio con le best practice di Misko: https://github.com/sanfordredlich/angular-brunch-seed-modularized

E 'istituito con Brunch in modo da ottenere molto rapidamente pagina di ricaricamento, prova di funzionamento e molto Di Più. Puoi svilupparti rapidamente e se segui gli schemi nel codice, la tua applicazione dovrebbe scalare ragionevolmente bene. Godere!