wake-up-neo.com

Typischer AngularJS-Workflow und Projektstruktur (mit Python-Flasche)

Ich bin ziemlich neu in dieser ganzen MV * Client-Side-Framework-Raserei. Es muss nicht AngularJS sein, aber ich habe es ausgewählt, weil es mir natürlicher vorkommt als entweder 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 anders herum, indem Sie zuerst das Backend in Django, Flask, Rails bauen 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 strukturiert:

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, die AngularJS-App wie ToDo List zu sehen, aber wenn beide Technologien verwendet werden, verstehe ich nicht, wie sie zusammenarbeiten. Es scheint fast so, als ob ich kein serverseitiges Web-Framework benötige, wenn Sie bereits AngularJS haben. Ein einfacher Python-Webserver reicht aus. In der AngularJS-To-Do-App verwenden sie beispielsweise MongoLab, um mit der Datenbank mithilfe der Restful-API zu kommunizieren. Ein Web-Framework im Backend war nicht erforderlich.

Vielleicht bin ich einfach furchtbar verwirrt, und AngularJS ist nichts weiter als eine schicke jQuery-Bibliothek. Ich sollte also genau so verwenden, wie ich jQuery in meinen Flask-Projekten verwenden würde (vorausgesetzt, ich ändere die AngularJS-Vorlagensyntax in etwas, das nicht mit Jinja2 in Konflikt steht). Ich hoffe, meine Fragen ergeben einen Sinn. Ich arbeite hauptsächlich im Backend, und dieses clientseitige Framework ist für mich ein unbekanntes Gebiet.

223
Sahat Yalkabov

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

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

Wie bereits erwähnt, sollten Sie sich bei der Verwendung einer Angular-App auf die Verwendung von Angular-clientseitigen Vorlagen konzentrieren und sich von serverseitigen Vorlagen fernhalten. Wenn Sie render_template ('index.html') verwenden, interpretiert Flask Ihre Winkelvorlagen als Jinja-Vorlagen, sodass sie nicht korrekt gerendert werden. Stattdessen sollten 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())

Anschließend bauen Sie den AngularJS-Teil Ihrer App aus und ändern die App-Struktur so, dass sie wie folgt 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. Sie können also Ihre js-Controller vordefinierte Beispieldaten zurückgeben (nur eine temporäre Konfiguration). Wenn Sie bereit sind, implementieren Sie die RESTful-API und verknüpfen Sie sie mit angle-resource.js mit Ihrer Winkel-App.

BEARBEITEN: Ich habe eine App-Vorlage zusammengestellt, die, obwohl sie etwas komplexer ist als das, was ich oben beschrieben habe, zeigt, wie man eine App mit AngularJS + Flask erstellen kann, einschließlich Kommunikation zwischen AngularJS und einer einfachen Flask-API. Hier ist es, wenn Sie es ausprobieren wollen: https://github.com/rxl/angular-flask

167
Ryan

Sie können an jedem Ende beginnen.

Sie haben recht, dass Sie wahrscheinlich kein vollständiges serverseitiges Framework mit AngularJS benötigen. Normalerweise ist es besser, statische HTML-/CSS-/JavaScript-Dateien bereitzustellen und eine RESTful-API für das Back-End bereitzustellen, die der Client verwenden kann. Vermutlich sollten Sie jedoch vermeiden, serverseitige Vorlagen mit AngularJS-clientseitigen Vorlagen zu mischen.

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

AngularJS ist eher auf AJAX-ähnliche Anwendungen ausgerichtet, wohingegen Sie mit Flask sowohl ältere Web-Apps als auch RESTful-APIs erstellen können. Jeder Ansatz hat Vor- und Nachteile, es hängt also wirklich davon ab, was Sie tun möchten. Wenn Sie mir einige Einblicke geben, kann ich möglicherweise weitere Empfehlungen geben.

38
btford

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

Er baut einen pinterest-Klon mit Glaskolben, SQL-Chemie, glaskolbenlosen und eckigen.js in weniger als 25 Minuten auf. 

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

22
Bijan

edit: Der neue Angular2-Styleguide schlägt eine ähnliche Struktur vor, wenn auch nicht die gleiche Struktur.

Die Antwort unten bezieht sich auf große Projekte. Ich habe einige Zeit damit verbracht, mit verschiedenen Ansätzen nachzudenken und zu experimentieren, sodass ich einige serverseitige Rahmenbedingungen (in meinem Fall Flask mit App Engine) für Back-End-Funktionalität und eine Clientseite kombinieren kann Rahmen wie Angular. Beide Antworten sind sehr gut, aber ich möchte einen etwas anderen Ansatz vorschlagen, der (in meinen Augen zumindest) menschlicher ist. 

Wenn Sie ein TODO-Beispiel implementieren, sind die Dinge ganz einfach. Wenn Sie jedoch mit dem Hinzufügen von Funktionen und kleinen schönen Details zur Verbesserung der Benutzererfahrung beginnen, ist es nicht schwer, sich in Chaos von Stilen, Javascript usw. zu verlieren.

Meine Anwendung wurde immer größer, so dass ich einen Schritt zurücktreten und umdenken musste. Anfänglich würde ein Ansatz wie oben vorgeschlagen funktionieren, indem alle Stile zusammen mit sämtlichem JavaScript zusammengefügt werden, jedoch nicht modular und nicht einfach zu warten.

Was wäre, wenn wir den Clientcode nach Feature 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 bauen, können wir jedes unserer Verzeichnisse in einem eckigen Modul einschließen. Und wir haben unsere Dateien auf eine nette Art und Weise aufgeteilt, sodass 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.

17
topless

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

 Projekt 
 | - Server 
 | - Client 

Dateien, die sich auf flask beziehen, werden unter dem Serverordner gespeichert und Dateien, die sich auf anglejs beziehen, werden unter dem Clientordner abgelegt. Auf diese Weise wird es einfacher, das Backend oder das Frontend zu ändern. Beispielsweise möchten Sie in der Zukunft möglicherweise von Flask zu Django oder AngularJS zu ReactJS wechseln.

1
John Kenn

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, dann gehen Sie zum eckigen Workflow, was bedeutet, dass Ihre Flaschen-App eher als API fungiert, an der eine Erweiterung wie Kolben-Restful enden wird.

Aber wenn Sie wie ich die meiste Arbeit am Backend machen, dann gehen Sie mit der Kolbenstruktur und stecken Sie nur eckig (oder in meinem Fall vue.js), um das Frontend zu bauen (wenn nötig)