AngularJS + sails.js
Ich entwickle eine App, die sails.js für Backend und AngularJS für Frontend verwenden kann. Ich dachte, dass ich eine Angular App mit dem Yeoman-Winkelgenerator https://github.com/yeoman/generator-angular erstellen werde. Sobald ich mit der Front-End-Logik fertig bin, erstelle ich ein Segel App mit,
- npm install -g segelt
- segelt neue App
Und dann übertrage ich alle meine AngularJS-Dateien in den Sails-Ordner.
Die Sache ist jedoch, dass AngularJS eine Ordnerhierarchie erstellt, wie diese https://github.com/rishy/angular-jade-stylus-seed und beim Ausführen von "grunt server" ein Ordner "dist" erstellt wird, der enthält die endgültige Serienversion.
Andererseits ist die Ordnerhierarchie für "Segel neue App" für Segel-App ähnlich.
- api
- adapter /
- steuerungen /
- modelle /
- richtlinien /
- dienstleistungen/
- vermögenswerte
- bilder /
- js /
- stile /
- favicon.ico
- robots.txt
- config /
- knotenmodule /
- ansichten
- zuhause/
- 403.ejs
- 404.ejs
- 500 ejs
- layout.ejs
- Gruntfile.js
- app.js
- package.JSON
Meine Fragen sind also:
- Wie übertrage ich nun meine Angular Files in dieses Verzeichnis und wie soll ich es strukturieren?
- Da Segel mit "Segelaufzug" einen Server startet und eckig "Grunt-Server" verwendet, welchen Server sollte ich zum Starten des Servers für meine App "sailsJs + AngularJs" verwenden?
- Welche Änderungen muss ich in der Gruntfile.js vornehmen, da sie jetzt den Code von Angular und Sails enthalten sollte?
- Wo sollte ich meine unterschiedlichen Ansichten und Stildateien aufbewahren und wie kann ich auf diese Angular-Elemente oder von Sails aus zugreifen?
Ich glaube, viele Leute stehen vor diesem ähnlichen Problem, da AngularJS und SailsJs derzeit im Trend sind. Es sollte eine robuste Plattform für die Erstellung einer AngularJS + SailsJS-App vorhanden sein, die derzeit leider fehlt.
Da Sails ein reines Backend-Gerüst ist und Angular ein reines Frontend ist, können sie gut zusammenarbeiten. Es kann ein wenig verwirrend werden, wenn Sie den Angular-Generator einbauen, aber hier sind die grundlegenden Schritte, wenn Sie mit der Angular Seed app und Sails v0.10 beginnen:
- Erstellen Sie eine neue Sails-App mit
sails new myApp - Löschen Sie den Inhalt des
myApp/assets-Ordners - Kopieren Sie den Inhalt des Ordners Angular Seed
appinmyApp/assets. - Ersetzen Sie den Inhalt von
myapp/views/layout.ejsdurch den Inhalt der Datei Angular Seedapp/index.html - Schneiden Sie den gesamten Inhalt des Nicht-Skript-Tags aus der
layout.ejs-Datei aus (alles nach dem<body>-Tag und vor dem ersten<script>-Tag, und ersetzen Sie damit den Inhalt vonmyApp/views/homepage.ejs. - Platzieren Sie
<%-body%>nach dem<body>-Tag inlayout.ejs.
Sie können den Server dann mit sails lift starten, und die Angular-App wird unter http://localhost:1337 angezeigt.
Ich habe auf Github gesetzt als Referenz.
Wenn Sie diese Methode verwenden, müssen Sie nichts an der Gruntfile tun, und Sie rufen niemals grunt server auf. Dies ist ausschließlich für das Testen von Angular-Apps mit ihrem Testserver, den Sie durch Sails ersetzen. Sie profitieren weiterhin von der Sails Grunt-Sync-Aufgabe, die Ihre Front-End-Assets überwacht und synchronisiert, wenn sie geändert werden.
Wenn Sie wirklich den Yeoman Angular-Generator verwenden möchten, können Sie versuchen, eine App direkt im Ordner assets Ihrer Sails-App zu generieren und die Generatorbefehle innerhalb dieses Ordners zu verwenden. Ich habe es bisher noch nicht verwendet, daher weiß ich nicht, wozu der Ordner dist dient, aber es scheint, als ob alle Knotenmodule, die es installiert, den Test-Webserver unterstützen (was Sie seitdem nicht mehr benötigen) Sie haben Segel) und die Testsuite (die immer schön ist). Das einzige Problem, das ich sehen kann, ist, ob Sie einige der Aufgaben in dieser Gruntfile benötigen, die Yeoman generiert. Sails verarbeitet Weniger Kompilierung und CSS-Minifizierung (im Produktionsmodus), macht aber nichts mit Jade oder Stylus, sodass Sie diese Aufgaben zur Sails Gruntfile hinzufügen müssen, wenn Sie sie wirklich brauchen.
ihre Fragen sind genau der Grund, warum ich Sailng: https://github.com/ryancp/sailng .__ erstellt habe, eine Beispiel-/Boilerplate-Anwendung, die die neuesten Sails 0.10.0-rc5 verwendet.
Außerdem wird demonstriert, wie Socket.io in Sails verwendet wird, um Echtzeitaktualisierungen für den Client ohne Ajax-Abfrage bereitzustellen.
Klonen Sie es und befolgen Sie die Anweisungen, um eine bessere Vorstellung davon zu erhalten, wie Sie Sails und Angular zusammen verwenden.
Ich habe auch eine Beispiel-App "boilerplate/example" für Sails.js + Angular gemacht. In meiner Lösung sind diese nach Back- und Frontend (zwei Server) getrennt.
Meine Lösung demonstriert auch Socket-Kommunikation + Live-Updates innerhalb der Daten zwischen Benutzern.
Fühlen Sie sich frei, es auszuprobieren. https://github.com/tarlepp/angular-sailsjs-boilerplate
Ich habe einen ähnlichen Anwendungsfall wie Ihren. Ich habe mit Yeoman die Projektstruktur für anglejs erstellt. In dieser Situation lautet meine Lösung:
- Verwenden Sie "grunt serv", um die single-page-Anwendung "anglejs" in einer reduzierten Version zu generieren, und alles sollte sich im "dist" -Ordner befinden.
Entfernen Sie im Projekt "routes.js" im Projekt "sails.js" den Konfigurationscode für Ansichten:
'/': { Ansicht: 'Homepage' }
Entfernen Sie alle Dateien im Ordner sails.js views und assets. Stellen Sie jedoch sicher, dass Sie keine Dateien im Ordner "Assets" benötigen, bevor Sie alles entfernen.
Kopieren Sie die minimifizierte Website von anglejs und fügen Sie sie in den Assets-Ordner ein.
Starten Sie sails.js (Segellift) und Sie können Ihre kantige Website unter localhost: 1337 durchsuchen
Sails.js hat diese Methode jetzt auch kurz erwähnt http://sailsjs.org/documentation/concepts/views
Sie müssen die Standardaufgabe so konfigurieren, dass der Ordner "angle dist" in .tmp kopiert wird
Siehe die Taskkonfiguration in diesem Sails Angular Projekt