webentwicklung-frage-antwort-db.com.de

Strukturierung einer Node.js- und AngularJS-Anwendung

Ich versuche gerade mein erstes AngularJS-Projekt, und es ist sinnvoll, Node.js für das hintere Ende zu verwenden, auch wenn gleichzeitig AngularJS und Node.js von Grund auf neu gelernt werden müssen.

Als Erstes versuche ich, eine gute Dateistruktur zu erhalten. Bisher hat mein reines HTML/CSS-Template folgende Verzeichnisstruktur ...

_site/
Fonts/
Javascript/
SASS/
Stylesheets/
Index.html

(_site ist ein Arbeitsverzeichnis für PSDs usw.)

Ich habe eine Beispielverzeichnisstruktur für eine Node.js/AngularJS-App hier gefunden.

... was die folgende Verzeichnisstruktur vorschlägt.

app.js              --> Application configuration
package.json        --> For npm
public/             --> All of the files to be used in on the client side
  css/              --> CSS files
    app.css         --> Default stylesheet
  img/              --> Image files
  js/               --> JavaScript files
    app.js          --> Declare top-level application module
    controllers.js  --> Application controllers
    directives.js   --> Custom AngularJS directives
    filters.js      --> Custom AngularJS  filters
    services.js     --> Custom AngularJS services
    lib/            --> AngularJS  and third-party JavaScript libraries
      angular/
        angular.js            --> The latest AngularJS
        angular.min.js        --> The latest minified AngularJS
        angular-*.js          --> AngularJS add-on modules
        version.txt           --> Version number
routes/
  api.js            --> Route for serving JSON
  index.js          --> Route for serving HTML pages and partials
views/
  index.jade        --> Main page for the application
  layout.jade       --> Doctype, title, head boilerplate
  partials/         --> AngularJS view partials (partial jade templates)
    partial1.jade
    partial2.jade

Also das sieht für mich ziemlich gut aus (abgesehen von der Tatsache, dass ich Jade nicht verwenden würde).

Ich habe noch folgende Fragen ...

  1. Ich möchte alle Front-End- und Back-End-Dateien getrennt halten. Bei dieser Lösung werden alle Front-End-Dateien im Verzeichnis public/abgelegt. Dies ist sinnvoll, da die meisten öffentlich sein müssen. Ist es jedoch sinnvoll, die Ordner SASS und _site hier abzulegen? Ich könnte sie einfach dort behalten, aber nicht hochladen, wenn ich sie in Produktion sende, aber es scheint falsch zu sein, weil sie nicht öffentlich sein sollten. Sie gehören auch nicht zum Root-Level mit all dem Back-End-Zeug.

  2. Wäre es nicht besser, AngularJS aus einem CDN zu laden?

  3. Da der Server nur eine Vorlage (die Hauptanwendungsvorlage) bereitstellen muss und der gesamte andere HTML-Code auf dem Frontend erstellt wird, wäre es nicht sinnvoller, die Datei index.html statisch zu halten, den Ordner "Views" zu löschen und Erstellen Sie einen Partials/Ordner unter public/wie die ursprüngliche AngularJS Seed -Anwendung?

Mir ist klar, dass dies alles eine Ansichtssache ist, und ich könnte sie technisch einsetzen, wo immer ich will, aber ich hoffe, dass jemand, der mehr Erfahrung hat, als ich mich über die Fallstricke verschiedener Verzeichnisstrukturen informieren könnte.

77
jonhobbs

1) Es macht normalerweise Sinn, saas/less-Dateien öffentlich zu machen, da Sie beim Debuggen die clientseitige less-> css-Konvertierung verwenden möchten (less.js macht das). Nicht sicher, was Ihr _site enthält, jedoch (Btw sollten Sie für Ihr Projekt einen Kleinbuchstabenordner verwenden, vor allem für die Öffentlichkeit).

2) Es ist in der Regel ratsam, AngularJS von Google CDN zu laden, wenn in der Produktion nur eine lokale Version für die Entwicklung verwendet wird. Je nach Umgebung können Sie zwei separate Layouts verwenden.

3) Auch wenn clientseitiges Rendering der richtige Weg ist, können Sie das serverseitige Layout/Ansichten-Rendering beibehalten. Sie werden es wahrscheinlich irgendwann benötigen (Administratorzugriff, E-Mail-Rendering usw.). Es kann jedoch hilfreich sein, den Namen partials von AngularJS im öffentlichen Ordner zu verwenden, um Verwechslungen zwischen serverseitigen views und clientseitigen partials zu vermeiden.

