web-dev-qa-db-ja.com

Polymer要素vs Angularディレクティブ

私はこれが以前に尋ねられたことを知っています、特に ここ

しかし、答えは私にはかなり抽象的なように見え、実際には自分自身がかなり混乱していることに気づきます。

.vsの答えは次のようです。

Polymer(より正確にはShadow DOM)は、HTMLのビットを構成するだけでなく、それらをカプセル化する機能も作成します。これは根本的に新しい機能であり、他のテンプレートシステムまたはフレームワークと併用してその能力を強化することができます。

angularディレクティブは実際にはほとんど同じことをしますが、polymer要素の方がパフォーマンス的には少し効率的かもしれませんが、私が理解している限り、これはあまりわかりません。 。この文脈では、「カプセル化」には、私が理解していない、ある種のより深い意味があると確信しています。

AngularJSWebアプリケーションを開発しているとしましょう。 polymerディレクティブよりもangular要素をいつ、どのように、そしてなぜ使用するのでしょうか?

polymer要素を使用しますか代わりに angularディレクティブを使用しますか?使用する場合、どちらを使用するのですか?または、angularディレクティブが実装されますかに関して polymer要素?

28
ronag

あなたは本当に2つの異なることを求めています。「コンポーネントを実装/構築するときと使用するときの違いは何ですか?」

コンポーネントの消費

近い将来、あなたは両方を一緒に使用します。 Webコンポーネントがどのテクノロジー/ライブラリで構築されているか、またはどのベンダーがそれを作成しているかは関係ありません。単にbower install(または同様の)およびuseアプリにとって意味のあるコンポーネント。

重要なのは、すべてがDOMになることです。つまり、要素はシームレスに連携します。相互運用の話は素晴らしいです。これがAngularディレクティブデータ-a Polymer要素にバインドされた: http://ebidel.github.io/polymer-experiments /ポリマーと角度/一緒に/


コンポーネントの構築

建物の要素は、現時点では別の話です。 Polymerのアプローチは、Webコンポーネントのすべてを中心に据えることです。 AngularはWebコンポーネントの時代より前に構築されたため、状況は少し異なります。

  • Angularディレクティブは、カスタムタグ/コンポーネントを構築する方法です。 Polymerそしてカスタム要素仕様は、それを行うための標準ベースの方法です。

  • ポリマー要素を構築する方法は、非常に宣言的です。 Angularディレクティブは主にJSで定義されています(テンプレートファイルを参照する機能を備えています)。

  • Polymer要素はカスタム要素を使用しているため、継承は単純です。Angularディレクティブ/の継承ストーリーはわかりません。

  • ポリマー要素はShadowDOMを使用します。これにより、DOMとCSSがカプセル化されます。要素で定義したスタイルはブリードアウトせず、ページスタイルはブリードインしません。間違っている可能性がありますが、Angularディレクティブにはスタイルのカプセル化の概念がありません。これは難しい問題です。 ShadowDOM仕様が無料で提供していること。

  • データバインディングの概念は似ています

angularディレクティブはpolymer要素の観点から実装されます

  • 最終的に、Angularは、進化するWebコンポーネント標準の一部を採用します。これはすべてのフレームワークに当てはまります。Ember作成されたばかりです 2014年の計画は既知です) 、これにはWebコンポーネントが含まれます。たとえば、Angular.DartはすでにディレクティブにShadowDOMを使用しています。

  • ポリマー要素(カスタム要素)は、デフォルトで他のカスタム要素と相互運用できます。これは、それらが単なるDOMであるためです。 DOM要素は一緒にうまく機能します:)

お役に立てれば!

32
ebidel