2016-07-19 18 views
4

Ich bin relativ neu in Angular 2, und ich versuche, eine App mit dem Angular-CLI-System zu bauen. Das funktioniert und ich kann ng-dienen und die Anwendung kommt auf. Es scheint jedoch ein großer Schmerz in den Arsch zu sein, zu versuchen, die Anwendung mit etwas anderem als dem ng-serve System zu bedienen. Insbesondere versuche ich, die mit angle-cli mit einer Python Flask App erstellte Anwendung zu bedienen. Die Menge an Reifen, durch die ich scheinbar springen muss, um das zur Arbeit zu bringen, macht mich verrückt! Ich möchte dies tun, weil ich eine REST-API mit der Python/Flask-App bereitstellen möchte, die auf die HTTP-Dienstanforderungen der Angular 2-Anwendung reagiert.Angular-Cli mit jedem anderen Server

Hier sind die relevanten Versionen Ich verwende:

node - 6.2.2 
npm - 2.9.5 
angular 2 - rc.4 
angular-cli - 1.0.0-beta.9 
python - 2.7.5 
flask - 0.10.1 

Wie kann ich eine Angular App dienen, während Flasche mit?

Antwort

2

Es gibt keine Anforderung, dass Flask die Frontend-Anwendung dient.

Wirklich alles, was Flask mit einer Angular-App tun würde, ist statische Dateien, etwas, das besser von einem Webserver wie Nginx in der Produktion behandelt wird, oder die Framework-Tools wie ng-dienen in der Entwicklung.

Inzwischen Flask würde als Backend api-Server, Frontend-App mit in Verbindung steht. Verwenden Sie request.get_json() und return jsonify(...), um JSON-Daten abzurufen und zu beantworten.

Führen Sie die beiden getrennt, arbeiten sie zusammen über HTTP nur. Dies vereinfacht auch das Arbeiten mit Backend- und Frontend-Entwicklern: alles, was sie wissen müssen, ist die API, um zwischen den beiden zu kommunizieren.

+0

Vielen Dank für Ihre Kommentare, sehr geschätzt. Ich muss vielleicht diesen Weg gehen, um voranzukommen. Aus internen Gründen, die mich stören, dienen die Flask-Anwendungen, die ich erstelle, ihren eigenen statischen Dateien, anstatt etwas wie nginx ihnen zu dienen. Ich weiß, das ist dumm, aber nicht in meiner Kontrolle. Aber da meine Flask-App die statischen Dateien bereitstellt, warum funktioniert das einfache App-Framework, das von angle-cli und ng new erstellt wird, wenn es mit ng serve geliefert wird, aber wenn ich versuche, die statischen Dateien mit Flask zu liefern? Es ist so, als würde die Datei main.js nicht ausgeführt, obwohl ich sie geladen sehe. –

+0

@writes_on Wenn Sie ein bestimmtes Problem haben, müssen Sie ein [mcve] erstellen, das es demonstriert. – davidism

5

Ich habe eigentlich "sorta" das Problem gelöst. Ich habe ein Verzeichnis „Rauch“ (kurz für Rauch und Spiegel) genannt, und im Innern dort lief ich den Winkel-cli Befehl:

ng new static 

Dies schaffte die Winkel-cli Anwendung im statischen Verzeichnis beginnen. Dann habe ich diese (vereinfacht) Python Flask Anwendung:

import os 
from flask import Flask, send_from_directory, redirect 
from flask.ext.restful import Api 
from gevent import monkey, pywsgi 
monkey.patch_all() 

def create_app(): 
    app = Flask("press_controller") 

    # map the root folder to index.html 
    @app.route("/") 
    def home(): 
     return redirect("/index.html") 

    @app.route("/<path:path>") 
    def root(path): 
     """ 
     This is the cheesy way I figured out to serve the Angular2 app created 
     by the angular-cli system. It essentially serves everything from 
     static/dist (the distribution directory created by angular-cli) 
     """ 
     return send_from_directory(os.path.join(os.getcwd(), "static/dist"), path) 

    return app 

if __name__ == "__main__": 
    app = create_app() 
    server = pywsgi.WSGIServer(("0.0.0.0", 5000), app) 
    server.serve_forever() 
else: 
    app = create_app() 

So kann ich zu http://localhost:5000 navigieren und die Anwendung die Angular App dienen oben wie „ng dienen“ der Fall ist. Jetzt kann ich meine REST-API-Endpunkte hinzufügen und Angular-Dienste verwenden, um die Anwendung zu füllen.

Doug