AngularJS-Ordnerstruktur [geschlossen]

Wie gestalten Sie eine Ordnerstruktur für eine große und skalierbare AngularJS-Anwendung?

Nach Typ sortieren

Links haben wir die App nach Typ organisiert. Nicht schlecht für kleinere Apps, aber selbst hier kann man sehen, dass es schwieriger wird, das zu finden, wonach man sucht. Wenn ich eine bestimmte Ansicht und ihren Controller suchen möchte, befinden sie sich in verschiedenen Ordnern. Es kann sinnvoll sein, hier zu beginnen, wenn Sie nicht sicher sind, wie Sie den Code sonst organisieren sollen, da es recht einfach ist, zur Technik auf der rechten Seite zu wechseln: Struktur nach Merkmal.

Nach Funktion sortieren (bevorzugt)

Rechts ist das Projekt nach Funktionen organisiert. Alle Layoutansichten und Controller befinden sich im Layoutordner, der Administratorinhalt im Administratorordner und die Dienste, die von allen Bereichen verwendet werden, befinden sich im Dienstordner. Die Idee dabei ist, dass sich der Code, mit dem ein Feature funktioniert, an einer Stelle befindet, wenn Sie nach ihm suchen. Dienste sind etwas anders, da sie viele Funktionen „bedienen“. Ich mag das, sobald meine App Gestalt annimmt, da es für mich viel einfacher zu verwalten ist.

Ein gut geschriebener Blog-Beitrag: http://www.johnpapa.net/angular-growth-structure/

Beispiel-App: https://github.com/angular-app/angular-app

Nachdem ich einige Anwendungen erstellt habe, einige in Symfony-PHP, einige in .NET MVC, einige in ROR, habe ich festgestellt, dass der beste Weg für mich darin besteht, Yeoman.io mit dem AngularJS-Generator zu verwenden.

Das ist die beliebteste und gebräuchlichste Struktur und am besten gepflegt.

Und am wichtigsten ist, dass Sie durch Beibehalten dieser Struktur Ihren clientseitigen Code trennen und ihn unabhängig von der serverseitigen Technologie machen können (alle Arten unterschiedlicher Ordnerstrukturen und unterschiedliche serverseitige Vorlagen-Engines).

Auf diese Weise können Sie Ihren und anderen Code einfach duplizieren und wiederverwenden.

Hier ist es vor dem Grunzen Build: (aber benutze den Yeoman Generator, erstelle ihn nicht einfach!)

/app
    /scripts
            /controllers
            /directives
            /services
            /filters
            app.js
    /views
    /styles
    /img
    /bower_components
    index.html
bower.json

Und nach dem Grunzen (concat, uglify, rev, etc ...):

    /scripts
        scripts.min.js (all JS concatenated, minified and grunt-rev)
        vendor.min.js  (all bower components concatenated, minified and grunt-rev)
    /views
    /styles
        mergedAndMinified.css  (grunt-cssmin)
    /images
    index.html  (grunt-htmlmin)

Ich mag diesen Eintrag über eckige Struktur

Es wurde von einem der AngularJS-Entwickler geschrieben und sollte Ihnen daher einen guten Einblick geben

Hier ist ein Auszug:

root-app-folder
├── index.html
├── scripts
│   ├── controllers
│   │   └── main.js
│   │   └── ...
│   ├── directives
│   │   └── myDirective.js
│   │   └── ...
│   ├── filters
│   │   └── myFilter.js
│   │   └── ...
│   ├── services
│   │   └── myService.js
│   │   └── ...
│   ├── vendor
│   │   ├── angular.js
│   │   ├── angular.min.js
│   │   ├── es5-shim.min.js
│   │   └── json3.min.js
│   └── app.js
├── styles
│   └── ...
└── views
    ├── main.html
    └── ...

Es gibt auch den Ansatz, die Ordner nicht nach der Struktur des Frameworks, sondern nach der Struktur der Anwendungsfunktion zu organisieren. Es gibt eine Github-Starter-Angular / Express-Anwendung, die dies als Angular -App bezeichnet .

Ich bin in meiner dritten AngularJS-App und die Ordnerstruktur hat sich bisher jedes Mal verbessert. Ich halte meine jetzt einfach.

index.html (or .php)
/resources
  /css
  /fonts
  /images
  /js
    /controllers
    /directives
    /filters
    /services
  /partials (views)

Ich finde das gut für einzelne Apps. Ich hatte noch kein Projekt, bei dem ich mehrere benötigen würde.