典型的AngularJS工作流程和项目结构（使用Python Flask） [英] Typical AngularJS workflow and project structure (with Python Flask)

问题描述

对于这个整个MV *客户端框架狂热，我很新奇。它不一定是AngularJS，但我选择它，因为它比Knockout，Ember或Backbone更自然。无论如何，工作流程是什么样的？人们开始在AngularJS中开发一个客户端应用程序，然后将其后端连接到它？

或者相反，通过首先构建后端在Django，Flask，Rails，然后附加一个AngularJS应用程序呢？有没有一个正确的方式做到这一点，或者它只是一个个人喜好到底？

我也不确定是否按照烧瓶还是AngularJS？例如，Flask的minitwit应用程序的结构如下所示：

  minitwit 
 |  -  minitwit.py 
 |  -  static 
 |  -  css，js，images等... 
` - 模板
 |  -  html文件和基础布局
  

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

pre $ $ $ $ $ $ $ $ $ $ b $ - b` - js
` - lib
` - partials
` - index.html
| - 脚本
` - node.js服务器和测试服务器文件

我可以自己绘制一个Flask应用程序，并且很容易看到AngularJS应用程序像待办事项列表本身，但是当涉及到使用这两种技术，我不明白他们如何一起工作。当你已经有AngularJS的时候，似乎我不需要一个服务器端的Web框架，一个简单的Python Web服务器就足够了。例如，在AngularJS待办事宜应用程序中，他们使用MongoLab与使用Restful API的数据库对话。没有必要在后端有一个Web框架。

也许我只是非常困惑，AngularJS只不过是一个奇特的jQuery库，所以我应该使用就像我将我的Flask项目中使用jQuery（假设我将AngularJS模板语法更改为与Jinja2不冲突）。我希望我的问题有道理。我主要工作在后端，这个客户端框架对我来说是一个未知领域。 通过在标准结构中组织Flask应用程序，如下所示：

  app 
 |  -  app.py 
 |  -  static 
 |  -  css 
 |  -  img 
 |  -  js 
 |  - 模板
  

正如btford提到的那样，如果你正在做一个Angular应用程序，那么你需要专注于使用Angular客户端模板，远离服务器端模板。使用render_template（'index.html'）将导致Flask将角模板解释为jinja模板，所以它们将不能正确渲染。相反，您将需要执行以下操作：

  @ app.route（/）
 def index （）：
 return send_file（'templates / index.html'）
  

请注意，使用send_file（）意味着这些文件将被缓存，所以你可能要使用make_response（）来代替，至少在开发中：

pre code > return make_response（open（'templates / index.html'）。read（））

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

  app 
 | -  app.py 
 |  -  static 
 |  -  css 
 |  -  img 
 |  -  js 
 |  -  app.js，controllers。 js等
 |  -  lib 
 |  -  angular 
 |  -  angular.js等
 |  -  partials 
 |  - 模板
 |  -  index.html 
  

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

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

此时，您还没有构建您的RESTful API，因此您可以让您的js控制器返回预定义的示例数据（只是临时设置）。当你准备好的时候，实现RESTful API，并用angular-resource.js把它连接到你的角度应用程序。编辑：我把一个应用程序模板放在一起，尽管上面描述的更复杂一点，说明了如何使用AngularJS + Flask构建应用程序，并通过AngularJS和简单的Flask API进行通信。在这里，如果你想检查一下： https://github.com/rxl/angular-flask

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.

解决方案

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

这篇关于典型的AngularJS工作流程和项目结构（使用Python Flask）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！