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)