Flask, Angularjs共存之道

最新推荐文章于 2024-05-31 09:59:47 发布

Mathilda91

最新推荐文章于 2024-05-31 09:59:47 发布

阅读量97

点赞数

文章标签： python javascript 开发工具 ViewUI

原文链接：https://my.oschina.net/goskyblue/blog/532705

版权

2019独角兽企业重金招聘Python工程师标准>>>

摘要

举一个简单的应用例子, oschina上有

python文件app.py

from flask import Flask, render_template


app = Flask(__name__)

@app.route('/')
def homepage():
    return render_template('homepage.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

建立一个templates目录，以及创建文件homepage.html

<!DOCTYPE html>
<html ng-app="demo">
  <body ng-controller='MainCtrl'>
        <h1 class="title">{{name}}</h1>
        <script src="//cdn.bootcss.com/angular.js/1.4.7/angular.min.js"></script>
        <script>
          angular.module('demo', [])
            .controller('MainCtrl', function($scope){
              $scope.name = "World";
            });
        </script>
  </body>
</html>
<!-- vim: sw=2 sts=2 ts=2 et
-->

这个已经是一个最简单的flask+angular的例子了。使用python app.py 打开浏览器访问 http://localhost:5000

发现了什么，你会看到什么都没有。这是因为{{name}}先被flask的jinja解析了，然后angular什么也没有拿到。

有很多种方法可以解决。

方法1

使用jinja的raw, 使用raw之后，里面的就不会被jinja意外解析了

{%raw%}
<h1 class="title">{{name}}</h1>
{%endraw%}

方法2

修改jinja的配置

app = Flask(__name__)
app.jinja_env.variable_start_string = '%%'
app.jinja_env.variable_end_string = '%%'

方法3

修改angular

<!DOCTYPE html>
<html ng-app="demo">
  <body ng-controller='MainCtrl'>
        <h1 class="title">{[name]}</h1>
        <script src="//cdn.bootcss.com/angular.js/1.4.7/angular.min.js"></script>
        <script>
          angular.module('demo', [])
            .config(['$interpolateProvider', function($interpolateProvider) {
              $interpolateProvider.startSymbol('{[');
              $interpolateProvider.endSymbol(']}');
            }])
            .controller('MainCtrl', function($scope){
              $scope.name = "World";
            });
        </script>
  </body>
</html>
<!-- vim: sw=2 sts=2 ts=2 et
-->