在编写AngularJs应用程序时，使用Jade或Handlebars有什么用处
我是全新的（ish）整个javascript全栈应用程序，并且对Angular来说是全新的，所以我希望有人能够把这个logging直接给我。
为什么在使用AngularJS编写客户端应用程序时，需要使用像Jade或Handlebars这样的模板框架。
我应该说，我从来没有使用任何这些模板框架。 所以我完全不熟悉这个优点。 但是当我看着Handlebars的时候，它和我在Angular中做的很多事情一样，比如循环等等。
据我所知，使用适当的HTML在Angular中创build模板，然后做所有的模板客户端，并将其与使用节点和mongo的API第一种方法相结合是最有意义的。
造成这种困惑的原因是我在GitHub上find的很多例子都使用了Jade，而这对我来说似乎是非常直观的。
请赐教，让我坐直。 我很想学习一些比我知道得多的人的最佳实践。
谢谢
那些毫无疑问地赞同Jade在Angular环境下的人不理解，视图逻辑属于客户端，服务器上的业务逻辑，就像OP所评论的那样。
不要这样做，除非你有一个很好的理由去做。 在工程devise中，一个移动部件less的系统是一个更可靠的系统，而且一个尊重接口边界（客户端/服务器）的系统在长期内更易于维护，所以如果可能的话，默认采用最简单的架构和分工。 如果你有压倒一切的理由，那就做你必须做的事，但要警惕虚空 。
最近我回顾了一些代码，其中直angular模板将比在Jade中混合做得好得多，只是保持简单。
除了模板扩展之外，Jade并没有给Angular尚未提供的表格带来任何价值。 说实话：使用“偏好合成而不是inheritance”（即partials）的声音原则，你永远不需要模板可扩展性。 Jade比HTML更不容易“parsing”。 他们是微不足道的 ，而Jade增加了另一个层次的间接 – 最好的避免。
对于服务器端模板有一个有效的专门案例：优化，记住过早的优化通常是一件坏事。 如果性能确实存在问题， 并且您有足够的服务器容量来处理此问题，则服务器端模板可以提供帮助。 这适用于像Twitter和Basecamp这样的产品，在这种产品中，执行大量服务器端工作的成本被服务器减less请求的收益所抵消。
至于把手，没有必要取代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更清洁。
我真的不明白为什么人们在乎这个区别：
<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上五秒钟之后轻松地翻译成另一个。 使用你想要的，让其他人争吵。 select你的战斗，并就有关事情进行辩论，如primefaces反应堆;）
- 你不需要使用带有AngularJS的Handlebars，因为它有它自己的模板引擎。
- 他们之所以使用Jade，是因为它只是一个服务器渲染器，它将被编译为html，并在稍后的angularJS中提供。
所以TL; DR，在服务器上，你可以使用任何语言[jade，haml，…]来为你的应用程序生成html结构，它与angularJS没有任何关系，因为它将呈现和使用HTML运行在前端。
你不必在服务器上使用Jade，我build议不要使用，因为它会混淆新的开发者。 在你看到他们使用Jade的项目中，只是因为它比较干净，而且已经习惯了，而且如果使用angularJS，只需要生成没有任何逻辑的纯HTML。
被接受的答案是有点片面的，而忽略了HTML的预编译器的任何设置对于任何一种HTML项目都非常有用：组合和结果标记的灵活性。
单独在一个angular度的应用程序？ 给玉器一个尝试。
Jade提高了模块化HTML的能力，减less了花费在debuggingHTML上的时间，同时也鼓励构build标记库存。
在devise期间，HTML部分可能会有大量迭代。 如果HTML输出基于一组玉文件，那么团队可以很容易地根据需求变化灵活操作。 此外，通过重新编写翡翠来更改标记包括比重新编写纯HTML要强大得多。
这就是说，我认识到在生产或开发阶段对玉与angular玉混合的厌恶。 引入另外一套所需的语法知识对于大多数团队来说是一个坏主意，使用玉可能会隐藏一些DRY原则所禁止的工作（例如懒惰的标记准备），从而隐藏低效的项目pipe理。
我已经阅读了上面的所有答案，有点惊讶，没有人提到过使用Jade生成AngularJS模板的一个方面，这是一个非常有用的事情。
正如已经被告知的那样，在生产中，逼真的场景在input原始的html和jade之间的区别实际上是显着的，但是我们不应该忘记的更重要的事情是有时我们需要dynamic地改变和重新初始化 angularjs模板。
简单的说， 有时我们需要通过innerHTML改变html，然后强制AngularJS重新编译内容。 而这正是通过玉产生这样的意见的任务的types可以有好处。
此外，AngularJS与模型结合良好，这种结构在定义上是众所周知的。 实际上，我们实际上并不知道确切的结构（想象一下，比如JSON渲染器）。 AngularJS在这里将会非常笨拙（即使是在构build一个angular度的应用程序），而玉会做这项工作。
您可以通过Jade包含angular模板。
script(type="text/ng-template", id="admin") include partials/admin
对于caching模板，我认为这比在JavaScript文件中包含转义模板要脆弱得多。
请参阅： https ： //docs.angularjs.org/api/ng/service/$templateCache
Jade肯定比Haml更接近HTML。 所以上下文切换实际上是非常小的。 但它并不完全没有。 开发者可能无关紧要。 但是，当你的devise师来问你如何让一个嵌套的标签正常工作，你正在解决一个不必要的问题，你创build的第一个地方。
HTML仍然可以很清晰地编写，部分可以用来使其更容易理解。 500行的任何东西都很难阅读 – 不pipe是Jade还是HTML。
这是一个Jade模板
.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是非常特别弱势，以保证切换。 果然，尖括号是一个眼睛。 但我宁愿拥有它们，也不必处理devise师的怀疑，我介绍的间接方式是否打破了html。 （可能不会，但certificate这不是一个值得的努力）
首先，你总是需要某种服务器端的模板。
纯粹的客户端模板在加载时间上有很大的缺点，所以通常通过在服务器上渲染一些静态元素来缓解。 这样当用户部分加载一个页面时，他会在页面上看到一些元素。
而且，在这种情况下，模板很方便，尽pipe人们有时候会使用像Jekyll这样的静态html生成器。
使用Jade的另一个原因是之前未提及的。
空白。
如果您使用缩进和换行符编写人员可维护的HTML，则每个换行符都将导致一个空白文本节点。 在某些情况下，它可以非常简化内联元素的格式化，并使javascript代码更加怪异。
你可以在这里阅读更多细节： https ： //developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM
如果您正在编写Jade代码，则将其编译为单行HTML，但不存在此问题。
在团队中工作时，前端可能更喜欢将其页面devise为静态html。 将这个静态HTML转换成dynamic模板是错误的来源，并且增加了这个转换步骤。
和其他许多人一样，我喜欢简单！
