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

Posted

技术标签:

【中文标题】典型的 AngularJS 工作流程和项目结构（使用 Python Flask）【英文标题】：Typical AngularJS workflow and project structure (with Python Flask) 【发布时间】：2012-07-16 08:29:38 【问题描述】：

我对整个 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）。我希望我的问题有一些意义。我主要在后端工作，这个客户端框架对我来说是一个未知的领域。

【问题讨论】：

【参考方案1】：

你可以从任一端开始。

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

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

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

【讨论】：

+1 - 但我不会说 Flask 是针对旧式 Web 应用程序的 - 它提供了您 需要 将其用作 Web API 后端的所有帮助程序还有 ;-) 如果您希望能够使用 Flask-SQLAlchemy 为您的 Web 应用程序生成 JSON 服务 API，那么还有 Flask-Restless - 仅供参考 :-) 好点！我对 Flask 不是特别熟悉；感谢您提供有关该主题的一些专业知识。 还可以查看我们的教程，该教程展示了如何使用 Angular 和我们提供的所有工具构建 crud 应用程序：docs.angularjs.org/tutorial 对我来说，将“app”文件夹从“angular-phonecat”放到静态文件夹似乎是公平的。但我认为 index.html 文件应该放在 minitwit 模板文件夹中。 css 和 img 文件夹应移至“静态”。【参考方案2】：

我将首先按照以下标准结构组织 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

【讨论】：

我遇到了这个问题：当我尝试静态提供 index.html 时，文件的上下文没有被保留。我通过在我的静态文件前面加上app.root_path 来解决这个问题。否则，这很合适。 你能解释更多关于“注意使用 send_file() 意味着文件将被缓存，所以你可能想要使用 make_response() 代替，至少在开发中”？谢谢 你如何管理构建，例如使用 grunt 这种方法？ @nam，我认为他的意思是，如果您在调试时对 js 等进行小的更改，您将不会在浏览器中看到效果，因为 send_file 缓存了使用超时 = SEND_FILE_MAX_AGE_DEFAULT。有一些方法可以覆盖它，但在准备好部署之前只使用 make_response 会简单得多。 @SaadFarooq 我在这里不介绍 grunt，因为它使事情变得相当复杂。如果你准备好使用像 Grunt 这样的东西，那么有一个单独的前端代码仓库是有意义的，然后将所有内容捆绑在一起，将其复制粘贴到 Flask 仓库或将其推送到 CDN，然后引用它来自 index.html。【参考方案3】：

编辑：新的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 这样正确配置的任务运行器将能够轻松查找、连接和编译您的文件。

【讨论】：

【参考方案4】：

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

【讨论】：

【参考方案5】：

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

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

flask 相关的文件放在 server 文件夹下，angularjs 相关的文件放在 client 文件夹下。这样，更改后端或前端会更容易。例如，您可能希望将来从 Flask 切换到 Django 或从 AngularJS 切换到 ReactJS。

【讨论】：

Kevin：你可能想查看链接，因为它指向 facebook 登录页面。【参考方案6】：

我认为重要的是确定您希望在哪一端进行大部分数据处理 - 前端或后端。 如果是前端，则使用 Angular 工作流程，这意味着您的烧瓶应用程序将更像是一个 api，其中像 flask-restful 这样的扩展将结束。

但是如果你像我一样，在后端做大部分工作，那么使用烧瓶结构，只插入 angular（或者在我的情况下是 vue.js）来构建前端（必要时）

【讨论】：

以上是关于典型的 AngularJS 工作流程和项目结构（使用 Python Flask）的主要内容，如果未能解决你的问题，请参考以下文章

什么是AngularJS及优点总结

无法使AngularJS路由工作

angularJs项目实战！01：模块划分和目录组织

AngularJS $resource 在 Web Api 中搜索项目的工作示例

在Angular 2+项目中使用AngularJS Material组件

方法可以复制 AngularJS资源集合