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

Question

我对这整个MV*客户端框架狂热都很陌生.它不一定是AngularJS,但我之所以选择它,是因为它比Knockout,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应用程序,并且很容易看到AngularJS应用程序就像ToDo List一样,但是当涉及到使用这两种技术时,我不明白它们是如何协同工作的.当你已经拥有AngularJS时,我几乎不需要服务器端的Web框架,一个简单的Python Web服务器就足够了.例如,在AngularJS待办事项应用程序中,他们使用MongoLab使用Restful API与数据库通信.后端不需要Web框架.

也许我只是非常困惑,而AngularJS只不过是一个花哨的jQuery库,所以我应该像我在Flask项目中使用jQuery一样(假设我将AngularJS模板语法更改为与Jinja2不冲突的东西).我希望我的问题有道理.我主要在后端工作,这个客户端框架对我来说是一个未知的领域.

Answer 1

我将首先在标准结构中组织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将其连接到角度应用程序.

编辑:我把一个应用程序模板放在一起,虽然比上面描述的要复杂得多,但它说明了如何使用AngularJS + Flask构建应用程序,完成AngularJS与简单的Flask API之间的通信.在这里,如果您想查看它:https://github.com/rxl/angular-flask

Answer 2

你可以从两端开始.

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

如果你想使用Flask来提供文件(可能有些过分,但你可以使用它),你可以将"app"的内容从"angular-phonecat"复制到"minitwit"的"静态"文件夹中.

AngularJS更多地针对类似AJAX的应用程序,而flask使您能够同时执行旧式Web应用程序以及创建RESTful API.每种方法都有优点和缺点,因此它实际上取决于您想要做什么.如果你给我一些见解,我可能会提出进一步的建议.

Answer 3

John Lindquist(angular.js和jetbrains guru)的官方Jetbrains PyCharm视频是一个不错的起点,因为它显示了web服务,数据库和angular.js在瓶内的相互作用.

他在不到25分钟的时间内用烧瓶,sqlalchemy,烧瓶 - 不安和angular.js 建立了一个pinperrest克隆.

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

Answer 4

编辑:新的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
        |-- ...

等等.

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

像Grunt一样正确配置的任务运行器,将能够轻松找到并连接和编译您的文件.