典型的 AngularJS 工作流程和项目结构(使用 Python Flask) [英] Typical AngularJS workflow and project structure (with Python Flask)

问题描述

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

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

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

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

minitwit|-- minitwit.py|-- 静态|-- css、js、图片等...`-- 模板|-- html 文件和基本布局

AngularJS 教程应用的结构如下:

angular-phonecat|-- 应用`--css`--img`--js`-- 库`-- 部分`--index.html|-- 脚本`-- node.js 服务器和测试服务器文件

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

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

解决方案

我将从按照以下标准结构组织 Flask 应用程序开始:

应用程序|-- 应用程序.py|-- 静态|-- css|-- 图片|-- js|-- 模板

正如 btford 所提到的，如果您正在开发 Angular 应用程序，您将需要专注于使用 Angular 客户端模板，而远离服务器端模板.使用 render_template('index.html') 将导致 Flask 将您的 angular 模板解释为 jinja 模板，因此它们将无法正确呈现.相反，您需要执行以下操作:

@app.route("/")定义索引():return send_file('templates/index.html')

请注意，使用 send_file() 意味着文件将被缓存，因此您可能希望改用 make_response()，至少在开发中:

 return make_response(open('templates/index.html').read())

之后，构建应用程序的 AngularJS 部分，修改应用程序结构，使其看起来像这样:

应用程序|-- 应用程序.py|-- 静态|-- css|-- 图片|-- js|-- app.js、controllers.js 等|-- 库|-- 角|-- angular.js 等|-- 部分|-- 模板|-- 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>

I am pretty new to this whole MV* client-side framework frenzy. It doesn't have to be AngularJS, but I picked it because it feels more natural to me than either Knockout, Ember or Backbone. Anyway what is the workflow like? Do people start with developing a client-side application in AngularJS and then hooking up the back-end to it?

Or the other way around by first building the back-end in Django, Flask, Rails and then attaching an AngularJS app to it? Is there a "right" way of doing it, or is it just a personal preference in the end?

I am also not sure whether to structure my project according to the Flask or AngularJS? community practices.

For example, Flask's minitwit app is structured like so:

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

AngularJS tutorial app is structured like this:

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

I could picture a Flask app by itself, and it's fairly easy to see AngularJS app like ToDo List by itself but when it comes to using both of these technologies I don't understand how they work together. It almost seems like I don't need a server-side web-framework when you already have AngularJS, a simple Python web server will suffice. In the AngularJS to-do app for example they use MongoLab to talk to the database using Restful API. There was no need having a web framework on the back-end.

Maybe I am just awfully confused, and AngularJS is nothing more than a fancy jQuery library so I should use just like I would use jQuery in my Flask projects (assuming I change the AngularJS template syntax to something that doesn't conflict with Jinja2). I hope my questions make some sense. I mainly work on the back-end and this client-side framework is an unknown territory for me.

解决方案

I would start out by organizing the Flask app in the standard structure as follows:

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

And as btford mentioned, if you are doing an Angular app, you'll want to focus on using Angular client-side templates and stay away from server-side templates. Using render_template('index.html') will cause Flask to interpret your angular templates as jinja templates, so they won't render correctly. Instead, you'll want to do the following:

@app.route("/")
def index():
    return send_file('templates/index.html')

Note that using send_file() means that the files will be cached, so you might want to use make_response() instead, at least for development:

    return make_response(open('templates/index.html').read())

Afterwards, build out the AngularJS part of your app, modifying the app structure so that it looks like this:

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
        |-- app.js, controllers.js, etc.
    |-- lib
        |-- angular
            |-- angular.js, etc.
    |-- partials
|-- templates
    |-- index.html

Make sure your index.html includes AngularJS, as well as any other files:

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

At this point, you haven't yet constructed your RESTful API, so you can have your js controllers return predefined sample data (only a temporary setup). When you're ready, implement the RESTful API and hook it up to your angular app with angular-resource.js.

EDIT: I put together an app template that, though a little more complex that what I've described above, illustrates how one could build an app with AngularJS + Flask, complete with communication between AngularJS and a simple Flask API. Here it is if you want to check it out: https://github.com/rxl/angular-flask

这篇关于典型的 AngularJS 工作流程和项目结构(使用 Python Flask)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！