Polymer要素とAngularJSディレクティブの違いは何ですか？
Polymer Getting Started ページに、実際のPolymerの例があります。
<html>
<head>
<!-- 1. Shim missing platform features -->
<script src="polymer-all/platform/platform.js"></script>
<!-- 2. Load a component -->
<link rel="import" href="x-foo.html">
</head>
<body>
<!-- 3. Declare the component by its tag. -->
<x-foo></x-foo>
</body>
</html>
<x-foo></x-foo>はplatform.jsとx-foo.htmlによって定義されています。
これはAngularJSのディレクティブモジュールと同等のようです。
angular.module('xfoo', [])
.controller('X-Foo', ['$scope',function($scope) {
$scope.text = 'hey hey!';
})
.directive('x-foo', function() {
return {
restrict: 'EA',
replace: true,
controller: 'X-Foo',
templateUrl: '/views/x-foo.html',
link: function(scope, controller) {
}
};
});
両者の違いは何ですか？
AngularJSが解決した問題と解決しなかった問題をPolymerが解決しますか？
将来、PolymerをAngularJSと結び付ける計画はありますか？
この質問をするのはあなたが初めてではありません:)質問に進む前に、いくつかのことを明確にしましょう。
Polymerの
webcomponents.jsは、Webコンポーネントの傘下にあるさまざまなW3C APIのいくつかのポリフィルを含むライブラリです。これらは：- カスタム要素
- HTMLインポート
<template>- シャドウDOM
- ポインターイベント
- その他
ドキュメントの左ナビゲーション（ polymer-project.org ）には、これらすべての「プラットフォームテクノロジー」のページがあります。これらの各ページには、個々のポリフィルへのポインタもあります。
<link rel="import" href="x-foo.html">はHTMLインポートです。インポートは、他のHTMLにHTMLを含めるための便利なツールです。インポートには、<script>、<link>、マークアップなどを含めることができます。<x-foo>はx-foo.htmlに「リンク」しません。あなたの例では、<x-foo>（たとえば<element name="x-foo">）のカスタム要素定義がx-foo.htmlで定義されていると仮定しています。ブラウザがその定義を見ると、新しい要素として登録されます。
質問に！
AngularとPolymerの違いは何ですか？
これについては Q＆Aビデオ で説明しました。一般に、Polymerは、Webコンポーネントの使用（および使用方法の表示）を目的としたライブラリです。その基盤はカスタム要素（たとえば、構築するものはすべてWebコンポーネント）であり、Webの進化に応じて進化します。そのため、最新バージョンのブラウザのみをサポートしています。
このイメージを使用して、Polymerのアーキテクチャスタック全体を説明します。
REDレイヤー：ポリフィルのセットを通じて明日のウェブを取得します。ブラウザが新しいAPIを採用するにつれて、これらのライブラリは時間の経過とともに消滅することに注意してください。
黄色のレイヤー：Polymer.jsで砂糖を振りかけます。この層は、仕様のAPIを一緒に使用する方法に関する私たちの意見です。また、データバインディング、シンタックスシュガー、変更ウォッチャー、公開されたプロパティなども追加されます...これらは、Webコンポーネントベースのアプリの構築に役立つと思います。
緑：UIコンポーネントの包括的なセット（緑のレイヤー）はまだ進行中です。これらは、すべての赤と黄色のレイヤーを使用するWebコンポーネントになります。
角度ディレクティブとカスタム要素？
Alex Russellの answer を参照してください。基本的に、Shadow DOMはHTMLの一部を構成できますが、そのHTMLをカプセル化するためのツールでもあります。これは基本的にウェブ上の新しい概念であり、他のフレームワークが活用するものです。
AngularJSが持っていない、または持たないPolymerはどのような問題を解決しますか？
類似点：宣言型テンプレート、データバインディング。
違い：Angularは、サービス、フィルター、アニメーションなどの高レベルAPIを持ち、IE8をサポートします。この時点で、実稼働アプリを構築するためのはるかに堅牢なフレームワークです。 Polymerは、アルファ版で始まったばかりです。
今後_PolymerをAngularJSと結びつける予定はありますか？
個別のプロジェクト です。つまり、AngularとEmberの両方のチーム 発表済み 最終的には、独自のフレームワークで基盤となるプラットフォームAPIを使用するようになります。
^これは大勝利IMOです。 Web開発者が強力なツール（Shadow DOM、Custom Elements）を使用している世界では、フレームワークの作成者はこれらのプリミティブを利用して、より良いフレームワークを作成することもできます。それらのほとんどは現在、「仕事をやり遂げる」ために大いに努力しています。
更新：
このトピックに関する非常に優れた記事があります： " これはPolymerとAngularの違いです "
あなたの質問のために：
将来、PolymerをAngularJSと結び付ける計画はありますか？
AngularJSの公式ツイッターアカウントから： "angularjsはそのウィジェットにポリマーを使うでしょう。それは双方にとって好都合です"
ソース： https://Twitter.com/angularjs/status/335417160438542337
1＆2） シャドウドームに隠れたツリーがあるため、ポリマーコンポーネントはスコープ指定されています。それは彼らのスタイルと行動が滲み出ないことを意味します。 Angularは、ポリマーWebコンポーネントのように作成した特定のディレクティブには適用されません。角度指示は、おそらくあなたのグローバルな範囲内の何かと衝突する可能性があります。私があなたがポリマーから得る利益は私が説明したものであるIMOです...何も触れることができないその特定のコンポーネントにCSSとJavaScriptを範囲としたモジュラーコンポーネント。アンタッチャブルDOM！
角度ディレクティブを作成して、いくつかの機能で要素に注釈を付けることができます。ポリマーウェブ部品ではそうではありません。コンポーネントの機能を組み合わせたい場合は、2つのコンポーネントを別のコンポーネントに含める（またはそれらを別のコンポーネントでラップする）か、既存のコンポーネントを拡張することができます。主な違いは、各コンポーネントがポリマーWebコンポーネント内にあるということです。あなたはいくつかのコンポーネント間でcssとjsファイルを共有することができますまたはあなたはそれらをインライン化することができます。
3） はい、Rob Dodson氏とEric Bidelman氏によると、Angularはポリマーをバージョン2+に組み込む予定です。
ここで誰もWordの範囲について言及していないのは面白いことです。それが大きな違いのひとつだと思います。
多くの違いがありますが、それはまた、それがアプリケーションのための機能の断片のようなモジュラーレゴを作成することになるとなると共通点がたくさんあります。 Angularはアプリケーションのフレームワークであり、ポリマーは同じアプリ内でサイドディレクティブと共存できますが、範囲は大きな違いがありますが、現在の多くのアプリケーションの代わりになる可能性がありますディレクティブしかし、Angularがそのままでは機能せず、ポリマー成分も含まれている理由はわかりません。
私がこれを書いている間に答えをもう一度読みながら、私はEric Bidelman（ebidel）が彼の answer で一種のカバーをしたことに気づいた。
"Shadow DOMはHTMLの一部を構成することを可能にしますが、そのHTMLをカプセル化するためのツールでもあります。"
クレジットが支払われるべきところでクレジットを与えるために、私は Rob Dodson と Eric Bidelman との多くのインタビューを聞いて私の答えを得ました。しかし、私は答えがこの男の質問に彼が望んでいた理解を与えることを念頭に置いていないと感じます。そうは言っても、私は彼が探している答えに触れたと思いますが、私はRob DodsonとEric Bidelmanよりもこの主題についてもっと多くの情報を持っていません。
これが私が集めた情報の私の主な情報源です。
このビデオでは、Angular JSの2人の人々が、この2つのフレームワーク（Angular JS 1.2とBeyond）の違いと類似点について話しました。
これらのリンクはあなたに正しいQ&Aをもたらします：
ポリマーはWebコンポーネントシムです
" Web Components "は、Webアプリケーションに再利用可能な構成要素を提供するように設計されたHTML 5に囲まれた新しい一連の標準です。
ブラウザは「Webコンポーネント」仕様を実装するさまざまな状態にあるため、Webコンポーネントを使用してHTMLを書くのは時期尚早です。
しかし悲しいかな！救助にポリマー！ Polymerは、HTMLコードに抽象化層を提供するライブラリです。これにより、WebコンポーネントAPIをすべてのブラウザに完全に実装されているかのように利用できます。 これは poly-filling と呼ばれ、Polymerチームはこのライブラリを webcomponents.js として配布しています。これは platform.js btwと呼ばれていました。
しかし、PolymerはWebコンポーネントのためのpolyfillライブラリ以上のものです...
Polymerは、Elementsを介してオープンで再利用可能なWebコンポーネント構成要素も提供します
すべての要素をカスタマイズして拡張することができます。これらは、ソーシャルウィジェットからアニメーション、そしてWeb APIクライアントまで、あらゆるものの構成要素として使用されます。
PolymerはWebアプリケーションフレームワークではありません
ポリマーはフレームワークよりもライブラリです。
Polymerはルート、アプリケーションスコープ、コントローラなどのようなものをサポートしていません。
- しかし、それは双方向のバインディングを持ち、コンポーネントを使うことはAngularディレクティブを使うのと同じように "感じます"。
PolymerとAngularJSの間にはいくつかの重複がありますが、同じではありません。実際、AngularJSチームは、今後のリリースでPolymerライブラリを利用することを述べています。
また、Angular JSが安定化している間、Polymerは依然として「出血エッジ」と見なされます。
これら両方のGoogleプロジェクトが進化するのを見るのは面白いでしょう。
実用的な観点から考えると、最終的には角度指示のテンプレート機能と、ポリマーによって利用されるWebコンポーネントの方法論の両方が同じタスクを達成します。私が見ることができる主な違いは、Polymerがテンプレートをレンダリングする際にAngularがプログラム的に行うことを達成するためのより構文的に正確で単純な方法のHTMLを含むためにWeb APIを利用することです。しかし、ポリマーは、すでに述べたように、コンポーネントを使用して宣言型および対話型のテンプレートを構築するための小さなフレームワークです。これはUIデザインの目的でのみ利用可能になり、最新のブラウザでのみサポートされています。 AngularJSは、データバインディング、依存関係、およびディレクティブを使用してWebアプリケーションを宣言型にするように設計された完全なMVCフレームワークです。彼らは2つの全く異なる動物です。あなたの質問には、現時点で私はあなたに角度を越えてポリマーを使うことから大きな利益を得ることはないように思えます、しかし、それはまだ角度指示にそれらを移植することをあなたに要求するでしょう。しかし将来的には、Web APIがより高度になるにつれて、ブラウザがjavascriptまたはcssファイルを処理する方法と同じように単純にそれらを含めることができるようになるので、Webコンポーネントはプログラムによるテンプレートの定義および構築の必要性を完全に取り除きます。
両者の違いは何ですか？
ユーザーにとって：あまりありません。あなたは両方で素晴らしいアプリを作ることができます。
開発者にとって：それらは方法が異なる構文を使用するので、どちらの解決策もかなり急な学習曲線を持ちます。 Angularは古くからあり、巨大なコミュニティを持っているので、まだ解決されていない問題を見つけるのは困難です。
建築家に：非常に違います。 Angularはあなたの人生のあらゆる面に責任を持つアプリケーションフレームワークです。コンポーネントのような機能が必要な場合に備えて、垂直方向に統合されたディレクティブもあります。その一方で、ポリマーは、従量課金制に似ています。あなたはモーダルが欲しい、確かなこと、対話型のウィジェットが欲しい、問題がない、あなたがルート処理をしたい、我々はそれをすることができる。 Angularはディレクティブを再利用するためにAngularアプリを必要とするという点でPolymerはより移植性があります。 Polymerのアイデアはもっとモジュラーで、Angularアプリケーションでさえ他のアプリケーションでもうまくいくでしょう。
AngularJSが解決した問題と解決しなかった問題をPolymerが解決しますか？
ポリマーは、新しいWebコンポーネント標準の活用に向けた取り組みです。カスタム要素、Shadow DOM、HTMLインポートなどの機能がローカルでサポートされている場合、それらを利用しないのは愚かです。現在、ほとんどのWebコンポーネント機能は広くサポートされていない（ 現在のステータス ）ので、Polymerはシムまたはブリッジとして機能します。 Kindaはpolyfillが好きです（実際にはpolyfillを使用します）。
将来、PolymerをAngularJSと結び付ける計画はありますか？
私たちはAngularとPolymerを1年以上一緒に使っています。これを行うための決定の一部は、相互運用性が存在するというポリマーチームからの直接の約束に基づいていました。私たちはその考えをあきらめました。私たちは現在、ポリマーのみを使用する方向に向かっています。
もう一度やり直すには、おそらくPolymerを使用するように動かさなかったでしょう。代わりに、それが成熟するのを待ちます。 Polymerには長所（いくつかは非常に良い）と短所（そのうちのいくつかは非常にイライラする）があると言われていますが、それは別のスレッドに関する議論であると私は思います。
Angularが提供するMVVM（model-view、view-model）は、Polymerが解決を目指すものではありません。 Angularディレクティブが（カスタムタグ+関連付けられたロジックの組み合わせ）を使用して与える、構成可能で再利用可能な性質は、AngularとPolymerを比較するときに、より安全な比較です。 Angularは、より幅広い目的に役立つフレームワークです。
Angularjs directive はカスタム要素を作るためのアプローチです。カスタム属性を使って新しいカスタムタグを定義できます。 Polymerもこれを行うことができますが、面白くてより単純な方法で行うことができます。Polymerは実際にはフレームワークではなく、ただのライブラリです。 Polymerはあなたがw3cによって作られたネイティブのWebコンポーネント技術を学ぶことを可能にしました、ウェブブラウザは最終的にそれを実装します。webコンポーネントは未来の技術ですがWebコンポーネントを使用した要素とアプリケーション。Polymerはフレームワークではなくライブラリです。ただし、Polymerを使用している場合は、実際にはフレームワークはDOMです。両方とも私のプロジェクトであり、私は個人的にanglejsよりもポリマーを好みます。しかし、Angular version 2は、anglejs ver 1と比べるとまったく異なります。
Angularディレクティブは概念的にはカスタム要素と似ていますが、WebコンポーネントAPIを使用せずに実装されています。 Angularディレクティブはカスタム要素を作成する方法ですが、PolymerおよびWeb Components仕様は標準的な方法です。
ポリマー元素：
<polymer-element name="user-preferences" attributes="email">
<template>
<img src="https://secure.user-preferences.com/path/{{userID}}" />
</template>
<script>
Polymer('user-preferences', {
ready: function() {
this.userID= md5(this.email);
}
});
</script>
</polymer>
角度指示：
app.directive('user-preferences', ['md5', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.userID= md5(attrs.email);
},
template: '<img src="https://secure.user-preferences.com/path/{{userID}}" />'
};
}]);