文档章节

Flask, Angularjs共存之道

go-skyblue
 go-skyblue
发布于 2015/11/19 13:52
字数 409
阅读 1586
收藏 6

摘要

举一个简单的应用例子, 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.

参考资料

© 著作权归作者所有

go-skyblue

go-skyblue

粉丝 89
博文 50
码字总数 31921
作品 5
杭州
程序员
私信 提问
解决jinja2和angular的花括号{{}}冲突的方法。

一共3个方法, A、http://flask-triangle.readthedocs.org/en/develop/tutorial/part1.html 上代码 app.py from flask import Flask, render_templatefrom flask.ext.triangle import Triang......

Klaus88
2015/02/17
4.8K
1
使用Angular cli升级AngularJS项目——(一)引导Angular混合应用

前言 都9102年了,笔者所在的公司的主要项目还是用AngularJS 1.6这种史诗的框架进行开发的。另外由于历史的原因,代码的凌乱程度早已超越想象。为此,笔者决定痛下决心把整个项目重构了一遍....

益生菌。
02/14
0
0
实践总结 - 不可错过的Angular应用技巧

angular的核心思想是通过数据驱动一切,其他东西都是数据的延伸. 套用Javascript一切皆对象的思想,在angular中可以说一切皆数据. 关于项目构建 (1) requirejs以及Yeoman 在刚开始接触或者使用...

顽Shi
2014/07/21
35.9K
22
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
190
0

没有更多内容

加载失败,请刷新页面

加载更多

开发中常用的正则表达式

为了能够更好地理解如何在C#环境中使用正则表达式,这里整理了一些常用的正则表达式: 罗马数字: string p1 = "^m*(d?c{0,3}|c[dm])" + "(l?x{0,3}|x[lc])(v?i{0,3}|i[vx])$"; string t1 =......

木庄
8分钟前
1
0
【.NET程序打包】VS2019使用Installer Projects打包

C#—使用Installer Projects打包桌面应用程序 前言 打包桌面应用程序实在是一个不常使用的东西,偶尔使用起来经常会忘东忘西的耽误时间,因此,这篇文章多以图片记录过程,也是用于备忘。 下...

_Somuns
12分钟前
2
0
自定义注解,使用动态代理解决网站的字符集编码问题

第1章设置环境 安装操作系统,安装备份(镜像): JDK: 设置环境变量Eclipse:解压即可 Eclipse自身解压目录不包括中文 代码工作空间目录不包括中文Tomcat:解压不要包含中文目录M...

蓝来杯往
17分钟前
2
0
Solr中的字段类型field type

Solr含有多种字段类型,可用的字段类型基本都定义在了包org.apache.solr.schema中,列举如下: 类 说明 BinaryField 二进制数据 BoolField 布尔值,其中’t’/’T’/’1’都是true Collatio...

gantaos
31分钟前
3
0
《JAVA核心知识》学习笔记 (21. JAVA 算法)

21. JAVA 算法

Shingfi
38分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部