121

我是整个 javascript 全栈应用程序的新手，对 Angular 完全陌生，所以我希望有人可以在这里直接为我记录。

在使用 AngularJS 编写客户端应用程序时，为什么我需要使用 Jade 或 Handlebars 之类的模板框架。

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

据我所知，最有意义的是使用适当的 HTML 在 Angular 中创建模板，然后在客户端进行所有模板化，并将其与使用 node 和 mongo 的 API 优先方法相结合。

造成这种混乱的原因是我在 GitHub 上找到的许多示例都使用了 Jade，这对我来说似乎违反直觉。

请赐教，让我直截了当。我很想向比我了解更多的人学习一些最佳实践。

谢谢

4

10 回答 10

63

我使用 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 干净得多。

于 2013-08-11T19:06:06.497 回答
62

那些在 Angular 环境中毫无疑问地支持 Jade 的人无法理解视图逻辑属于客户端，而业务逻辑属于服务器，正如 OP 所评论的那样。

除非您有充分的理由这样做，否则不要这样做。在工程中，移动部件较少的系统是更可靠的系统，而尊重接口边界（客户端/服务器）的系统在长期内更易于维护，因此如果可能，默认使用最简单的架构和清晰的分工。如果你有压倒一切的原因，做你必须做的，但警告买者。

最近我回顾了一些代码，其中直接 Angular 模板比在 Jade 中混合做得更好，只是通过保持简单性。

除了模板扩展之外，Jade 没有为表格带来 Angular 尚未提供的任何有价值的东西。老实说：使用“优先组合优于继承”（即部分）的合理原则，您永远不需要模板可扩展性。Jade 并不比 HTML“更容易解析”。它们只是微不足道的不同，而 Jade 增加了另一层间接性——最好避免。

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

至于 Handlebars，没有必要替换 AngularJS 的（惊人的）客户端模板。

于 2013-11-28T16:01:02.873 回答
46

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

<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")

除了我发现一个更易读的。略。我不明白为什么人们对这个话题如此狂热。这都是自行车脱落。差异可以忽略不计，任何有能力的程序员都可以在谷歌上五秒钟后轻松地将一个翻译成另一个。用你想要的，让其他人无事争吵。选择你的战斗并参与关于真正重要的事情的辩论，比如原子反应堆；）

于 2014-01-22T05:04:36.467 回答
14
  1. 您不需要将 Handlebars 与 AngularJS 一起使用，因为它有自己的模板引擎。
  2. 他们使用 Jade 的原因，因为它只是一个服务器渲染器，它将被编译为 html 并由 angularJS 稍后在前端提供。

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

您不必在服务器上使用 Jade，我建议不要使用，因为它会混淆新开发人员。在您看到的项目中，他们使用 Jade 只是因为它更干净而且他们已经习惯了，如果它与 angularJS 一起使用，那么唯一的工作就是生成没有任何逻辑的纯 html。

于 2013-08-11T18:22:09.430 回答
8

公认的答案有点片面，忽略了这样一个事实，即任何 HTML 预编译器设置对任何类型的 HTML 项目都有很大的用途：组合和由此产生的标记灵活性。

独自开发 Angular 应用程序？试试杰德吧。

Jade 提高了您对 HTML 进行模块化的能力，减少了您在调试 HTML 上所花费的时间，并且还鼓励构建标记清单。

在设计期间，HTML 部分可能会有大量的迭代。如果 HTML 输出基于一组翡翠文件，那么团队很容易灵活应对不断变化的需求。此外，通过重新编写 Jade 包含来更改标记比重新编写纯 HTML 更强大。

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

于 2014-08-02T11:09:43.270 回答
7

我已经阅读了上面的所有答案，有点惊讶没有人提到使用玉来生成 AngularJS 模板的一个方面非常有用。

如前所述，在生产中，输入原始 html 和玉石的实际场景差异实际上是显着的，但我们永远不应忘记的更重要的是，有时我们需要动态更改和重新初始化angularjs 模板。

简单来说，有时我们需要通过 innerHTML 来改变 html，然后强制 AngularJS 重新编译内容。这正是通过玉生成此类视图的任务类型可以从中受益。