Sie sollten sich eindeutig für das logischste entscheiden, was Sie derzeit tun möchten. Sie werden wahrscheinlich Dinge verschieben, wenn Sie sich mit express auskennen.


Sie sollten das vorhandene Express-Framework überprüfen, um zu sehen, wie sie ihre App strukturieren. Zum Beispiel hat TowerJS einen ziemlich sauberen config-Ordner, jedoch mischen sie serverseitigen und clientseitigen Code, den ich persönlich nicht mag.

In diesem Vergleich von NodeJS MVC-Frameworks können Sie sehen, wie andere das machen. Ich würde jedoch ganz klar mit Vanilla Express Code beginnen, um die volle Kontrolle zu haben und zu verstehen, wie die Dinge funktionieren, bevor man sich auf eines dieser Frameworks übertrifft.

20
Olivier

Mit der Zeit wird es einfacher. Ich habe Yeoman für das AngularJS-Frontend verwendet, und es macht das Leben viel einfacher: http://yeoman.io/

Option 1, MEAN.io

MEAN ist ein fantastisches Akronym! Ich bevorzuge die MEAN-Stapelverzeichnisstruktur. Lass uns Konventionsleute benutzen! Verwenden Sie einfach die Verzeichnisstruktur von mean.io . MEAN ist auch praktisch, weil es all die guten Sachen wie Grunt , Bower , usw. wirft.

Enter image description here

Option 2, Winkelsamen + Express.js

Ich habe GitHub nach Node.js/AngularJS-Projekten gesucht (wahrscheinlich nicht hart genug) und nichts wirklich tolles für eine Startverzeichnisstruktur gesehen. Also habe ich die Node.js Express.js (laufendes Express.js von der Kommandozeile unter Verwendung von EJS noch Jade/Pug ) mit dem Winkelseed-Projekt zusammengeführt ( klone es aus GitHub ). Dann bewegte ich eine Menge Zeug herum. Folgendes habe ich mir ausgedacht:


  • developer - Sachen, die nur die Entwickler verwenden. Muss nicht bereitgestellt werden .
    • config - Karma-Konfigurationsdateien und andere.
    • scripts - Entwicklerskripte (Erstellen, Testen und Bereitstellen)
    • test - e2e und Komponententests.
  • logs
  • node_modules - diese Stack Overflow-Antwort empfahl, dies in Git zu setzen. Dies kann jedoch jetzt veraltet sein.
  • public - Dies kommt fast direkt aus dem Winkel-Seed-App-Ordner .
    • css, img, js, lib, partials - ziemlich naheliegend und nett und kurz.
  • routes - Routen von Node.js.
  • server - serverseitige "Shebang" Node.js-Programme, Daemons, Cron-Programme, was auch immer.
  • server.js - wurde aus app.js umbenannt, um es deutlicher zu machen, dass dies serverseitig ist.

Enter image description here

36
Jess

Wie vorgeschlagen, hängt es hauptsächlich von Ihren persönlichen Vorlieben ab und davon, was für ein Projekt Sie gerade bearbeiten. Jeder, mit dem Sie sprechen, hat unterschiedliche Ideen, und jedes Projekt hat sein eigenes Design - was für das eine funktioniert, funktioniert möglicherweise nicht für das andere. Ich gehe davon aus, dass Sie einige verschiedene Strukturen ausprobieren und bald eine finden werden, die am bequemsten ist - dies wird sich jedoch im Laufe der Zeit weiterentwickeln.

Ich habe festgestellt, dass die Angular Seed - Struktur die sauberste ist, aber auch dies ist eine persönliche Präferenz (allerdings hilft es, dass sie vom Angular - Team entworfen wurde.)

Sie können auch Yeoman betrachten, um Projektskelette zu generieren.

Yeoman ist eine robuste und einfühlsame Sammlung von Tools, Bibliotheken und Workflows, die Entwicklern helfen können, schnell schöne, überzeugende Web-Apps zu erstellen.

Es ist ein großartiges Tool zum Booten und Verwalten von Projekten (ähnlich wie in Rails) und erstellt eine Verzeichnisstruktur und Skelettdateien, auf denen Sie aufbauen können. Brian Ford schrieb einen exzellenten Beitrag über die Verwendung von Yeoman mit Angular.

