典型的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)