典型的AngularJS工作流程和项目结构（使用Python Flask）

javascript angularjs python flask

2022-08-30 00:55:07

我对整个 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应用程序本身，并且很容易看到AngularJS应用程序，例如ToDo List本身，但是当涉及到使用这两种技术时，我不明白它们是如何协同工作的。当你已经拥有AngularJS时，我似乎不需要服务器端的Web框架，一个简单的Python Web服务器就足够了。例如，在AngularJS待办应用程序中，他们使用MongoLab通过Restful API与数据库进行通信。没有必要在后端有一个Web框架。

也许我只是非常困惑，AngularJS只不过是一个花哨的jQuery库，所以我应该使用，就像我在我的Flask项目中使用jQuery一样（假设我将AngularJS模板语法更改为与Jinja2不冲突的东西）。我希望我的问题有一定的道理。我主要在后端工作，这个客户端框架对我来说是一个未知的领域。

答案 1

首先，我以标准结构组织 Flask 应用，如下所示：

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

正如btford所提到的，如果你正在做一个Angular应用程序，你会想要专注于使用Angular客户端模板，远离服务器端模板。使用render_template（'index.html'）将导致 Flask 将您的角度模板解释为 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

确保您的索引.html包含 AngularJS 以及任何其他文件：

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

此时，您尚未构建 RESTful API，因此您可以让 js 控制器返回预定义的示例数据（只是临时设置）。准备就绪后，实现 RESTful API，并使用 angular 资源.js将其连接到您的 angular 应用。

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

答案 2

您可以从任何一端开始。

你是对的，你可能不需要一个完整的服务器端框架和AngularJS。通常，最好提供静态 HTML/CSS/JavaScript 文件，并为后端提供一个 RESTful API 供客户端使用。您应该避免的一件事是将服务器端模板与AngularJS客户端模板混合在一起。

如果你想使用Flask来提供你的文件（可能有些大材小用，但你仍然可以使用它），你可以将“app”的内容从“angular-phonecat”复制到“minitwit”的“静态”文件夹中。

AngularJS更针对类似AJAX的应用程序，而flask使您能够执行旧式Web应用程序以及创建RESTful API。每种方法都有优点和缺点，所以这真的取决于你想做什么。如果你给我一些见解，我也许可以提出进一步的建议。