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

Question

我对整个 MV* 客户端框架的狂热还很陌生。它不一定是 AngularJS，但我选择它是因为我觉得它比 Knockout、Ember 或 Backbone 更自然。无论如何，工作流程是什么样的？人们是否首先在 AngularJS 中开发客户端应用程序，然后将后端连接到它？

或者反过来，首先在 Django、Flask、Rails 中构建后端，然后将 AngularJS 应用程序附加到它？有没有“正确”的做法，还是说到底只是个人喜好？

我也不确定是根据 Flask 还是 AngularJS 来构建我的项目？社区实践。

例如，Flask 的 minitwit 应用的结构如下:

minitwit
|-- minitwit.py
|-- static
   |-- css, js, images, etc...
`-- templates
   |-- html files and base layout

AngularJS 教程应用的结构如下:

angular-phonecat
|-- app
    `-- css
    `-- img
    `-- js
    `-- lib
    `-- partials
    `-- index.html
|-- scripts
 `-- node.js server and test server files

我可以自己想象一个 Flask 应用程序，而且很容易看到像 ToDo List 这样的 AngularJS 应用程序，但是当谈到使用这两种技术时，我不明白它们是如何协同工作的。当您已经拥有 AngularJS 时，似乎我不需要服务器端 Web 框架，一个简单的 Python Web 服务器就足够了。例如，在 AngularJS 待办事项应用程序中，他们使用 MongoLab 使用 Restful API 与数据库通信。后端不需要 Web 框架。

也许我只是非常困惑，AngularJS 只不过是一个花哨的 jQuery 库，所以我应该像在我的 Flask 项目中使用 jQuery 一样使用(假设我将 AngularJS 模板语法更改为不与金贾2)。我希望我的问题有一些意义。我主要在后端工作，这个客户端框架对我来说是一个未知的领域。

Answer 1

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

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

正如 btford 所提到的，如果您正在开发一个 Angular 应用程序，您将希望专注于使用 Angular 客户端模板并远离服务器端模板。使用 render_template('index.html') 将导致 Flask 将您的 Angular 模板解释为 jinja 模板，因此它们不会正确渲染。相反，您需要执行以下操作:

@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 Controller 返回预定义的示例数据(只是临时设置)。准备就绪后，实现 RESTful API 并使用 angular-resource.js 将其连接到您的 Angular 应用程序。

编辑:我整理了一个应用程序模板，虽然比我上面描述的要复杂一点，但它说明了如何使用 AngularJS + Flask 构建应用程序，并完成 AngularJS 和简单 Flask API 之间的通信。如果您想查看，请点击这里:https://github.com/rxl/angular-flask