blocks|key|261166|text|我使用Jade来生成AngularJS使用的模板，因为我讨厌编写普通的超文本标记语言。它看起来像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|261167|.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'
++++)|code-block|syntax|javascript|261168|…我认为它比普通的HTML干净得多。|261169|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I use Jade to generate templates consumed by AngularJS because I hate writing plain HTML. It looks something like:</p>

<pre><code>.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'
    )
</code></pre>

<p>… which I think is a lot cleaner than plain HTML.</p>


blocks|key|44446|text|您可以通过Jade包含angular模板。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|44447|script(type="text/ng-template",+id="admin")
++include+partials/admin|code-block|syntax|javascript|44448|对于缓存模板，我认为这比在javascript文件中包含转义模板要容易得多。|44449|请参阅：https://docs.angularjs.org/api/ng/service/$templateCache|offset|length|44450|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.angularjs.org/api/ng/service/%2524templateCache^0|0|0|0|4|1K|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>You can include angular templates via Jade.</p>

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

<p>For caching templates I perceive this as much less fragile than including the escaped templates in the javascript files.</p>

<p>See: <a href="https://docs.angularjs.org/api/ng/service/%24templateCache" rel="nofollow">https://docs.angularjs.org/api/ng/service/$templateCache</a></p>


blocks|key|44473|text|Jade绝对比Haml更接近html。因此，上下文切换实际上是非常小的。然而，它并不是完全不存在的。这对开发人员来说可能根本无关紧要。但是当你的设计者问你如何让嵌套标签正常工作时，你是在解决你首先创建的一个不必要的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|44474|HTML仍然可以写得非常清晰，可以使用分词来使其更容易理解。500行任何东西都很难读懂--不管是Jade还是HTML。|44475|这是一个Jade模板|44476|.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|code-block|syntax|javascript|44477|和等效的HTML|44478|<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">
++++++++++++++++{%25+raw+%25}
++++++++++++++++<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>
++++++++++++++++{%25+endraw+%25}
++++++++</div>
++++</div>
++++<div+class="clear"></div>
</div>|44479|当写得清晰的时候，我并不认为HTML是非常不利的，以保证转换。果然，有棱角的括号很难看。但我更愿意拥有它们，而不是不得不处理设计师的疑虑，即我引入的间接性是否破坏了html。(可能不是。但证明这不值得努力)|44480|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Jade is definitely much more closer to html than say Haml. So the context switch is actually very minimal. Yet it is not completely absent. It may not matter to a developer at all. But when your designer comes and asks you how to get a nested tag to work properly, you are solving an unnecessary problem that you created in the first place. </p>

<p>HTML can still be written very legibly and partials can be used to make it more comprehensible. 500 lines of anything is hard to read - be it Jade or HTML.</p>

<p>Here is a Jade template</p>

<pre><code>.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
</code></pre>

<p>And the equivalent HTML</p>

<pre><code>&lt;div class="product-container"&gt;

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

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

<p>When written legibly I dont see HTML to be very particularly disadvantaged so as to warrant a switch. Sure enough, the angular brackets are an eyesore. But I would rather have them, than having to deal with the designer's doubts whether the indirection I introduced is breaking the html. ( It may not. But proving it is not a worthy effort )</p>


blocks|key|44502|text|在团队中工作时，前端可能更喜欢将页面设计为静态html。将静态html转换为动态模板是错误的来源，而添加jade添加了这样的转换步骤。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|44503|和其他许多人一样，我喜欢简单！|44504|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>When working in a team, front-end likely prefers designing their pages as static html. Translating that static html into dynamic templates is a source of errors, and adding jade adds such translation step. </p>

<p>As many others, I favour simplicity!</p>


<p>I am new(ish) to the whole javascript full stack applications, and completely new to Angular, so I was hoping somebody can put the record straight for me here.</p>

<p>Why would I need to use a templating framework like Jade or Handlebars when writing client side apps using AngularJS.</p>

<p>I should say that I have never used any of these templating frameworks either. So I am not familiar with the advantages completely. But when I look at Handlebars for example, it does many of the same things as I would do in Angular, such as looping etc.</p>

<p>As far as I can tell, it would make most sense to create the templates in Angular using proper HTML and then do all templating client side, and combine this with an API first approach using node and mongo for example.</p>

<p>The reason for this confusion is that a lot of the examples I find on GitHub make use of Jade, and it seems counter intuitive for me.</p>

<p>Please enlighten me, and set me straight. I would love to learn some best practices from people who know much more than I do.</p>

<p>Thanks</p>


What's the use of Jade or Handlebars when writing AngularJs apps

GitHub

我对整个javascript全堆栈应用程序都是新手，对Angular来说也是全新的，所以我希望有人能在这里纠正我的错误。在使用AngularJS编写客户端应用程序时，我为什么需要使用像Jade或Handlebar这样的模板框架？我应该说，我也从未使用过这些模板框架。所以我并不完全熟悉它的优点。但是当我以车把为例，它做的...

问编写AngularJs应用程序时，Jade或Handlebar的用途是什么
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问编写AngularJs应用程序时，Jade或Handlebar的用途是什么EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问编写AngularJs应用程序时，Jade或Handlebar的用途是什么
EN