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

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

Answer 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

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

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

此时，您尚未构建RESTful API，因此您可以让js控制器返回预定义的样本数据（仅限临时设置）。准备好后，实现RESTful API并使用angular-resource.js将其连接到角度应用程序。

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

Answer 2

你可以从两端开始。

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

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

AngularJS更多地针对类似AJAX的应用程序，而flask使您能够同时执行旧式Web应用程序以及创建RESTful API。每种方法都有优点和缺点，因此它实际上取决于您想要做什么。如果你给我一些见解，我可能会提出进一步的建议。

Answer 3

John Lindquist（angular.js和jetbrains大师）的官方Jetbrains PyCharm视频是一个很好的起点，因为它显示了web服务，数据库和angular.js在瓶内的相互作用。

他在不到25分钟的时间内用烧瓶，sqlalchemy，烧瓶 - 不安和angular.js构建了一个 pinterest clone 。

享受： http://www.youtube.com/watch?v=2geC50roans

Answer 4

修改：新Angular2 style guide更详细地建议了一个类似的（如果不是相同的）结构。

以下答案针对大型项目。我花了很多时间思考和试验几种方法，因此我可以将一些服务器端框架（Flask与我的案例中的App Engine）结合起来，用于后端功能以及像Angular这样的客户端框架。这两个答案都非常好，但我想建议一种稍微不同的方法（至少在我看来）以更人性化的方式进行扩展。

当您实施TODO示例时，事情非常简单。当你开始添加功能和用于改善用户体验的小巧细节时，在混乱的风格，javascript等中不容易迷失。

我的应用程序开始变得非常大，所以我不得不退后一步并重新思考。最初，通过将所有样式放在一起并将所有JavaScript放在一起，可以使用上面提到的方法，但它不是模块化的，不易维护。

如果我们按功能组织客户端代码而不是每种文件类型，那该怎么办：

app
|-- server
    |-- controllers
        |-- app.py
    |-- models
        |-- model.py
    |-- templates
        |-- index.html
|-- static
    |-- img
    |-- client
        |-- app.js
        |-- main_style.css
        |-- foo_feature
            |-- controller.js
            |-- directive.js
            |-- service.js
            |-- style.css
            |-- html_file.tpl.html
        |-- bar_feature
            |-- controller.js
            |-- directive.js
            |-- service.js
            |-- style.css
            |-- html_file.tpl.html
    |-- lib
        |-- jquery.js
        |-- angular.js
        |-- ...

等等。

如果我们像这样构建它，我们可以将我们的每个目录包装在一个角度模块中。我们以一种很好的方式拆分文件，当我们使用特定功能时，我们不必通过不相关的代码。

正确配置Grunt之类的任务运行器，将能够轻松找到并连接和编译您的文件。

Answer 5

另一种选择是将两者完全分开。

project
|-- server
|-- client

与flask相关的文件位于服务器文件夹下，与angularjs相关的文件位于客户端文件夹下。这样，更改后端或前端将更容易。例如，您可能希望将来从Flask切换到Django或AngularJS到ReactJS。

Answer 6

我认为确定您希望在哪一端完成大部分数据处理（前端或后端）非常重要。
如果它是前端，那么请使用角度工作流程，这意味着你的烧瓶应用程序将起到更多的api的作用，其中像burn-restful这样的扩展将会结束。

但是，如果像我一样，你在后端做大部分工作，那么选择烧瓶结构，只插上角度（或者在我的情况下为vue.js）来构建前端（当需要时）

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

6 个答案: