wake-up-neo.com

Empfohlene skalierbare AngularJS-Projektstruktur?

Ich habe mehrere AngularJS-Projektvorlagen gesehen: das Seed-Projekt auf der offiziellen Website, das Yeoman und AngularFun .

Gibt es andere (un) meinungslose Vorlagen, die ich mir ansehen sollte, oder ein ähnliches Muster, das Sie für ein skalierbares AngularJS-Projekt vorschlagen würden?

Mit skalierbar meine ich

  • controller, Direktiven, Filter usw. in eigene Dateien aufteilen können;
  • in der Lage zu sein, diese Dateien bei Bedarf zu laden, anstatt den Browser alles laden zu lassen;
  • gemeinsame, projektübergreifende Komponenten (z. B. gemeinsame Anweisungen, Filter oder Dienste) haben können.
46
luisfarzati

Sie können sich eine Demo-Anwendung ansehen, die Pawel Kozlowski und ich zusammenstellen: https://github.com/angular-app/angular-app .

Es bietet keine Unterstützung für das Laden von Dateien bei Bedarf, aber Sie können sehen, dass wir Module in separate Dateien aufteilen und Tests als erstklassige Komponente einrichten. Wir haben einen Build-Prozess (mit Grunt), der die js-Dateien verkettet (und bei Veröffentlichung minimiert) und Unit- und End-to-End-Tests ausführen kann.

Wir haben uns entschieden, unsere Module in zwei Gruppen funktionaler Anwendungsbereiche und gemeinsamen übergreifenden Bibliothekscode aufzuteilen, anstatt sie einfach in Direktiven, Filter, Services und so weiter aufzuteilen. Neben einem Funktionsbereich können wir einige Services, Direktiven, Controller und Templates anbieten.

Dies erleichtert das Entwickeln gegen einen Funktionsbereich, da alle relevanten Elemente an einem Ort sind.

Das Projekt stützt sich auf einen einfachen NodeJS-Server, um die Dateien bereitzustellen (unterstützt HTML5-Deep-Linking) und Authentifizierungs- und Autorisierungsdienste bereitzustellen.

30
Pete BD

Sie sollten ng-boilerplate versuchen. Die vielversprechendste Kickstart-Vorlage für größere AngularJS-Projekte: http://joshdmiller.github.io/ng-boilerplate/#/home

8
ottsch

Ich würde sagen, dass alle Ihre Punkte leicht erreicht werden können, zumindest ohne Änderungen an Angular.

  • controller, Direktiven, Filter usw. in eigene Dateien aufteilen können;

dies kann natürlich mit Basic Angular erfolgen, da Sie beliebig viele Skript-Tags mit Controllern/Diensten einfügen können. Natürlich ist es überhaupt nicht skalierbar, daher ist die beste Option die Verwendung von AMD-Modulen wie RequireJS. Dies ist einer der Seeds mit dieser Art von Konfiguration: https://github.com/elsom25/angular-requirejs-html5boilerplate-seed

  • in der Lage zu sein, diese Dateien bei Bedarf zu laden, anstatt den Browser alles laden zu lassen;

Wie pkozlowski in den Kommentaren angedeutet hat, gibt es bereits einen Eintrag mit einer Beschreibung des Problems, und Sie werden sehen, dass ich auch daran gearbeitet habe, dieses Problem zu lösen hatte tatsächlich einige Ergebnisse. Ich habe ein funktionierendes Beispiel zum Laden von Controllern, Vorlagen und Direktiven bei Bedarf mit RequireJS und den Auflösungsparameter der Routenkonfiguration.

  • gemeinsame, projektübergreifende Komponenten (z. B. gemeinsame Anweisungen, Filter oder Dienste)

Nachdem die vorherigen Punkte gelöst wurden, kann dies mit RequireJs Modulen leicht erreicht werden.


Ich habe mich gefragt, ob es eine gute Idee wäre, ein Agularjs-Lazy-Seed-Projekt zu starten. Gibt es dafür eine Nachfrage? Wir könnten sogar noch weiter gehen und die Routenkonfigurationen außerhalb der üblichen Konfiguration verschieben. Nehmen wir an, Sie haben eine Datei views.json (idealerweise ein Dienst, der mit json antwortet) mit den Ansichten, die Sie in Ihre Anwendung aufnehmen möchten:

