web-dev-qa-db-ja.com

AngularJS 1.5のコンポーネントとディレクティブの主な違いは何ですか？

コンポーネントとディレクティブの本当の違いを理解するのは難しいと感じています。コンポーネントがはるかに簡単な概念であることを理解しました。

これを念頭に置いて、AngularJS 1.5を使用するときにディレクティブを使用し続ける理由はありますか？

ここで実際のコンテキストが欠落しているのかもしれませんが、コンポーネントはより簡単なAPIを提供するようです。

それでは、ディレクティブを使用し続けなければならない理由は何ですか？

Angular 2はすべてがコンポーネントであると述べているので、1.5から2への簡単な移行に向けて作業することは、今後コンポーネントのみを使用する意味がありませんか？

過去に、たとえば自動検索テキストボックスを作成するためにディレクティブを使用しましたが、コンポーネント内でこれを行うべきではない理由はありませんか？そして、作成した他のコンポーネント内でこのコンポーネントを再利用できますか？

angularjsangular-directive
28
Martin

angular docsをコピーするだけです。

コンポーネントを理解する

Angularでは、コンポーネントは、コンポーネントベースのアプリケーション構造に適した、より単純な構成を使用する特別な種類のディレクティブです。

これにより、Webコンポーネントを使用したり、Angular 2のスタイルのアプリケーションアーキテクチャを使用したりするのに似た方法で、アプリを簡単に作成できます。

コンポーネントの利点：

  • 単純なディレクティブよりも簡単な構成
  • 健全なデフォルトとベストプラクティスを促進する
  • コンポーネントベースのアーキテクチャ向けに最適化
  • コンポーネントディレクティブを記述すると、Angular 2へのアップグレードが容易になります

コンポーネントを使用しない場合：

  • コンパイルおよびリンク機能が利用できないため、DOM操作、イベントリスナーの追加などに依存するディレクティブの場合
  • 優先度、端末、マルチエレメントなどの高度なディレクティブ定義オプションが必要な場合
  • 要素ではなく、属性またはCSSクラスによってトリガーされるディレクティブが必要な場合

もっと読む： https://docs.angularjs.org/guide/component

34
bresleveloper

この記事に触発された、高レベルの視点を使用して説明しようとします（ Angular 2：The Difference between Components and Directives ）。 Angular 2と書かれていますが、AngularJsコンテキストでも役立ちます。

ディレクティブ

コンピューターサイエンスには、「Directive Pragma」という概念があります。ウィキペディアによると：

「コンピュータープログラミングでは、ディレクティブプラグマ（ "pragmatic"から）は、コンパイラー（またはアセンブラーまたはインタープリター）が入力を処理する方法を指定する言語構成体です。指令は適切な言語の一部ではありません」

これは、AngularJSのドキュメントで提供されている説明とよく一致しています。

「高レベルでは、ディレクティブは、DOM要素（属性、要素名、コメント、CSSクラスなど）のマーカーであり、AngularJSのHTMLコンパイラ（$ compile）に指定された動作をそのDOM要素にアタッチするように指示します）、またはDOM要素とその子を変換します。」

したがって、ディレクティブが基本的に行うことは、DOMまたはその動作を変更するために、（Angular）コンパイラーに指示を与えることです。

コンポーネント

AngularJSのコンポーネントは特別なディレクティブです。 AngularJSのドキュメントにあるように、Webコンポーネントを模倣しようとします。

AngularJSでは、コンポーネントは、コンポーネントベースのアプリケーション構造に適した、より単純な構成を使用する特別な種類のディレクティブです。

これにより、Webコンポーネントを使用したり、新しいAngularスタイルのアプリケーションアーキテクチャを使用したりするのと同様の方法で、アプリを簡単に作成できます。

何を使用するか？

個人的には、正当な理由がない限りコンポーネントを使用します。

これらの理由のいくつかは、コンポーネントのAngularJSドキュメントに記載されています：

  • コンパイルおよび事前リンク関数でアクションを実行する必要があるディレクティブは、使用できないため
  • 優先度、端末、マルチエレメントなどの高度なディレクティブ定義オプションが必要な場合
  • 要素ではなく、属性またはCSSクラスによってトリガーされるディレクティブが必要な場合

それを置く別の方法：

ディレクティブは、DOMの要素に動作を付加するメカニズムです。

コンポーネントは、Webコンポーネントの機能を利用できるようにする特定のタイプのディレクティブです。アプリケーション全体で利用可能なカプセル化された再利用可能な要素です。

可能な結論

コンポーネントがディレクティブであることを理解したら、質問はそれほど良くないと思います。 2つの概念は同じ問題を解決しようとするものではありません。コンポーネントは、コンポーネントベースのWebアプリケーションを構築するためにディレクティブを使用できるようにする拡張機能です。

さらに深く

トッドモットは、このトピックについての彼の知識をこの小さな Gist で共有しています。

ディレクティブはDOMを装飾し、動作を追加し、既存のDOMを拡張します。 .component（）を使用する場合、DOMを作成します。directive（）を使用する場合、DOMを装飾します。これが考え方です。

0
Flip