Typischer AngularJS-Workflow und Projektstruktur (mit Python Flask)

Ich bin ziemlich neu in diesem ganzen MV * clientseitigen Framework-Rausch. Es muss nicht AngularJS sein, aber ich habe es ausgewählt, weil es sich für mich natürlicher anfühlt als Knockout, Ember oder Backbone. Wie sieht der Workflow aus? Beginnen die Leute damit, eine clientseitige Anwendung in AngularJS zu entwickeln und dann das Back-End daran anzuschließen?

Oder umgekehrt, indem Sie zuerst das Back-End in Django, Flask, Rails erstellen und dann eine AngularJS-App daran anhängen? Gibt es einen "richtigen" Weg, oder ist es am Ende nur eine persönliche Präferenz?

Ich bin mir auch nicht sicher, ob ich mein Projekt nach Flask oder AngularJS strukturieren soll. Gemeinschaftspraktiken.

Zum Beispiel ist die Minitwit-App von Flask folgendermaßen aufgebaut:

minitwit
|-- minitwit.py
|-- static
   |-- css, js, images, etc...
`-- templates
   |-- html files and base layout

Die AngularJS-Tutorial-App ist wie folgt aufgebaut:

angular-phonecat
|-- app
    `-- css
    `-- img
    `-- js
    `-- lib
    `-- partials
    `-- index.html
|-- scripts
 `-- node.js server and test server files

Ich könnte mir eine Flask-App selbst vorstellen, und es ist ziemlich einfach, AngularJS-App wie ToDo List selbst zu sehen, aber wenn es darum geht, diese beiden Technologien zu verwenden, verstehe ich nicht, wie sie zusammenarbeiten. Es scheint fast so, als ob ich kein serverseitiges Webframework benötige, wenn Sie bereits AngularJS haben. Ein einfacher Python-Webserver wird ausreichen. In der AngularJS-Aufgaben-App verwenden sie beispielsweise MongoLab, um mithilfe der Restful-API mit der Datenbank zu kommunizieren. Es war nicht erforderlich, ein Webframework im Backend zu haben.

Vielleicht bin ich nur furchtbar verwirrt und AngularJS ist nichts anderes als eine ausgefallene jQuery-Bibliothek, daher sollte ich jQuery genauso verwenden wie in meinen Flask-Projekten (vorausgesetzt, ich ändere die AngularJS-Vorlagensyntax in etwas, das nicht mit Jinja2 in Konflikt steht). Ich hoffe, meine Fragen machen Sinn. Ich arbeite hauptsächlich im Backend und dieses clientseitige Framework ist für mich ein unbekanntes Gebiet.

Ich würde damit beginnen, die Flask-App in der Standardstruktur wie folgt zu organisieren:

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
|-- templates

Und wie bereits erwähnt, sollten Sie sich bei der Verwendung einer Angular-App auf die Verwendung von clientseitigen Angular-Vorlagen konzentrieren und sich von serverseitigen Vorlagen fernhalten. Wenn Sie render_template ('index.html') verwenden, interpretiert Flask Ihre eckigen Vorlagen als Jinja-Vorlagen, sodass sie nicht korrekt gerendert werden. Stattdessen möchten Sie Folgendes tun:

@app.route("/")
def index():
    return send_file('templates/index.html')

Beachten Sie, dass die Verwendung von send_file () bedeutet, dass die Dateien zwischengespeichert werden. Daher sollten Sie stattdessen make_response () verwenden, zumindest für die Entwicklung:

    return make_response(open('templates/index.html').read())

Erstellen Sie anschließend den AngularJS-Teil Ihrer App und ändern Sie die App-Struktur so, dass sie folgendermaßen aussieht:

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
        |-- app.js, controllers.js, etc.
    |-- lib
        |-- angular
            |-- angular.js, etc.
    |-- partials
|-- templates
    |-- index.html

Stellen Sie sicher, dass Ihre index.html AngularJS sowie alle anderen Dateien enthält:

<script src="static/lib/angular/angular.js"></script>

Zu diesem Zeitpunkt haben Sie Ihre RESTful-API noch nicht erstellt, sodass Ihre js-Controller vordefinierte Beispieldaten zurückgeben können (nur eine temporäre Einrichtung). Wenn Sie bereit sind, implementieren Sie die RESTful-API und verbinden Sie sie mit angular-resource.js mit Ihrer Angular-App.

BEARBEITEN: Ich habe eine App-Vorlage zusammengestellt, die, obwohl etwas komplexer als oben beschrieben, zeigt, wie man eine App mit AngularJS + Flask erstellen kann, einschließlich der Kommunikation zwischen AngularJS und einer einfachen Flask-API. Hier ist es, wenn Sie es überprüfen möchten: https://github.com/rxl/angular-flask

Sie können an beiden Enden beginnen.

Sie haben Recht, dass Sie mit AngularJS wahrscheinlich kein vollständiges serverseitiges Framework benötigen. In der Regel ist es besser, statische HTML- / CSS- / JavaScript-Dateien bereitzustellen und eine RESTful-API für das Back-End bereitzustellen, die der Client verwenden kann. Eine Sache, die Sie wahrscheinlich vermeiden sollten, ist das Mischen von serverseitigen Vorlagen mit clientseitigen AngularJS-Vorlagen.

