我对这整个MV*客户端框架的狂热还很陌生.它不一定非得是AngularJS,但我选择它是因为它比淘汰赛、灰烬赛或主干赛更自然.不管怎样,工作流程是什么样的?人们是否从使用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 to-do应用程序中,他们使用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 模板解释为JJJA模板,因此它们不会正确渲染.相反,您需要执行以下操作:

@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将其连接到angular应用程序.js.

编辑:我整理了一个应用程序模板,虽然比我上面描述的稍微复杂一些,但它说明了如何使用AngularJS+Flask构建应用程序,并完成了AngularJS和一个简单的Flask API之间的通信.如果您想结账的话,这就是:https://github.com/rxl/angular-flask英镑.

Javascript相关问答推荐

gatsby :getImage 返回未定义

在另一个方法的内部函数中调用 this.method()

不适用于 React 的 JSX 条件

在包装函数中添加日志(log)

我们如何使用 Nodejs 从 web3 获取数据

如何将下拉菜单与按钮对齐

为什么我的 React.useEffect() 中有太多的重新渲染?

我在使用 Route 时收到空白的 react-app 页面

使用谷歌脚本时,币安搜索 API 返回 403

当我在 rxjs 的管道中遇到错误时如何执行“取消订阅”?

如何使用 JavaScript 对从 JSON 数据生成的 HTML Div 使用搜索/过滤器?

使用 jquery-confirm 确认框停止回发,似乎无法获得返回值(webform 项目)

输入数字必须是 6 位数字或 9 位数字

Minimax算法在国际象棋中不适合队友

在查询中遇到子选择,但store 没有对象引用.有Angular 的

如何有条件地在 useEffect 中获取

Form.IO - 如何使 DataGrid 中的下拉选择变得可见

如何按照一定的规则设置数组的元素

我该如何解决这个错误:FirebaseError: Expected type 'mc', but it was: a custom yc object?

正则表达式(Regex)不适用于坐标javascript的所有样本