2015-07-20 82 views
1

我使用express服务器和角度客户端。我使用玉来编写快速模板,代码非常干净。Angular模板使用非HTML语言

例如,在index.jade

html 
    head 
    title!= title 
    body 
    h1!= message 

然后我就可以编译玉文件转换成HTML文件

app.get('/', function (req, res) { 
    res.render('index', { title: 'Hey', message: 'Hello there!'}); 
}); 

现在我把一些逻辑到客户端,以防止页面加载。缺点是角模板和普通的html代码一样冗长。文件很快就会变得漫长而杂乱。

例如,在我的个人资料模板,我有这个

 <div class="my-panel-body"> 
      <table class="my-table"> 

       <!--email--> 
       <tr> 
        <th>Email</th> 
        <td>{{entity.email}}</td> 
       </tr> 

       <!--gender--> 
       <tr> 
        <th>Gender</th> 
        <td>{{entity.meta.gender}}</td> 
       </tr> 

       <!--dob--> 
       <tr> 
        <th>Date of Birth</th> 
        <td>{{entity.meta.dob}}</td> 
       </tr> 

       <!--country--> 
       <tr> 
        <th>Country</th> 
        <td>{{entity.meta.country}}</td> 
       </tr> 

       <!--city--> 
       <tr> 
        <th>City</th> 
        <td>{{entity.meta.city}}</td> 
       </tr> 

       <!--status--> 
       <tr> 
        <th>Status</th> 
        <td>{{entity.meta.status}}</td> 
       </tr> 

这将是巨大的,如果我能写的东西像

div 
    table 
     head 
      tr 
       th Date of Birth 
       td {{entity.dob}} 
      tr 
       th Email 
       td {{entity.email}} 

它不必是玉。只要它的干净和短小,我就可以使用任何语言

+2

你试过吗?你是否遇到某种错误? – Agop

+2

你测试了你发布的例子吗?为什么它不工作? – Claies

回答

1

Jade在服务器上运行,Angular在客户端运行。当Angular请求模板时,它会询问服务器,服务器将处理Jade模板,并使用生成的HTML进行响应,然后生成的HTML是有效的Angular模板。

只要您没有使用任何预处理器将Angular模板打包到单个文件中,那么使用服务器上的Jade为客户端生成Angular模板就可以正常工作。如果您使用的是预处理器,那么您需要先运行Jade(这也是可能的 - Jade不绑定到Express)。

不一定与这个问题有关,但它也是有用的注意Angular没有绑定到HTML。浏览器支持的任何基于标签的语言都适用于Angular - SVG,VRML,MathML等。

0

所以你可以做的就是把它们写成你想要的样子然后在角度加载之前创建一个叫做模板的模块,它使用$templateCache。你可以把他们在那里一旦他们解析:https://docs.angularjs.org/api/ng/service/$templateCache

如果你需要它渲染上,你必须modifiy如何$http.get作品在.config和检查,看看它是否是一个模板飞,如果它是通它通过你的渲染器。

+1

他为什么需要做这些? Angular将从Web服务器请求模板,如果Web服务器从Jade转换为HTML,那么Angular甚至不会知道其中的差别。 –

+0

取决于他们是否想编译模板服务器端或客户端。 –

+0

他在问题中说他正在编译Jade模板服务器端。 “我用玉来写快递模板。” –