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

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

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

I am pretty new to this whole MV* client-side framework frenzy. It doesn’t have to be AngularJS, but I picked it because it feels more natural to me than either Knockout, Ember or Backbone. Anyway what is the workflow like? Do people start with developing a client-side application in AngularJS and then hooking up the back-end to it?

Or the other way around by first building the back-end in Django, Flask, Rails and then attaching an AngularJS app to it? Is there a “right” way of doing it, or is it just a personal preference in the end?

I am also not sure whether to structure my project according to the Flask or AngularJS? community practices.

For example, Flask’s minitwit app is structured like so:

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

AngularJS tutorial app is structured like this:

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

I could picture a Flask app by itself, and it’s fairly easy to see AngularJS app like ToDo List by itself but when it comes to using both of these technologies I don’t understand how they work together. It almost seems like I don’t need a server-side web-framework when you already have AngularJS, a simple Python web server will suffice. In the AngularJS to-do app for example they use MongoLab to talk to the database using Restful API. There was no need having a web framework on the back-end.

Maybe I am just awfully confused, and AngularJS is nothing more than a fancy jQuery library so I should use just like I would use jQuery in my Flask projects (assuming I change the AngularJS template syntax to something that doesn’t conflict with Jinja2). I hope my questions make some sense. I mainly work on the back-end and this client-side framework is an unknown territory for me.


回答 0

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

I would start out by organizing the Flask app in the standard structure as follows:

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

And as btford mentioned, if you are doing an Angular app, you’ll want to focus on using Angular client-side templates and stay away from server-side templates. Using render_template(‘index.html’) will cause Flask to interpret your angular templates as jinja templates, so they won’t render correctly. Instead, you’ll want to do the following:

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

Note that using send_file() means that the files will be cached, so you might want to use make_response() instead, at least for development:

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

Afterwards, build out the AngularJS part of your app, modifying the app structure so that it looks like this:

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
        |-- app.js, controllers.js, etc.
    |-- lib
        |-- angular
            |-- angular.js, etc.
    |-- partials
|-- templates
    |-- index.html

Make sure your index.html includes AngularJS, as well as any other files:

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

At this point, you haven’t yet constructed your RESTful API, so you can have your js controllers return predefined sample data (only a temporary setup). When you’re ready, implement the RESTful API and hook it up to your angular app with angular-resource.js.

EDIT: I put together an app template that, though a little more complex that what I’ve described above, illustrates how one could build an app with AngularJS + Flask, complete with communication between AngularJS and a simple Flask API. Here it is if you want to check it out: https://github.com/rxl/angular-flask


回答 1

您可以从任一端开始。

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

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

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

You can start on either end.

You are right that you probably don’t need a full server-side framework with AngularJS. It’s typically better to serve static HTML/CSS/JavaScript files, and provide a RESTful API for the back end for the client to consume. One thing that you should probably avoid is mixing server-side templates with AngularJS client-side templates.

If you want to use Flask to serve your files (might be overkill, but you can use it nonetheless) you would copy the contents of “app” from “angular-phonecat” into the “static” folder of “minitwit.”

AngularJS is more targeted at AJAX-like applications, whereas flask gives you the ability to do both the older-style web apps as well as create RESTful APIs. There are advantages and disadvantages to each approach, so it really depends what you want to do. If you give me some insights, I might be able to make further recommendations.


回答 2

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

This official Jetbrains PyCharm video by John Lindquist (angular.js and jetbrains guru) is a nice starting point as it shows the interplay of webservice, database and angular.js within flask.

He builds a pinterest clone with flask, sqlalchemy, flask-restless and angular.js in less than 25 minutes.

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


回答 3

编辑:新的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的任务运行程序,将能够轻松找到并连接和编译文件。

edit: The new Angular2 style guide suggests a similar, if not the same structure in much more detail.

The answer below target large scale projects. I have spend quite some time thinking and experimenting with several approaches so I can combine some server side framework (Flask with App Engine in my case) for back-end functionality along with a client side framework like Angular. Both answers are very good, but I would like to suggest a slightly different approach which (in my mind at least) scales in a more human way.

When you are implementing a TODO example, things are quite straight forward. When you start adding functionality though and small nice details for user experience improvement, its not difficult to get lost in chaos of styles, javascript etc..

My application started to grow quite big, so I had to take a step back and rethink. Initially an approach like suggested above would work, by having all the styles together and all JavaScript together, but its not modular and not easily maintainable.

What if we organized the client code per feature and not per file type:

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

and so on.

If we build it like this, we can wrap every directory of ours in an angular module. And we have split our files in a nice way that we don’t have to go through irrelevant code when we are working with a specific feature.

A task runner like Grunt properly configured, will be able to find and concatenate and compile your files without much hassle.


回答 4

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

项目
|-服务器
|-客户

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

Another option is to completely separate the two.

project
|-- server
|-- client

Files related to flask goes under the server folder and files related to angularjs goes under the client folder. This way, it will be easier to change the backend or front-end. For example, you might want to switch from Flask to Django or AngularJS to ReactJS in the future.


回答 5

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

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

I think it is important to determine at what end you want to do most of your data processing – front end or back end.
If it’s front end, then go with the angular workflow, which means your flask app will function as more of an api where an extension like flask-restful will come end.

But if like me, you are doing most work on the backend, then go with the flask structure and only plug angular ( or in my case vue.js) to build the front end (when neccessary)