他のサーバーとの角度調整

Question

Angular 2は比較的新しいですが、Angle-Cliシステムを使用してアプリケーションを作成しようとしています。これが機能し、私は援助することができ、申請書が提出されます。しかし、ng-serveシステム以外のアプリケーションでアプリケーションを試して提供するのは大変苦しいようです。特に、私はPython FlaskアプリケーションでAngi-cliで構築されたアプリケーションを提供しようとしています。私が一生懸命働いてこの仕事をしようとしているのが、私を夢中にしているのです！私はAngular 2アプリケーションからのHTTPサービス要求に応答するPython/FlaskアプリケーションでREST APIを提供したいので、これを実行したいと思います。

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 

フラスコを使用している間、私は角度のアプリを提供することができます方法：ここで

は、私が使用している関連のバージョンですか？

Answer 1

Flaskがフロントエンドアプリケーションを提供する必要はありません。

Flaskは実際にはAngularアプリケーションが静的なファイルを提供しています.NginxのようなWebサーバーやNg-serveのようなツールで開発されています。

一方、Flaskは、フロントエンドアプリケーションと通信するバックエンドAPIサーバとして機能します。 JSONデータを取得して応答するにはrequest.get_json()とreturn jsonify(...)を使用してください。

2つを別々に実行すると、HTTPのみで連携します。これは、バックエンドとフロントエンドの開発者の作業も簡素化します。彼らが知る必要があるのは、両者の間で通信するためのAPIです。

Answer 2

私は実際に問題を解決しました。私は（煙と鏡の略）「煙」という名前のディレクトリを持っており、内部が、私は、角-CLIコマンドを実行しました：

ng new static 

これは、静的なディレクトリにアプリケーションを起動し、角度-CLIを作成しました。私はhttp://localhost:5000に移動することができ、アプリケーションが単にない「NGサーブ」のような角度アプリを果たすだろう

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() 

この方法：それから私は、この（簡体字）のPythonフラスコアプリケーションを作成しました。これでREST APIエンドポイントを追加して、必要に応じてAngularサービスにアクセスさせて、アプリケーションにデータを入れることができます。

ダグ