Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
415 views
in Technique[技术] by (71.8m points)

javascript - 典型的AngularJS工作流程和项目结构(使用Python Flask)(Typical AngularJS workflow and project structure (with Python Flask))

I am pretty new to this whole MV* client-side framework frenzy.

(我对这整个MV *客户端框架狂热都很陌生。)

It doesn't have to be AngularJS, but I picked it because it feels more natural to me than either Knockout, Ember or Backbone.

(它不一定是AngularJS,但我之所以选择它,是因为它比Knockout,Ember或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?

(人们是否开始在AngularJS中开发客户端应用程序,然后将后端连接到它?)

Or the other way around by first building the back-end in Django, Flask, Rails and then attaching an AngularJS app to it?

(或者反过来首先在Django,Flask,Rails中构建后端,然后将AngularJS应用程序附加到它上面?)

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?

(我也不确定是否根据Flask或AngularJS构建我的项目?)

community practices.

(社区实践。)

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

(例如,Flask的minitwit应用程序的结构如下:)

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

AngularJS tutorial app is structured like this:

(AngularJS教程应用程序的结构如下:)

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.

(我可以自己想象一个Flask应用程序,并且很容易看到AngularJS应用程序就像ToDo List一样,但是当涉及到使用这两种技术时,我不明白它们是如何协同工作的。)

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.

(当你已经拥有AngularJS时,我似乎不需要服务器端的Web框架,一个简单的Python Web服务器就足够了。)

In the AngularJS to-do app for example they use MongoLab to talk to the database using Restful API.

(例如,在AngularJS待办事项应用程序中,他们使用MongoLab使用Restful API与数据库通信。)

There was no need having a web framework on the back-end.

(后端不需要Web框架。)

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

(也许我只是非常困惑,AngularJS只不过是一个花哨的jQuery库,所以我应该使用就像我在我的Flask项目中使用jQuery(假设我将AngularJS模板语法更改为与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.

(我主要在后端工作,这个客户端框架对我来说是一个未知的领域。)

  ask by Sahat Yalkabov translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

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

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.

(正如btford所提到的,如果您正在使用Angular应用程序,那么您将需要专注于使用Angular客户端模板并远离服务器端模板。)

Using render_template('index.html') will cause Flask to interpret your angular templates as jinja templates, so they won't render correctly.

(使用render_template('index.html')将导致Flask将角度模板解释为jinja模板,因此它们无法正确呈现。)

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:

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

    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:

(然后,构建应用程序的AngularJS部分,修改应用程序结构,使其看起来像这样:)

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:

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

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

(此时,您尚未构建RESTful API,因此您可以让js控制器返回预定义的样本数据(仅限临时设置)。)

When you're ready, implement the RESTful API and hook it up to your angular app with angular-resource.js.

(准备好后,实现RESTful API并使用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.

(编辑:我把一个应用程序模板放在一起,虽然比上面描述的要复杂得多,但它说明了如何使用AngularJS + Flask构建应用程序,完成AngularJS与简单的Flask API之间的通信。)

Here it is if you want to check it out: https://github.com/rxl/angular-flask

(在这里,如果您想查看它: https//github.com/rxl/angular-flask)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...