Ich schlage auch vor, die Angular Meetup-Aufzeichnungen auf ihrem YouTube-Kanal anzusehen. Ich habe kürzlich an einem Treffen in Mountain View teilgenommen, bei dem diese Fragen auftauchten. Miško empfahl Angular Seed und Yeoman (zumindest als guter Ausgangspunkt).

So beantworten Sie Ihre individuellen Fragen:

  1. Alle Dateien, die serverseitig kompiliert werden, sollten außerhalb Ihres öffentlichen Ordners aufbewahrt werden. Ich würde vorschlagen, keine Master-PSDs, Mockups oder andere Dateien, die nicht für den öffentlichen Gebrauch bestimmt sind (weder vom Browser noch vom Benutzer), in öffentlichen Ordnern zu belassen.

  2. Es ist immer gut, statische Assets (JS, Images, CSS) von einem CDN bereitzustellen, wenn Sie ein hohes Verkehrsaufkommen erwarten. Es ist nicht so wichtig für weniger besuchte Websites, aber dennoch eine gute Idee. Ich würde damit beginnen, die Dateien lokal für die anfängliche Entwicklung bereitzustellen. Lassen Sie die Asset-Optimierung, wenn Sie sich Ihrem Live-Termin nähern. Wenn diese Zeit gekommen ist, wollen Sie auch Ihr Caching richtig einrichten. Yeoman bietet beispielsweise eine gute Möglichkeit, Ihre Assets zu versionieren. Dies gibt Ihnen den Vorteil langlebiger Caches, ermöglicht Ihnen jedoch, Aktualisierungen der Dateien auf die Clients zu übertragen.

  3. Wenn Ihre Indexdatei kein serverseitiges Rendern erfordert, stellen Sie sie statisch bereit. Ich möchte mein Backend mit Angular Apps so weit wie möglich vom Backend entkoppelt halten. Es hilft, die Trennung von Sorgen aufrechtzuerhalten. Bei der Entwicklung der Client-Dateien müssen Sie sich überhaupt nicht mit dem Backend auseinandersetzen (Angular ist hierfür großartig.)

Wirklich, Sie müssen nur herumspielen; Probieren Sie verschiedene Dinge aus, lesen Sie Blog-Beiträge, holen Sie sich Ideen von anderen, stellen Sie Fragen (wie hier und auf der Google+ Community-Seite Angular), sehen Sie sich Videos an und nehmen Sie, wenn Sie können, an Meetups teil - Meetups sind es wirklich toll dafür.

5
Berry Phillips

Ich stimme nicht allen vorherigen Beiträgen zu. Sie werden entweder von einem anderen Ort eingefügt oder haben keine eigene Meinung. Aus meiner Erfahrung heraus ist es besser, Ihre clientseitigen Codes zu reduzieren. Ich meine, der Code in Ihrem Client-Verzeichnis sollte sich in Ihrem Stammverzeichnis befinden.

Warum schlage ich diesen Weg vor? Denn wenn Sie Ihr Full-Stack-JavaScript-Projekt in ein Projekt ohne Backend ändern möchten und nur das Frontend enthalten, ist dies viel einfacher. Ich meine, die meisten mit JavaScript geschriebenen Projekte konzentrieren sich auf das Frontend. 

Es ist besser, den Backend-Code in einem Verzeichnis wie "Server" in der gleichen Ordnerebene wie "css", "image" abzulegen. Der Vorteil davon ist, dass Sie, wenn Sie ein Backend benötigen oder nicht benötigen, einfach hinzufügen oder löschen Sie das "Server" -Verzeichnis, und die Origin-Projektstruktur wird dadurch nicht beeinflusst.

So was:

 Enter image description here

2
胡亚雄

Sehen Sie dieses Skelett

https://github.com/Giancarlo1974/SailsAngular

Es integriert Angular 4 + Bootstrap 4 für den Client und Node Sails JS für den Server

Eine der Stärken dieser Lösung ist: 1) Task Automation 2) Database Agnosticism

0
Janka

Ich habe genau dasselbe untersucht.

Meine ersten Gedanken richteten sich auf die Verwendung von Express Generator und Angular Seed .

Dann fand ich eine viel schönere Lösung:

Einer der beliebtesten yeoman-Generatoren bietet eine Struktur für Node.js- und AngularJS-Anwendungen.

Ich glaube an die Macht der Standardisierung und neue Leute, die dem Projekt beitreten, werden die einheitliche Struktur zu schätzen wissen.

0
Michal Stefanow