摘要: Flask有jinja模版,angularjs也有自己的模版系统,似乎这两家上个世纪结了什么怨,在一起的时候,常常出错。冤家宜解不宜结,文章提供了几种让他们合好的办法。觉得好不要忘记收藏啊。
摘要
举一个简单的应用例子, 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
-->
其他
使用pyjade+flask+angular时也会遇到类似的问题。可以使用方法2解决。
这3种方法算是感觉最好的了。Good luck.
参考资料
http://stackoverflow.com/questions/30362950/is-it-possible-to-use-angular-with-the-jinja2-template-engine
https://github.com/syrusakbary/pyjade
http://flask.pocoo.org/docs/0.10/templating/