在编写AngularJs应用程序时,Jade或Handlebars的用途是什么？

Question

我是整个javascript全堆栈应用程序的新手(ish),对Angular来说是全新的,所以我希望有人能在这里直接为我记录.

在使用AngularJS编写客户端应用程序时,为什么需要使用像Jade或Handlebars这样的模板框架.

我应该说我从未使用过任何这些模板框架.所以我完全不熟悉这些优点.但是当我看看Handlebars时,它会做很多与Angular相同的事情,例如循环等.

据我所知,最有意义的是使用适当的HTML在Angular中创建模板然后执行所有模板化客户端,并将其与使用node和mongo的API第一种方法相结合.

这种混淆的原因是我在GitHub上找到的很多例子都使用了Jade,这对我来说似乎很直观.

请赐教,让我直截了当.我很想从比我更了解的人那里学习一些最佳实践.

谢谢

Answer 1

我使用Jade生成AngularJS使用的模板,因为我讨厌编写纯HTML.它看起来像:

.control-group(
  ng-form
  name='emailGroup'
  ng-class='{"ng-error": emailGroup.$invalid}'
)
  label.control-label Email
  .controls
    input(
      type='email'
      ng-model='user.email'
      required
      placeholder='you@example.com'
      focus-on='focusEmail'
    )

...我认为比纯HTML更清晰.

Answer 2

那些毫无疑问在Angular环境中支持Jade的人无法理解视图逻辑属于客户端,而服务器上的业务逻辑就像OP所评论的那样.

除非你有充分的理由去做,否则不要这样做.在工程中,具有较少移动部件的系统是更可靠的系统,并且遵循界面边界(客户端/服务器)的系统在长期内更易于维护,因此如果可能的话,默认为最简单的架构和清洁的分工.如果你有压倒一切的理由,那就做你必须做的事,但要注意.

最近我回顾了一些代码,其中直接角度模板比仅仅通过保持简单性在Jade中混合做得好得多.

除了模板扩展,Jade没有为Angular尚未提供的表提供任何有价值的东西.老实说:使用"赞成组合而不是继承"的声音原则(即局部),你不应该需要模板可扩展性.Jade比HTML更容易"解析".它们只是微不足道,而翡翠增加了另一层次的间接 - 最好避免.

服务器端模板有一个有效的专用案例:优化,记住过早优化通常是一件坏事.如果性能确实存在问题,并且您有足够的服务器容量来处理这一问题,那么服务器端模板可以提供帮助.这适用于Twitter和Basecamp等产品,其中执行大量服务器端工作的成本被减少的服务器请求的增益所抵消.

至于Handlebars,没有必要替换AngularJS(惊人的)客户端模板.

Answer 3

我老实说不明白为什么人们关心这个之间的区别:

<html ng-app>
 <!-- Body tag augmented with ngController directive  -->
 <body ng-controller="MyController">
   <input ng-model="foo" value="bar">
   <!-- Button tag with ng-click directive, and string expression 'buttonText' wrapped in "{{ }}" markup -->
   <button ng-click="changeFoo()">{{buttonText}}</button>
   <script src="angular.js">
 </body>
</html>

还有这个:

html(ng-app="ng-app")
  // Body tag augmented with ngController directive  
  body(ng-controller="MyController")
    input(ng-model="foo", value="bar")
    // Button tag with ng-click directive, and string expression 'buttonText' wrapped in "{{ }}" markup
    button(ng-click="changeFoo()") {{buttonText}}
    script(src="angular.js")

除了我发现一个更易读的人.稍微.我不明白为什么人们对这个话题如此狂热.这都是自行车.差异可以忽略不计,任何有能力的程序员都可以在五秒钟之后轻松地将一个人翻译成另一个.使用你想要的东西,让其他人争吵.选择你的战斗并就真正重要的事情进行辩论,比如原子反应堆;)

Answer 4

1. 你不需要使用带有AngularJS的Handlebars,因为它有自己的模板引擎.
2. 他们之所以使用Jade,是因为它只是一个服务器渲染器,它将被编译为html,并在之后的前端由angularJS提供服务.

所以TL; DR,在服务器上,你可以使用任何语言[jade,haml,...]为你的应用程序生成只是html结构,它与angularJS没有任何关系,因为它将呈现和使用HTML at前端的运行时.

您不必在服务器上使用Jade,我建议不要使用,因为它会使新开发人员感到困惑.在你看到他们使用Jade的项目中,因为它更干净并且习惯了它,如果它与angularJS一起使用,那么唯一的工作就是生成没有任何逻辑的纯HTML.

Answer 5

接受的答案有点片面,忽略了这样一个事实:HTML的预编译器的任何设置都适用于任何类型的HTML项目:组合和产生的标记灵活性.

独自在角度应用程序上工作？试试Jade吧.

Jade提高了模块化HTML的能力,减少了调试HTML所花费的时间,并鼓励构建标记库存.

在设计时,HTML部分可能会进行大量的迭代.如果HTML输出基于一组jade文件,则团队可以轻松地灵活地根据需求进行更改.此外,通过重新组合jade包括更改标记比重写纯HTML更加强大.

话虽如此,我认识到在生产或开发阶段将角度与玉石混合的普遍厌恶.引入另一组必需的语法知识对于大多数团队来说是一个坏主意,并且使用jade可能会通过抽象掉DRY原则所禁止的一些工作来隐藏低效的项目管理(例如,在标记准备上懒惰)

Answer 6

我已经阅读了上面的所有答案并且有点惊讶没有人提到过使用jade生成AngularJS模板非常有用的一个方面.

正如已经被告知的那样,在制作中,输入原始html和jade之间的现实场景差异实际上是值得注意的,但更重要的是我们永远不会忘记的是有时我们需要动态更改和重新初始化的 angularjs模板.

简单来说,有时我们需要通过innerHTML更改html,然后强制AngularJS重新编译内容.而这正是通过jade生成这样的视图可以带来好处的任务类型.

此外,AngularJS适用于模型,根据定义,结构是众所周知的.实际上,碰巧我们实际上并不知道确切的结构(想象一下,比如JSON渲染器).AngularJS在这里将非常笨拙(即使正在构建一个角度应用程序),而jade将完成这项工作.