AngularJS: Strukturieren einer Webanwendung mit mehreren ng-Apps

Die Blogosphäre enthält eine Reihe von Artikeln zum Thema AngularJS-App-Strukturierungsrichtlinien wie diese (und andere):

• 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

Ein Szenario, das ich bisher noch nicht für Richtlinien und Best Practices kennengelernt habe, ist der Fall, dass Sie eine große Webanwendung mit mehreren "Mini-Spa" -Anwendungen haben und alle Mini-Spa-Anwendungen eine bestimmte Menge an Code gemeinsam nutzen.

Ich beziehe mich nicht auf den Fall zu versuchen , mehrere haben ng-appErklärungen auf der gleichen Seite; Ich meine vielmehr verschiedene Abschnitte einer großen Site, die eine eigene, eindeutige ng-appDeklaration haben.

Wie Scott Allen in seinem OdeToCode- Blog schreibt :

Ein Szenario, das ich nicht besonders gut angesprochen habe, ist das Szenario, in dem mehrere Apps in derselben größeren Webanwendung vorhanden sind und auf dem Client gemeinsam genutzten Code erfordern.

Gibt es empfohlene Vorgehensweisen, zu vermeidende Fallstricke oder gute Beispielstrukturen für dieses Szenario, auf die Sie verweisen können?

Update - 9/10/2015
Ein Projekt mit einer interessanten Organisationsstrategie ist MEAN.JS und sein Modulordner.
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/modules

Ein weiteres Beispiel stammt aus dem ASP.NET Music Store SPA-Beispiel. https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

Hier ist das Design, mit dem ich arbeite. Ich fand es nützlich für zwei größere Projekte, die ich gebaut habe und die bis jetzt noch keine Straßensperren getroffen haben.

Ordnerstruktur

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/

• Konfigurieren Sie Ihr Server-Webframework, um zu ermitteln, apps/app1/index.htmlwann eine Anfrage /app1eingeht. Verwenden Sie benutzerfreundliche URLs (z. B. the-first-application/statt app1/und ordnen Sie sie bei Bedarf mithilfe Ihrer Servertechnologie zu.
• Ihre Server - Technologie muss Folgendes enthalten global.htmlin , index.htmlweil es enthält der Anbieter umfasst (siehe unten).
• Fügen Sie die für die jeweilige App erforderlichen Assets hinzu index.html(siehe unten).
• Setzen Sie das ng-appund die Wurzel <div ui-view></div>in das index.html.
• Jede App und Bibliothek ist ein separates Winkelmodul.
• Jede App erhält eine <app-name>.module.jsDatei, die die Winkelmoduldefinition und die Abhängigkeitsliste enthält.
• Jede App erhält eine <app-name>.jsDatei, die die Konfigurations- und Ausführungsblöcke der Module sowie die Routing-Konfiguration enthält.
• Jede App erhält einen partsOrdner mit den Controllern, Ansichten, Diensten und Anweisungen der Anwendung in einer Struktur, die für die jeweilige App sinnvoll ist . Ich glaube nicht , Unterordner mag controllers/, views/usw. nützlich, weil sie nicht skaliert, aber YMMV.
• Bibliotheken folgen der gleichen Struktur wie Apps, lassen jedoch Dinge aus, die sie (offensichtlich) nicht benötigen.

Beginnen Sie mit Diensten und Anweisungen in der App, in der sie verwendet werden. Sobald Sie etwas in einer anderen App benötigen, können Sie eine Bibliothek umgestalten. Versuchen Sie, funktional konsistente Bibliotheken zu erstellen, nicht nur Bibliotheken mit allen Direktiven oder Diensten.

Vermögenswerte

Ich minimiere sowohl JS- als auch CSS-Dateien für Release-Builds, arbeite jedoch während der Entwicklung mit nicht minimierten Dateien. Hier ist ein Setup, das dies unterstützt:

• Lieferanten verwalten umfasst global in global.html. Auf diese Weise können die schweren Daten beim Navigieren zwischen SPAs aus dem Cache geladen werden. Stellen Sie sicher, dass das Caching ordnungsgemäß funktioniert.
• Pro-SPA-Vermögenswerte sind in definiert index.html. Dies sollte nur die app-spezifischen Dateien sowie die verwendeten Bibliotheken enthalten.

Die Ordnerstruktur oben erleichtert das Auffinden der richtigen Dateien für die Erstellungsschritte der Minimierung.

Single Page Apps (SPAs) sind nicht für die Verwendung mit einer sehr großen Anwendung und mehreren Mini-SPAs innerhalb der Hauptanwendung vorgesehen. Das größte Problem werden die Ladezeiten sein, da alles von vorne geladen werden muss.

Eine Möglichkeit, dies zu beheben, ist die Verwendung einer Navigationsseite, die Sie zu den einzelnen SPAs führt. Die Navigationsseite ist recht übersichtlich und Sie können nur jeweils ein SPA laden, je nachdem, was ausgewählt wurde. Sie können eine Linkleiste mit Navigationslinks in jedem Ihrer SPAs bereitstellen, damit Benutzer nicht immer zur Navigationsseite zurückkehren müssen, wenn sie in einen anderen Bereich wechseln müssen.

Die Verwendung dieses Ansatzes kann einige Probleme mit persistenten Informationen in SPAs verursachen. Aber wir sprechen über etwas, das SPAs nicht tun sollten. Es gibt einige Frameworks, die bei der clientseitigen Datenpersistenz helfen können. Die Brise ist die erste, die mir in den Sinn kommt, aber es gibt noch andere.

In Bezug auf das Layout - Mehrere Programmiererfragen richten sich an das Layout großer Projekte, je nach Ihren speziellen Anforderungen. Ich bin auf dieses und jenes gestoßen . Es gibt nichts Magisches an SPAs, das sich auf Ihr Anwendungslayout auswirken würde, als das, was in diesen Fragen bereits beantwortet wurde.

Es gibt jedoch unterschiedliche Ansätze, die für verschiedene Projekte am besten geeignet sind. Ich würde empfehlen, das Grundlayout beizubehalten, das das Eck-Seed-Projekt vorsieht. Erstellen Sie separate Ordner aus den bereitgestellten für Ihre benutzerdefinierten Pakete und den Quellcode. Verwenden Sie in Ihrem Quellordner ein Projektlayout, das für Ihre Anforderungen sinnvoll ist.

Wenn Ihre Anwendung mehrere ng-app-Deklarationen auf derselben Seite benötigt, müssen Sie das AngularJS-Modul manuell booten, indem Sie einen Modulnamen eingeben, wie unten gezeigt:

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

Dieser Plunker erklärt, wie wir AngularJS manuell booten können.