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

我对整个MV *客户端框架狂热相当新。 它不一定是AngularJS,但我select它,因为它比Knockout,Ember或Backbone更自然。 无论如何,工作stream程是什么样的? 人们开始在AngularJS中开发一个客户端应用程序,然后把后端连接到它?

或者相反,首先在Django,Flask,Rails中构build后端,然后将AngularJS应用程序附加到它上面? 有没有一个“正确”的方法呢,还是只是个人喜好?

我也不确定是否根据Flask或AngularJS来构build我的项目? 社区实践。

例如,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不冲突)。 我希望我的问题有道理。 我主要工作在后端,这个客户端框架对我来说是一个未知的领域。

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

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

正如btford所提到的,如果你正在做一个Angular应用程序,你将需要关注使用Angular客户端模板并远离服务器端模板。 使用render_template('index.html')将导致Flask将angular模板解释为jinja模板,所以它们将不能正确渲染。 相反,你会想要做到以下几点:

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

请注意,使用send_file()意味着这些文件将被caching,所以您可能需要使用make_response(),至less对于开发来说:

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

之后,构build应用程序的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> 

在这一点上,你还没有构build你的RESTful API,所以你可以让你的js控制器返回预定义的示例数据(只是一个临时设置)。 准备就绪后,实现RESTful API并使用angular-resource.js将其连接到angular度应用程序。

编辑:我放在一起的应用程序模板,虽然稍微复杂一些,我已经在上面描述,说明如何可以build立一个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应用程序以及创buildRESTful API。 每种方法都有优点和缺点,所以它取决于你想要做什么。 如果你给我一些见解,我可能会提出进一步的build议。

John Lindquist官方的Jetbrains PyCharmvideo(angular.js和jetbrains guru)是一个不错的起点,因为它显示了webservice,database和angular.js在瓶子中的相互作用。

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

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

编辑 :新的Angular2风格指南build议类似,如果不是相同的结构更详细。

下面的答案是针对大型项目。 我花了相当长的时间思考和尝试了几种方法,所以我可以将一些服务器端框架(Flask和App Engine)结合起来,用于后端function以及像Angular这样的客户端框架。 两个答案都非常好,但是我想提出一个稍微不同的方法,至less在我看来,这个方法是以更人性化的方式来衡量的。

当你实施一个TODO的例子时,事情是非常简单的。 当你开始添加function,但用户体验改善的小细节,它不难迷失在风格混乱,JavaScript等。

我的应用程序开始变得相当大,所以我不得不退后一步,重新思考。 最初,上面提出的方法可以起作用,将所有的样式放在一起,将所有的JavaScript放在一起,但不是模块化的,不易维护。

如果我们按照每个function组织客户端代码而不是按照文件types进行组织:

 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 |-- ... 

等等。

如果我们像这样构build,我们可以将我们的每个目录都包装在一个angular度模块中。 而且我们已经将文件分割成一个很好的方式,当我们使用特定的function时,我们不需要经历不相关的代码。

像Grunt这样的任务运行者正确configuration,将能够find并连接和编译你的文件没有太多的麻烦。

另一个select是将两者完全分开。

项目
 |  - 服务器
 |  - 客户端

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

我已经写了一个使用Flask和AngularJS的教程。 你可能想看看 – http://tutsbucket.com/tutorials/building-a-blog-using-flask-and-angularjs-part-1/

我认为重要的是要确定在哪一方面要做大部分数据处理 – 前端或后端。
如果是前端,那么就跟angular度工作stream程一样,这意味着你的烧瓶应用程序将会像一个API那样起作用,在那里像烧瓶一样的延伸将会结束。

但是,如果像我一样,你在后端做了大部分的工作,那么就使用瓶子结构,只插入angular(或者在我的情况下vue.js)来构build前端(当需要的时候)