此外，AngularJS 与模型一起工作得很好，模型的结构在定义上是众所周知的。实际上，碰巧我们实际上并不知道确切的结构（想象一下 JSON 渲染器）。AngularJS 在这里会很笨拙（即使是在构建一个 Angular 应用程序），而 Jade 可以完成这项工作。

于 2014-02-07T11:28:01.317 回答
2

您可以通过 Jade 包含角度模板。

script(type="text/ng-template", id="admin")
  include partials/admin

对于缓存模板，我认为这比在 javascript 文件中包含转义模板要脆弱得多。

请参阅：https ://docs.angularjs.org/api/ng/service/$templateCache

于 2014-05-19T04:06:26.150 回答
2

Jade 肯定比说 Haml 更接近 html。所以上下文切换实际上非常小。然而，它并非完全不存在。这对开发人员来说可能根本不重要。但是当你的设计师来问你如何让嵌套标签正常工作时，你正在解决一个你一开始就创建的不必要的问题。

HTML 仍然可以非常清晰地编写，并且可以使用部分来使其更易于理解。500 行的任何内容都很难阅读——无论是 Jade 还是 HTML。

这是一个翡翠模板

.product-container

    .input-group.msB.col-md-5.no-padding
        .fnt-light-navyblue.mtB(for='name')
            strong Name the sticker
        input.full-input(type='text', placeholder='Awesome Batman Sticker')
    .clear

    .form-group.mmT
        label.form-label.fnt-light-navyblue
            strong Choose size
        .selector-group(ng-repeat="size in sizes", ng-class="{ 'msT': !$first}")
            - raw
            span.radio
                input.radio(name='choose_sticker_size',
                            ng-model="selectedSize",
                            type='radio',
                            value='{{size}}',
                            id="sticker-{{size}}")
                span.fake-radio
            label(for='sticker-{{size}}') {{size}} inch
            - endraw
    // end form-group
    .clear

和等效的 HTML

<div class="product-container">

    <div class="input-group msB col-md-5 no-padding">
        <div for="name" class="fnt-light-navyblue mtB">
            <strong>Name the product</strong>
        </div>
        <input type="text" placeholder="Awesome Batman Sticker" class="full-input" />
    </div>
    <div class="clear"></div>

    <div class="form-group mmT">
        <label class="form-label fnt-light-navyblue">
            <strong>Choose size</strong>
        </label>
        <div
            class="selector-group"
            ng-class="{ 'msT': !$first}"
            ng-repeat="size in sizes">
                {% raw %}
                <span class="radio">
                    <input
                        id="sticker-{{size}}"
                        class="radio"
                        name="choose_sticker_size"
                        ng-model="selectedSize"
                        type="radio"
                        value="{{ size }}" />
                    <span class="fake-radio"></span>
                </span>
                <label for="sticker-{{size}}">{{size}}</label>
                {% endraw %}
        </div>
    </div><!-- end form-group -->
    <div class="clear"></div>
</div>

当写得清晰时，我不认为 HTML 特别处于不利地位，因此需要切换。果然，尖括号很碍眼。但我宁愿拥有它们，也不愿处理设计师的疑问，我引入的间接是否破坏了 html。（它可能不会。但证明它是不值得的努力）

于 2015-03-15T13:57:09.563 回答
0

首先，您总是需要某种服务器端模板。

纯客户端模板在加载时间上有很大的缺点，因此通常通过在服务器上渲染一些静态元素来缓解。这样，当用户部分加载页面时，他已经在页面上看到了一些元素。

好吧，在这种情况下，模板很方便，尽管人们有时会使用像 Jekyll 这样的静态 html 生成器。

还有一个使用 Jade 的原因，这里之前没有提到。

空白。

如果您正在编写带有缩进和换行符的人类可维护的 HTML，则每个换行符都会产生一个空白文本节点。在某些情况下，它几乎可以扭曲内联元素的格式，并使 javascript 代码更加怪异。

您可以在此处阅读更多详细信息：https ://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM

如果您正在编写 Jade 代码，它会被编译成没有此问题的单行 HTML。

于 2014-02-08T01:21:25.220 回答
0

在团队中工作时，前端可能更喜欢将他们的页面设计为静态 html。将静态 html 转换为动态模板是错误的来源，添加翡翠会增加这样的转换步骤。

和其他许多人一样，我喜欢简单！

于 2016-10-14T11:07:00.327 回答