227

我对整个 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 模板语法更改为与 Jinja2 不冲突的东西）。我希望我的问题有一些意义。我主要在后端工作，这个客户端框架对我来说是一个未知的领域。

4

6 回答 6

171

我将首先以标准结构组织 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 控制器返回预定义的示例数据（只是临时设置）。准备就绪后，实现 RESTful API 并使用 angular-resource.js 将其连接到您的 Angular 应用程序。

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

于 2013-02-28T20:23:33.423 回答
38

你可以从任一端开始。

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

如果你想使用 Flask 来提供你的文件（可能有点矫枉过正，但你仍然可以使用它），你可以将“angular-phonecat”中的“app”的内容复制到“minitwit”的“static”文件夹中。

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

于 2012-07-17T19:51:54.743 回答
22

这个由 John Lindquist（angular.js 和 jetbrains guru）制作的官方 Jetbrains PyCharm 视频是一个很好的起点，因为它展示了烧瓶中 web 服务、数据库和 angular.js 的相互作用。

他在不到 25 分钟的时间内使用 flask、sqlalchemy、flask-restless 和 angular.js构建了一个pinterest 克隆。

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

于 2014-02-06T17:56:37.250 回答
17

编辑：新的Angular2 风格指南更详细地建议了类似的，如果不是相同的结构。

下面的答案针对大型项目。我花了很多时间思考和试验几种方法，因此我可以将一些服务器端框架（在我的例子中是 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这样正确配置的任务运行器将能够毫不费力地查找、连接和编译您的文件。

于 2013-09-02T10:29:38.790 回答
1

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

项目
|-- 服务器
|-- 客户

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

于 2015-03-08T03:56:08.330 回答
0

I think it is important to determine at what end you want to do most of your data processing - front end or back end.
If it's front end, then go with the angular workflow, which means your flask app will function as more of an api where an extension like flask-restful will come end.

But if like me, you are doing most work on the backend, then go with the flask structure and only plug angular ( or in my case vue.js) to build the front end (when neccessary)

于 2017-09-07T23:18:01.270 回答