请问如何处理tornado模板和angular.js的 {{ }} 表达式冲突问题？-Python教程-PHP中文网

请问如何处理tornado模板和angular.js的 {{ }} 表达式冲突问题？

php中文网

发布： 2016-06-06 16:24:22

原创

1572人浏览过

回复内容：

Angular 从1.0开始就支持用$interpolateProvider自定义分隔符 http://docs.angularjs.org/api/ng.%24interpolateProvider

因为Angular原生支持自定义分隔符, 而一些后端的模板语言不支持自定义分隔符，个人倾向于在Angular端自定义分隔符。虽然有各种hack可以让前后端都用{{ }} 做分隔符，但这会让前后端的代码更难辨别，不好维护，所以不推荐在后端模板和混用相同的分隔符。

<code class="html"><span class="cp"><!doctype html></span>
<span class="nt"><html</span> <span class="na">ng-app=</span><span class="s">"customInterpolationApp"</span><span class="nt">></span>
  <span class="nt"><head></span>
    <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://code.angularjs.org/1.2.0rc1/angular.min.js"</span><span class="nt">></script></span>
    <span class="nt"><script </span><span class="na">src=</span><span class="s">"script.js"</span><span class="nt">></script></span>
  <span class="nt"></head></span>
  <span class="nt"><body></span>
    <span class="nt"><div</span> <span class="na">ng-app=</span><span class="s">"App"</span> <span class="na">ng-controller=</span><span class="s">"DemoController as demo"</span><span class="nt">></span>
        //demo.label//
    <span class="nt"></div></span>
  <span class="nt"></body></span>
<span class="nt"></html></span>
</code>登录后复制

angularjs的模板全部保存为独立的html文件，由nginx直接去获取？

如果说，需要通过tornado去动态生成angularjs的模板，那么是否可以考虑重构代码去避免这种情况发生？

还有一种规避方案是用ng-bind 替代两个花括号，比如：

<code class="html"><span class="nt"><p></span>{{name}}<span class="nt"></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/846">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680127061241.png" alt="Onlook">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/846">Onlook</a>
                            <p>专为前端设计师和开发者打造的视觉编辑工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Onlook">
                                <span>108</span>
                            </div>
                        </div>
                        <a href="/ai/846" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Onlook">
                        </a>
                    </div>
                </span>
</code>登录后复制

我们的解决方法是修改tornado的模板引擎，加入了一个plain关键字。通过像
<code class="text">{% plain 'some_angular_template.html' %}
</code>登录后复制

{{! name }}

前后端分离，不使用任何后端模板，不管是tornado的模板还是jinja2/mako， 统统干掉。前后端通过api返回json数据进行通信。

angular是为富客户端而生的产物，个人倾向于把tornado变成一个restful服务器。所以前端工程应该是放在apache下更佳，不应该与tornado放到一起。

随着TSA的流行，应用服务器逐渐走向轻量化。如果仅仅作为WEB工程，个人不建议重度使用angular。应该考虑SEO的优化，走freemaker的路线。

直接去改tornado模板渲染部分源代码 就几行代码 改成另外一个你自己想要的的标记 比如“{@ @}”