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


226

对于整个MV *客户端框架的狂热,我还是一个新手。它不一定是AngularJS,但我选择它是因为它对我来说比淘汰赛,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模板语法更改为与Jinja2不冲突的语法)。我希望我的问题有道理。我主要在后端工作,这个客户端框架对我来说是未知领域。

Answers:


171

首先,我将以标准结构组织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将其连接到您的angular应用程序。

编辑:我整理了一个应用程序模板,尽管比我上面描述的要复杂一些,但它说明了如何使用AngularJS + Flask构建应用程序,并完成了AngularJS和简单的Flask API之间的通信。如果您想签出,这里是这里:https : //github.com/rxl/angular-flask


1
我遇到了这个问题:当我尝试静态提供index.html时,未保留文件的上下文。我通过在静态文件前添加来解决此问题app.root_path。否则,这是一个不错的选择。
Makoto 2013年

您是否可以进一步解释“请注意,使用send_file()意味着将对文件进行缓存,因此,至少在开发过程中,可能要使用make_response()”?谢谢
nam

您如何管理构建,例如通过这种方法使用grunt?
2014年

1
@nam,我想他的意思是,如果您在调试时对js等进行细微更改,您将不会在浏览器中看到效果,因为send_file缓存的文件超时时间为SEND_FILE_MAX_AGE_DEFAULT。有很多方法可以覆盖它,但是使用make_response直到准备好进行部署要简单得多。
ars-longa-vita-brevis

@SaadFarooq在这里我不会讲咕unt声,因为它会使事情变得很复杂。如果您准备使用Grunt之类的东西,那么有一个单独的前端代码存储库,然后将所有内容捆绑在一起,将其复制粘贴到Flask存储库中,或者将其推送到CDN,然后进行引用,就很有意义了。来自index.html。
Ryan

38

您可以从任一端开始。

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

如果您想使用Flask来提供文件(可能有些过头,但仍然可以使用它),则可以将“ app”的内容从“ angular-phonecat”复制到“ minitwit”的“ static”文件夹中。

AngularJS的目标是类似AJAX的应用程序,而flask使您能够执行旧式Web应用程序以及创建RESTful API。每种方法都有优点和缺点,因此它实际上取决于您要执行的操作。如果您给我一些见解,我也许可以提出更多建议。


26
+1-但我不会说Flask是针对较旧风格的Web应用程序的-它也提供了将其用作Web API后端所需的所有帮助程序;-) 如果您愿意的话,还有Flask-Restless能够使用Flask-SQLAlchemy轻松轻松地为您的Web应用程序生成JSON服务API- 仅供参考:-)
Sean Vieira

好点子!我对Flask不太熟悉;感谢您提供有关该主题的一些专业知识。
btford

3
还可以查看我们的教程,该教程显示了如何使用angular和我们提供的所有工具来构建crud应用程序:docs.angularjs.org/tutorial
Igor Minar

2
对我来说,将“ app”文件夹从“ angular-phonecat”放到静态文件夹似乎很公平。但是我认为index.html文件应该放在minitwit模板文件夹中。css和img文件夹应移至“静态”。
Nezo

22

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

他在不到25分钟的时间内使用flask,sqlalchemy,flask-restless和angular.js 构建了一个pinterest克隆

欣赏:http//www.youtube.com/watch?v = 2geC50roans


17

编辑:新的Angular2样式指南更详细地建议了一个相似的结构,即使不是相同的结构。

下面的答案针对大型项目。我花了很多时间思考和尝试几种方法,因此我可以将一些用于后端功能的服务器端框架(在我的情况下为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
        |-- ...

等等。

如果我们这样构建它,我们可以将我们的每个目录都包装在angular模块中。而且我们以一种很好的方式拆分了文件,当我们使用特定功能时,我们不必经过不相关的代码。

正确配置了诸如Grunt的任务运行程序,将能够轻松找到并连接和编译文件。


1

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

项目
|-服务器
|-客户

与flask相关的文件位于服务器文件夹下,而与angularjs相关的文件位于客户端文件夹下。这样,将更容易更改后端或前端。例如,将来您可能希望从Flask切换到Django或从AngularJS切换到ReactJS。


凯文:您可能想查看指向Facebook登录页面的链接。
RussellB

0

我认为确定大部分数据处理的目标是前端还是后端很重要。
如果是前端,则使用有角度的工作流程,这意味着您的flask应用程序将更多地充当api的角色,在该api中,如flask-restful的扩展将结束。

但是,如果像我一样,您需要在后端完成大部分工作,然后使用flask结构,仅插入有角度的插件(或在我的情况下为vue.js)来构建前端(必要时)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.