Angular-cli与任何其他服务器

Question

我是Angular 2的新手,我正在尝试使用angular-cli系统构建应用程序.这工作,我可以ng-serve和应用程序出现.然而,尝试使用除ng-serve系统以外的任何其他应用程序来提供应用程序似乎是一个巨大的痛苦.特别是我正在尝试使用带有Python Flask应用程序的angular-cli构建的应用程序.我似乎不得不跳过试图让它发挥作用的箍数让我疯狂!我想这样做是因为我想用Python/Flask应用程序提供REST API,它将响应来自Angular 2应用程序的HTTP服务请求.

以下是我正在使用的相关版本:

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

如何在使用Flask时提供Angular应用程序？

Answer 1

我实际上"sorta"解决了这个问题.我有一个名为"smoke"的目录(烟雾和镜子的缩写),在里面我运行了angular-cli命令:

ng new static

这在static目录中创建了angular-cli start out应用程序.然后我创建了这个(简化的)Python Flask应用程序:

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

这样我就可以导航到http:// localhost:5000,应用程序将像"ng serve"一样提供Angular应用程序.现在,我可以根据需要添加我的REST API端点,并让Angular服务访问它们以填充应用程序.

道格

Answer 2

不要求 Flask 为前端应用程序提供服务。

实际上，Flask 与 Angular 应用程序一起做的所有事情都是提供静态文件，这可以通过生产中的 Nginx 这样的 Web 服务器或开发中的 ng-serve 这样的框架工具更好地处理。

同时，Flask 将充当前端应用程序与之通信的后端 api 服务器。使用request.get_json()和return jsonify(...)获取 JSON 数据并进行响应。

分别运行两者，它们仅通过 HTTP 协同工作。这也简化了后端开发人员与前端开发人员的合作：他们需要了解的只是在两者之间进行通信的 API。但是，由于前端与后端在不同的端口上提供服务，因此您需要适当设置 Flask 以允许 CORS 请求，例如使用 Flask-CORS。