Javascript - 典型的 AngularJS 工作流程和项目结构(使用 Python Flask)

首先，我将按照以下标准结构组织Flask应用程序:

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

正如btford提到的，如果您正在做一个Angular 应用程序，您会希望专注于使用Angular 客户端模板，而不是服务器端模板.使用Render_Template(‘index.html’)会导致Flask将您的Angular 模板解释为JJJA模板，因此它们不会正确渲染.相反，您需要执行以下操作:

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

请注意，使用send_file()意味着文件将被缓存，因此您可能希望使用make_response()，至少对于开发:

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

之后，构建应用程序的AngularJS部分，修改应用程序结构，使其看起来像这样:

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

确保index.html包含AngularJS以及任何其他文件:

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

目前，您还没有构建RESTful API，因此可以让js控制器返回预定义的样本数据(只是临时设置).准备好后，实现RESTful API，并使用angular resource将其连接到angular应用程序.js.

编辑:我整理了一个应用程序模板，虽然比我上面描述的稍微复杂一些，但它说明了如何使用AngularJS+Flask构建应用程序，并完成了AngularJS和一个简单的Flask API之间的通信.如果您想结账的话，这就是:https://github.com/rxl/angular-flask英镑.