关于javascript：典型的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应用程序的结构如下：

1
2
3
4
5
6

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

AngularJS教程应用程序的结构如下：

1
2
3
4
5
6
7
8
9
10

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

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

也许我只是非常困惑，AngularJS只不过是一个花哨的jQuery库，所以我应该使用就像我在我的Flask项目中使用jQuery(假设我将AngularJS模板语法更改为与Jinja2不冲突的东西)。我希望我的问题有道理。我主要在后端工作，这个客户端框架对我来说是一个未知的领域。

我将首先在标准结构中组织Flask应用程序，如下所示：

1
2
3
4
5
6
7

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

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

1
2
3

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13

确保您的index.html包含AngularJS以及任何其他文件：

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

此时，您尚未构建RESTful API，因此您可以让js控制器返回预定义的样本数据(仅限临时设置)。准备好后，实现RESTful API并使用angular-resource.js将其连接到角度应用程序。

编辑：我把一个应用程序模板放在一起，虽然比上面描述的要复杂得多，但它说明了如何使用AngularJS + Flask构建应用程序，完成AngularJS与简单的Flask API之间的通信。在这里，如果您想查看它：https：//github.com/rxl/angular-flask