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

我对这个整个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一样使用jQuery(假设我将AngularJS模板语法更改为与Jinja2不冲突)。 我希望我的问题有一定道理。 我主要工作在后端,这个客户端框架对我来说是一个未知的领域。


我将首先在标准结构中组织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


你可以从任何一端开始。

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

如果你想使用Flask来为你的文件提供服务(可能是矫枉过正,但你仍然可以使用它),你可以将“app”的内容从“angular-phonecat”复制到“minitwit”的“静态”文件夹中。

AngularJS更倾向于类似AJAX的应用程序,而烧瓶则使您能够同时执行旧式Web应用程序和创建RESTful API。 每种方法都有优点和缺点,因此它取决于你想要做什么。 如果你给我一些见解,我可能会提出进一步的建议。


John Lindquist官方的Jetbrains PyCharm视频(angular.js和jetbrains guru)是一个不错的起点,因为它显示了Web服务,数据库和angular.js在瓶中的相互作用。

他在不到25分钟的时间内用烧瓶,sqlalchemy,烧瓶不安和angular.js构建了一个最有趣的克隆

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

链接地址: http://www.djcxy.com/p/22749.html

上一篇: Typical AngularJS workflow and project structure (with Python Flask)

下一篇: which is better for production with web2py?