角度1.5のコンポーネントとディレクティブ

Question

Angular 1.5の大きな変更点は、componentsのサポートを取り巻いています。

component('myComponent', { 
    template: '<h1>Hello {{ $ctrl.getFullName() }}</h1>', 
    bindings: { firstName: '<', lastName: '<' }, 
    controller: function() { 
    this.getFullName = function() { 
     return this.firstName + ' ' + this.lastName; 
    }; 
    } 
}); 

これはすべて問題ありませんが、これがディレクティブとどのように異なるかはわかりません。 従来のカスタムディレクティブに比べてcomponentsを使用するメリットは何ですか？また、Angular 1.5とAngular 2のコンポーネントは同じですか？

Answer 1

.componentは、コードを記述するのに適しています。なぜなら、デベロッパーは角度2（Webコンポーネントと同様）のようなコードを書くことができるからです。基本的に、componentを使用してコードを書くときは、角度2にアップグレードする方が簡単です。機能はほぼ同じです。可能であれば、.componentは常にを使用する必要があります。

変更（抽出物）

• 成分代わりbinding性
• コンポーネントを使用して単離された範囲簡略機能
• のオブジェクトを使用して宣言されているいくつかの悪い習慣ではないであろう
• 単離された範囲で常に可能であれば
• より簡単でわかりやすい構成
• ライフサイクルフック：（$onInit()、$onChanges(changesObj)、$doCheck()、$onDestroy()、$postLink()）

素晴らしい記事はここにある： https://toddmotto.com/exploring-the-angular-1-5-component-method

場合は使用しない（ドキュメントから）コンポーネント：

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

私は、あなたが見つけることができる最高の説明は、公式ガイドであると、信じている：https://docs.angularjs.org/guide/component。すべての変更、変更の理由、およびコンポーネントの深い理解をカバーします。

Answer 2

@rekŻelechowskiのように、.directiveは.directiveを置き換えません。 です。

.directive（）ではできない.component（）では何もできません。 「コンポーネント」の作成方法を簡略化することを目的としています。これはおおよそUIの指示を意味します。

いつ利用できますか？

• テンプレートレスたい場合は、リンク機能（あなたはめったにはずが）
• が必要な場合：

  は明らかにあなたが/それを使用してはならないことはできませんいくつかのケースがあります指令、例えばテンプレートまたは別のスコープを持たないng-click

あなたの他のすべての指令については、これはうまくいくはずです。ボイラープレートに保存され、エラーが発生しにくいため、使用するのがより簡単です。

すべての新しい機能がありますが、.component（）は.directive（）を完全に置き換えることはできません。

Answer 3

ディレクティブは置き換えられず、ここに入るのは多すぎるかもしれないさまざまな理由で変更されたばかりです。ディレクティブとコンポーネント間の違いはあるものの良いアイデアを得るために

https://docs.angularjs.org/guide/component

、私はそのよりよいが参照していることを見つける：角度のドキュメントは、あなたがそこにドキュメントを見始めることができるので、かなりよくそれらを説明しますAngular 2.0のドキュメント1.5の角度は、2.0までの橋渡しをしてくれました。より大きな変更の1つは$ scopeを取り除くことです。もう1つはコンポーネントを提供するための方法としてコンポーネントを提供しています（Angular 2.0でよく使われています）。

すべての変更点は、2.Xの世界に移行するために1.Xの世界を準備することです。その世界には、コンポーネント（彼らの心にある要素レベルの指示）、構造的な指示と属性の指示があります。それぞれを理解するのに役立つ下記のリンクを参照してください（上記のリンクを参照）。

http://learnangular2.com/components/

https://angular.io/docs/ts/latest/guide/structural-directives.html

https://angular.io/docs/ts/latest/guide/attribute-directives.html