web-dev-qa-db-ja.com

AngularJsアプリを作成するときのJadeまたはHandlebarsの使用方法

私はjavascriptのフルスタックアプリケーション全体に初めて（新しい）、Angularにはまったく新しいので、誰かが私のためにここに記録を残せることを望んでいました。

AngularJSを使用してクライアント側のアプリを作成するときに、JadeやHandlebarsなどのテンプレートフレームワークを使用する必要があるのはなぜですか。

これらのテンプレートフレームワークのいずれも使用したことはありません。ですから、私はその利点を完全にはよく知りません。しかし、たとえばHandlebarsを見ると、Angularで行うのと同じこと（ループなど）の多くを行います。

私が知る限り、適切なHTMLを使用してAngularにテンプレートを作成し、すべてのテンプレートクライアント側を実行し、これをたとえばノードとmongoを使用したAPIファーストアプローチと組み合わせるのが最も理にかなっています。

この混乱の理由は、GitHubで見つけた多くの例がJadeを利用しているためであり、私にとっては直感に反しているようです。

私を啓発して、まっすぐにしてください。私よりも多くのことを知っている人々からいくつかのベストプラクティスを学びたいです。

ありがとう

node.jsmongodbangularjshandlebars.jspug
120
Jay Pete

疑いなく Angular環境のJadeを好む人は、OPがコメントしたように、ビューロジックがクライアントに属し、ビジネスロジックがサーバーに属することを理解できません。

それを行う非常に正当な理由がない限り、それをしないでください。エンジニアリングでは、より少ない可動部品を持つシステムはより信頼性の高いシステムであり、インターフェース境界（クライアント/サーバー）があるシステムです尊敬は長期にわたってより維持しやすいため、可能な限りデフォルトで最も単純なアーキテクチャとクリーンな分業にデフォルト設定します。優先する理由がある場合は、必要なことを実行してください。ただし、警告emptorです。

最近、シンプルな状態を維持するだけで、JadeでのミキシングよりもストレートAngularテンプレートがはるかに良い仕事をするコードをレビューしました。

テンプレートの拡張は別として、JadeはAngularがまだ提供していないテーブルに価値のあるものをもたらしません。正直に言ってください：「継承よりも好みの合成」（つまり、パーシャル）の健全な原則を使用して、needテンプレートの拡張性はありません。 JadeはHTMLよりも「解析しやすい」ということはほとんどありません。これらは些細な違いですが、Jadeは別のレベルの間接性を追加します-避けるのが最善です。

サーバー側のテンプレート化には、有効化された特殊なケースが1つあります。最適化。通常、時期尚早な最適化は悪いことです。パフォーマンスが本当に問題になっている場合、およびこれを処理するために余裕のあるサーバー容量があれば、サーバー側のテンプレートが役立ちます。これはTwitterやBasecampのような製品に当てはまります。多くのサーバー側の作業のコストは、サーバーへのリクエストを減らすことで相殺されます。

Handlebarsに関しては、AngularJSの（驚くべき）クライアント側のテンプレートを置き換える必要はありません。

61
Engineer

私はプレーンなHTMLを書くのが嫌いなので、Jadeを使用してAngularJSが使用するテンプレートを生成します。次のようになります。

.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='[email protected]'
      focus-on='focusEmail'
    )

…プレーンHTMLよりもずっときれいだと思います。

62
thatmarvin

私は正直、人々がこれの違いを気にしている理由を理解していません：

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

私がもう少し人間が読めるものを見つけることを除いて。 わずかに。なぜ人々がそのトピックについてそれほど熱心であるのか分かりません。それはすべてbikesheddingです。違いはごくわずかであり、有能なプログラマであれば、Googleで5秒後に簡単に相互に変換できます。あなたが望むものを使用し、他の誰もが何も口論しないようにします。あなたの戦いを選んで、 原子炉;） のような実際に重要な事柄についての議論に参加してください

46
Chev
  1. AngularJSには独自のテンプレートエンジンがあるため、AngularJSでHandlebarsを使用する必要はありません。
  2. 彼らがJadeを使用する理由は、htmlにコンパイルされ、後でフロントエンドでangularJSによって提供される単なるサーバーレンダラーだからです。

したがって、TL; DR、サーバー上では、アプリケーションのhtml構造を生成するために任意の言語[jade、haml、...]を使用できます。フロントエンドのランタイム。

サーバーでJadeを使用する必要はありません。新しい開発者を混乱させるため、使用しないことをお勧めします。あなたが見るプロジェクトでは、Jadeはよりクリーンで使い慣れているためにJadeを使用していますが、angularJSで使用する場合は、ロジックなしでプレーンhtmlを生成することが唯一の仕事です。

