☰

Polymer 要素と AngularJS ディレクティブの違いは何ですか? 質問する

tag-icon • tag-icon javascript angularjs polymer
Polymer 要素と AngularJS ディレクティブの違いは何ですか? 質問する

ポリマーについてはじめるこのページでは、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.jsx-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) {
        }
    };
});

  • この2つの違いは何でしょうか?

  • AngularJS が解決できなかった、または解決できない問題を Polymer が解決できるでしょうか?

  • 将来、Polymer を AngularJS と連携させる予定はありますか?

ベストアンサー1

この質問をしたのはあなたが初めてではありませんね :) あなたの質問に答える前に、いくつか明確にしておきたいことがあります。

  1. Polymer は、webcomponents.jsWeb コンポーネント傘下のさまざまな W3C API 用のポリフィルがいくつか含まれたライブラリです。これらは次のとおりです。

    • カスタム要素
    • HTML インポート
    • <template>
    • シャドウDOM
    • ポインタイベント
    • その他

    ドキュメントの左側のナビゲーション（ポリマープロジェクト) には、これらすべての「プラットフォーム テクノロジー」に関するページがあります。各ページには、個々のポリフィルへのポインターもあります。

  2. <link rel="import" href="x-foo.html">は HTML インポートです。インポートは、HTML を他の HTML に含めるための便利なツールです。インポートには<script>、、、マークアップなど、あらゆるものを含めることができます。<link>

  3. x-foo.html に「リンク」するものは何もありません<x-foo>。例では、<x-foo>(例<element name="x-foo">) のカスタム要素定義が x-foo.html で定義されていると想定されています。ブラウザがその定義を認識すると、新しい要素として登録されます。

質問に移りましょう！

Angular と Polymer の違いは何ですか?

これについては、Q&Aビデオ一般的に、Polymer は Web コンポーネントの使用 (および使用方法の説明) を目的としたライブラリです。その基盤はカスタム要素 (つまり、構築するものはすべて Web コンポーネント) であり、Web の進化に合わせて進化します。そのため、最新のブラウザのみをサポートしています。

この画像を使用して、Polymer のアーキテクチャ スタック全体を説明します。

ここに画像の説明を入力してください

RED レイヤー: 一連のポリフィルを通じて明日の Web が実現します。ブラウザーが新しい API を採用するにつれて、これらのライブラリは時間の経過とともになくなることに注意してください。

黄色のレイヤー: polymer.js で砂糖を少し加えます。このレイヤーは、仕様化された API を一緒に使用する方法に関する私たちの意見です。また、データ バインディング、シンタックス シュガー、変更ウォッチャー、公開されたプロパティなどを追加します。これらは、Web コンポーネント ベースのアプリの構築に役立つと考えています。

緑: UI コンポーネントの包括的なセット (緑のレイヤー) はまだ進行中です。これらは、赤と黄色のレイヤーをすべて使用する Web コンポーネントになります。

Angular ディレクティブとカスタム要素の違いは何ですか?

アレックス・ラッセルの答え基本的に、Shadow DOM は HTML のビットを組み立てることを可能にするだけでなく、その HTML をカプセル化するためのツールでもあります。これは Web 上の根本的に新しい概念であり、他のフレームワークでも活用されるものになります。

AngularJS が解決できなかった、または解決できない問題を Polymer が解決できるでしょうか?

類似点: 宣言型テンプレート、データ バインディング。

違い: Angular には、サービス、フィルター、アニメーションなどの高レベル API があり、IE8 をサポートしており、現時点では、実稼働アプリを構築するためのはるかに堅牢なフレームワークです。Polymer はまだアルファ版が始まったばかりです。

将来、Polymer を AngularJS と連携させる予定はありますか?

彼らは別々のプロジェクトとはいえ、AngularとEmberの両チームは発表された最終的には、基盤となるプラットフォーム API を独自のフレームワークで使用するようになるでしょう。

^ これは私にとっては大きな勝利です。Web 開発者が強力なツール (Shadow DOM、カスタム要素) を利用できる世界では、フレームワークの作成者もこれらのプリミティブを利用して、より優れたフレームワークを作成できます。現在、ほとんどの開発者は「仕事をやり遂げる」ために大変な苦労をしています。

アップデート：

このトピックに関する非常に素晴らしい記事があります: "PolymerとAngularの違いは次のとおりです「

おすすめ記事