{
    "views" : {
        ....
        "account" : {             
             "path" : "/account" // route path
             "name" : "Account", // view name
             "partial" : "views/account/account.html", // partial file
             "controller" : "account/main" // RequireJS module
             "directives" : [ "directives/version", "directives/menu" ] // directives used in the view
        }
        ....
    }
}

Auf diese Weise können Sie:

  • entwickeln Sie die Ansichten getrennt und erstellen Sie die Anwendung basierend auf diesem JSON-Bootstrap
  • haben einige gemeinsame Richtlinien und Komponenten
  • wenn bootstrap nach dem Login können Sie die Ansichten filtern, die der Benutzer sehen darf
  • alles innerhalb des ngView würde bei Bedarf geladen werden

Natürlich sollte Ihre Bewerbung dann wirklich groß sein, damit all diese zusätzlichen Arbeiten Sinn machen;)

8
matys84pl

Ich bin mit den Punkten einverstanden, die andere Leute bisher gesagt haben; Es ist sehr einfach, Dinge in separate Module aufzuteilen und die Module mit normalem AngularJS-Zeug voneinander abhängig zu machen. Dann kann Ihr JS-Code in die von Ihnen bevorzugten Dateien und Verzeichnisbäume aufgeteilt werden.

Ich dachte nur, ich würde erwähnen, was wir in dem Open-Source-Projekt hawtio machen, das auf AngularJS basiert. Wir haben die Modularität ein wenig extremisiert :) hawtio verwendet Plugins , die zur Laufzeit auf dem laufenden Server erkannt werden können (z. B. UI-Funktionen zur Laufzeit bereitstellen und deren Bereitstellung aufheben). Basierend auf einer REST Abfrage oder JMX-Erkennung können wir also Plugins dynamisch entfernen.

z.B. Hier sind alle unsere aktuellen Standard-Plugins

In Bezug auf das Layout hat jedes Plugin seine eigenen Verzeichnisse für Code (js), HTML-Partials (html) und alles andere (z. B. CSS/IMG-Verzeichnisse), was es einfach macht, die Dinge schön und modular zu halten. z.B. hier ist das camel plugin welches seine eigenen html, js und img ordner hat.

Dann definiert ein bestimmtes Plugin sein eigenes AngularJS-Modul, Direktiven, Filter und welche können dann von anderen Modulen abhängen.

Für die Quelldateien haben wir uns aber noch nicht so viele hilfreiche Namenskonventionen ausgedacht :). Wir finden, dass das Schreiben einer Datei pro Controller am einfachsten erscheint. Aber abgesehen von der Datei fooPlugin.ts und der Datei helpers.ts (für allgemeine modulspezifische Hilfsfunktionen) haben wir noch keine anderen sinnvollen Namenskonventionen gefunden.

4
James Strachan

Warnung: Schamloser Stecker.

Sie sollten unbedingt generator-angular-xl auschecken.

Es zielt insbesondere darauf ab, AngularJS-Anwendungen in großem Maßstab zu erstellen, indem Code logisch gruppiert, Gerüst-Unit-Tests durchgeführt und Ihre js- und css-Dateien automatisch in index.html usw. eingefügt werden Eine gute Wahl, wenn Sie Prototypen entwickeln, die auch zu vollwertigen Anwendungen werden können. Es wird KEIN Back-End-Code generiert, sodass Sie frei entscheiden können, welche Back-End-Technologie Sie verwenden möchten.

1
Kenneth Lynne

Dieses Projekt klingt vielversprechend http://vesparny.github.io/ng-kickstart

Es ermöglicht Ihnen, Ihre Codebasis nach Funktionen aufzuteilen und Ihren Code wiederverwendbar zu halten. Dank einer benutzerdefinierten Grunt-Aufgabe können Sie auch das Laden von Leberdaten durchführen.

Das Projekt ist auch auf Unit-Tests ausgerichtet und verfügt über eine benutzerdefinierte "dist task", mit der Sie eine optimierte, produktionsbereite Version erstellen können.

1