开发者社区> 问答> 正文

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

对于整个MV *客户端框架的狂热,我还是一个新手。它不一定是AngularJS,但我选择它是因为它对我来说比淘汰赛,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应用程序,并且很容易看到像ToDo List这样的AngularJS应用程序,但是当同时使用这两种技术时,我不知道它们是如何协同工作的。当您已经拥有AngularJS时,似乎几乎不需要服务器端Web框架,一个简单的Python Web服务器就足够了。例如,在AngularJS待办应用程序中,他们使用MongoLab通过Restful API与数据库对话。无需在后端使用Web框架。

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

展开
收起
祖安文状元 2020-02-22 18:27:24 1333 0
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将其连接到您的angular应用程序。

    2020-02-22 18:27:43
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
From Python Scikit-Learn to Sc 立即下载
Data Pre-Processing in Python: 立即下载
双剑合璧-Python和大数据计算平台的结合 立即下载