我是整个javascript全栈应用程序的新手，并且对Angular还是陌生的，所以我希望有人可以在这里为我提供记录。
为什么在使用AngularJS编写客户端应用程序时需要使用Jade或Handlebars之类的模板框架。
我应该说，我也从未使用过任何这些模板框架。因此，我完全不了解这些优势。但是，例如，当我看一下Handlebars时，它会执行许多与Angular中相同的事情，例如循环等。
据我所知，使用适当的HTML在Angular中创建模板，然后对所有客户端进行模板化，然后将其与使用node和mongo的API first方法结合起来，将是最有意义的。
造成这种混乱的原因是，我在GitHub上找到的许多示例都使用了Jade，这对我来说似乎很不直观。
请开导我，让我挺直。我很乐意向比我了解更多的人学习一些最佳实践。
谢谢
Answers:
那些毫无疑问地在Angular环境中偏爱Jade的人无法理解视图逻辑属于客户端，而业务逻辑属于服务器，正如OP所言。
除非您有充分的理由这样做，否则请勿这样做。在工程中，具有较少活动部件的系统是更可靠的系统，并且在长期内更易于维护尊重接口边界（客户端/服务器）的系统，因此，如果可能的话，默认使用最简单的体系结构和清晰的分工。如果您有压倒一切的原因，请执行您必须做的事情，但要警告您。
最近，我回顾了一些代码，仅通过保持简单性，直接进行Angular模板将比在Jade中进行混合做得更好。
除了模板扩展之外，Jade并没有为Angular尚未提供的表带来任何价值。坦白说：使用“偏爱组成而不是继承”（即部分继承）的合理原则，您永远都不需要模板可扩展性。Jade比HTML几乎“更容易解析”。它们只是微不足道的不同，而Jade则增加了另一个间接级别-最好避免。
对于服务器端模板，有一个有效的专业案例：优化，请记住，过早的优化通常是一件坏事。在性能确实有问题的地方，并且您有足够的服务器能力来处理此问题，服务器端模板可以提供帮助。这适用于Twitter和Basecamp之类的产品，其中减少了对服务器的请求，从而抵消了执行大量服务器端工作的成本。
对于Handlebars，不需要替换AngularJS的（令人惊奇的）客户端模板。
我使用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干净得多。
ng-inlude，可能使用起来ng-src，不同于玉器混入很多，包括？
老实说，我不明白为什么人们关心这两者之间的区别：
<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")除了我发现它更易于阅读。稍微。我不明白为什么人们如此热衷于这个话题。这都是骑车棚。差异可以忽略不计，任何有能力的程序员都可以在Google上五秒钟后轻松地将一个翻译成另一个。使用您想要的内容，让其他任何人吵架。选择自己的战斗，并就诸如原子反应堆之类的实际问题进行辩论；）
if向方程式中添加1玉，一切都会突然改变。请参阅上面的“高级用户”。
if的翡翠标记中包含s，那么无论如何您已经需要某种模板引擎，并且必须将其转换if为该引擎使用的任何语法。我真的不明白你的批评。
因此，在服务器上使用TL; DR时，您可以使用任何语言[jade，haml，...]为您的应用程序生成html结构，它与angularJS无关，因为它将在前端运行时。
您不必在服务器上使用Jade，建议不要使用Jade，因为它会使新开发人员感到困惑。在您看到的项目中，他们之所以仅使用Jade是因为它更干净并且已经习惯了Jade，并且如果将它与angularJS一起使用，则唯一的工作就是生成没有任何逻辑的纯HTML。
可接受的答案是单方面的，而忽略了以下事实：任何用于HTML的预编译器设置都可用于任何类型的HTML项目：组合和所提供的标记灵活性。
独自在角度应用程序上工作？试试玉。
Jade提高了模块化HTML的能力，减少了调试HTML所花费的时间，还鼓励建立标记清单。
在设计期间，HTML部件上可能会有很多迭代。如果HTML输出基于一组玉器文件，则团队可以轻松地对不断变化的需求采取灵活的行动。而且，通过重新编写玉器包含项来更改标记比重新编写纯HTML更加健壮。
话虽如此，我认识到在生产或开发阶段普遍倾向于将角质与玉混合。对于大多数团队来说，引入另一套必需的语法知识是一个坏主意，而使用玉石可能会通过提取一些DRY原则禁止的工作来掩盖低效的项目管理（例如，懒于标记准备）
我已经阅读了上面所有的答案，没有人提到一个方面，这使得使用jade生成AngularJS模板变得非常有用，这让我感到有些惊讶。
就像已经讲过的那样，在生产中，实际情况中键入原始html和jade之间的区别确实很明显，但是我们永远不会忘记的更重要的事情是，有时我们需要动态更改和重新初始化 angularjs模板。
为简单起见，有时我们需要通过innerHTML更改html，然后强制AngularJS重新编译内容。这正是通过翡翠生成此类视图时可以受益的任务类型。
此外，AngularJS与模型配合使用也很好，根据定义，这种结构是众所周知的。实际上，碰巧我们实际上并不知道确切的结构（想象一下，例如JSON渲染器）。AngularJS在这里会很笨拙（即使正在构建一个角度应用程序），而Jade会做。
您可以通过Jade包含角度模板。
script(type="text/ng-template", id="admin")
include partials/admin对于缓存模板，我认为这比在javascript文件中包含转义模板要脆弱得多。
参见：https : //docs.angularjs.org/api/ng/service/$templateCache
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。（可能不会。但是证明这不是值得的努力）
首先，您总是需要某种服务器端模板。
纯客户端模板在加载时具有很大的缺点，因此通常可以通过在服务器上呈现一些静态元素来缓解这种情况。这样，当用户部分加载页面时，他已经在页面上看到了一些元素。
很好，在这种情况下，模板很方便，尽管人们有时会使用静态的html生成器，例如Jekyll。
使用Jade的另一个原因是之前没有提到的。
空格。
如果您要编写带有缩进和换行符的人类可维护HTML，则每个换行符都将导致空白文本节点。在某些情况下，它几乎可以对内联元素进行螺丝格式化，并使javascript代码更加怪异。
您可以在此处阅读更多详细信息：https : //developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM
如果您正在编写Jade代码，那么它将被编译成单行HTML，而不会出现此问题。