Wenn Sie Flask zum Bereitstellen Ihrer Dateien verwenden möchten (möglicherweise übertrieben, aber Sie können es trotzdem verwenden), kopieren Sie den Inhalt von "app" von "angle-phonecat" in den "statischen" Ordner von "minitwit".

AngularJS richtet sich eher an AJAX-ähnliche Anwendungen, während flask Ihnen die Möglichkeit bietet, sowohl ältere Web-Apps als auch RESTful-APIs zu erstellen. Jeder Ansatz hat Vor- und Nachteile. Es kommt also wirklich darauf an, was Sie tun möchten. Wenn Sie mir einige Einblicke geben, kann ich möglicherweise weitere Empfehlungen aussprechen.

Dieses offizielle Jetbrains PyCharm-Video von John Lindquist (angle.js und jetbrains guru) ist ein guter Ausgangspunkt, da es das Zusammenspiel von Webservice, Datenbank und angle.js in der Flasche zeigt.

Er baut einen pinterest-Klon in weniger als 25 Minuten mit flask, sqlalchemy, flask-unruhig und eckig.

Viel Spaß: http://www.youtube.com/watch?v=2geC50roans

Bearbeiten : Der neue Angular2-Styleguide schlägt eine ähnliche, wenn nicht dieselbe Struktur detaillierter vor.

Die folgende Antwort zielt auf Großprojekte ab. Ich habe einige Zeit damit verbracht, über verschiedene Ansätze nachzudenken und zu experimentieren, damit ich ein serverseitiges Framework (in meinem Fall Flask mit App Engine) für Back-End-Funktionen zusammen mit einem clientseitigen Framework wie Angular kombinieren kann. Beide Antworten sind sehr gut, aber ich möchte einen etwas anderen Ansatz vorschlagen, der (zumindest in meinen Augen) menschlicher skaliert.

Wenn Sie ein TODO-Beispiel implementieren, sind die Dinge ganz einfach. Wenn Sie jedoch anfangen, Funktionen und kleine nette Details zur Verbesserung der Benutzererfahrung hinzuzufügen, ist es nicht schwierig, sich im Chaos von Stilen, Javascript usw. zu verlieren.

Meine Bewerbung wurde ziemlich groß, also musste ich einen Schritt zurücktreten und umdenken. Anfänglich würde ein Ansatz wie oben vorgeschlagen funktionieren, indem alle Stile und JavaScript zusammen verwendet werden, aber er ist nicht modular und nicht leicht zu warten.

Was wäre, wenn wir den Clientcode nach Funktionen und nicht nach Dateityp organisieren würden:

app
|-- server
    |-- controllers
        |-- app.py
    |-- models
        |-- model.py
    |-- templates
        |-- index.html
|-- static
    |-- img
    |-- client
        |-- app.js
        |-- main_style.css
        |-- foo_feature
            |-- controller.js
            |-- directive.js
            |-- service.js
            |-- style.css
            |-- html_file.tpl.html
        |-- bar_feature
            |-- controller.js
            |-- directive.js
            |-- service.js
            |-- style.css
            |-- html_file.tpl.html
    |-- lib
        |-- jquery.js
        |-- angular.js
        |-- ...

und so weiter.

Wenn wir es so erstellen, können wir jedes unserer Verzeichnisse in ein Winkelmodul einschließen. Und wir haben unsere Dateien so aufgeteilt, dass wir keinen irrelevanten Code durchlaufen müssen, wenn wir mit einer bestimmten Funktion arbeiten.

Ein Task-Runner wie Grunt, der ordnungsgemäß konfiguriert ist, kann Ihre Dateien ohne großen Aufwand finden, verketten und kompilieren.

Eine andere Möglichkeit besteht darin, die beiden vollständig zu trennen.

Projekt
| - Server
| - Client

Dateien, die sich auf flask beziehen, befinden sich im Serverordner und Dateien, die sich auf anglejs beziehen, befinden sich im Clientordner. Auf diese Weise ist es einfacher, das Backend oder Frontend zu ändern. Beispielsweise möchten Sie möglicherweise in Zukunft von Flask zu Django oder von AngularJS zu ReactJS wechseln.

Ich denke, es ist wichtig zu bestimmen, an welchem ​​Ende Sie den größten Teil Ihrer Datenverarbeitung durchführen möchten - Front-End oder Back-End.
Wenn es sich um ein Front-End handelt, entscheiden Sie sich für den eckigen Workflow. Dies bedeutet, dass Ihre Kolben-App eher als API fungiert, bei der eine Erweiterung wie flask-restful endet.

Aber wenn Sie wie ich die meiste Arbeit am Backend erledigen, dann gehen Sie mit der Kolbenstruktur und stecken Sie nur das Winkelende (oder in meinem Fall vue.js) ein, um das Frontend zu erstellen (falls erforderlich).