14
nXqd

受け入れられた答えは、一方的なものであり、HTMLのプリコンパイラのセットアップは、あらゆる種類のHTMLプロジェクトで優れた用途を持っているという事実を無視しています。

angularアプリで単独で作業していますか？Jadeを試してみてください。

JadeはHTMLをモジュール化する能力を向上させ、HTMLのデバッグに費やす時間を減らし、マークアップインベントリの構築を促進します。

設計時には、HTMLパーツの反復が非常に多くなる可能性があります。 HTML出力が一連のヒスイファイルに基づいている場合、チームは要件の変更に柔軟に対応できます。また、jadeインクルードの再構成によるマークアップの変更は、純粋なHTMLの再作成よりもはるかに堅牢です。

そうは言っても、生産段階または開発段階でangularをヒスイと混合することに対する一般的な嫌悪感を認識しています。他の必要な構文知識のセットを導入することはほとんどのチームにとって悪い考えであり、ヒスイを使用するとDRY原則によって禁止される作業を抽象化することで非効率なプロジェクト管理を隠す場合があります（たとえば、マークアップの準備が怠慢です）

8
Mirko

上記のすべての答えを読みましたが、AngularJSテンプレートの生成よりもjaを使用することを非常に有用なものにする側面について誰も言及していないことに少し驚いていました。

既に述べたように、実稼働環境では、生のhtmlとjadeの入力の現実的なシナリオの違いは実際に注目に値しますが、忘れてはならないより重要なことは、動的にを変更して再初期化する必要があることですangularjsテンプレート。

簡単に言うと、 時々 innerHTML経由でhtmlを変更してから、AngularJSにコンテンツを再コンパイルさせる必要があります。そして、jadeを介してこのようなビューを生成するとメリットがある場合、まさにこのタイプのタスクです。

また、AngularJSはモデルとうまく機能し、その構造は定義上よく知られています。実際、正確な構造（JSONレンダラーなど）が実際にはわからないことがあります。ここでは、AngularJSが非常に不格好になります（angularアプリを作成している場合でも）、jadeはその仕事をします。

7
shabunc

ジェイドは間違いなくHamlと言うよりもhtmlにずっと近い。したがって、コンテキストスイッチは実際には非常に最小限です。しかし、完全に欠席しているわけではありません。開発者にとってはまったく問題ではないかもしれません。しかし、設計者が来て、ネストされたタグを適切に機能させる方法を尋ねると、最初に作成した不要な問題を解決しています。

HTMLは依然として非常に読みやすく、パーシャルを使用してよりわかりやすくすることができます。ジェイドでもHTMLでも、500行は読みにくいです。

こちらはJのテンプレートです

.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が特に不利になることはありません。案の定、angular括弧は目障りです。しかし、私が導入した間接性がhtmlを壊しているのではないかというデザイナーの疑問に対処するよりも、むしろそれらを持ちたいと思います。 （そうではないかもしれない。しかし、それを証明することは価値のある努力ではない）

2
suryasankar

Jadeを介してangularテンプレートを含めることができます。

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

テンプレートをキャッシングする場合、エスケープされたテンプレートをjavascriptファイルに含めるよりも脆弱であると感じています。

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

2
Austin Pray

チームで作業する場合、フロントエンドはページを静的なHTMLとして設計することを好みます。その静的なhtmlを動的なテンプレートに翻訳するとエラーの原因になります。jaを追加すると、このような翻訳手順が追加されます。

他の多くの人と同じように、私はシンプルさを好みます！

0
Arjan

まず第一に、常に何らかのサーバー側テンプレートが必要です。

純粋なクライアント側のテンプレートは読み込み時間に大きな欠点があるため、サーバー上で静的要素をレンダリングすることで緩和されることがよくあります。この方法では、ユーザーがページを部分的にロードするときに、ページ上のいくつかの要素がすでに表示されます。

また、この場合、テンプレートは便利ですが、代わりにJekyllのような静的HTMLジェネレーターを使用することもあります。

ジェイドを使用する別の理由がありますが、ここではこれまで言及していません。

空白。

インデントと改行を使用して人間が維持できるHTMLを作成している場合、すべての改行が空白テキストノードになります。場合によってはインライン要素のフォーマットをかなりねじ込み、JavaScriptコードをより奇妙にすることができます。

詳細についてはこちらをご覧ください： https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM

Jadeコードを作成している場合、この問題のない1行のHTMLにコンパイルされます。

0
alex