AngularJSには多くのコンポーネントがあることに気づいたとき、ディレクティブについていくつか読んでいて、ディレクティブとコンポーネントの違いは何なのかと思っていました。
関数コンポーネント、タイプコンポーネント、サービスコンポーネント、フィルターコンポーネント、プロバイダーコンポーネントなどがあります。次に、モジュールコンポーネントは、ディレクティブ、サービス、フィルター、プロバイダー、テンプレート、グローバルAPIで構成されるコンポーネントであることがわかりました。 、およびモックのテスト。それは物事をより混乱させる傾向がありました。 Angularドキュメントに記載されているコンポーネントの種類の違いを説明している)に「コンポーネント」の定義が見つかりませんでした。
では、AngularJSの「コンポーネント」とは正確には何でしょうか。コードの再利用可能なブロックのように単純なものですか?
ちなみに、私は現在Angularバージョン1.4.2を使用しています。
Angularコンポーネントはバージョン1.5で導入されました。
コンポーネントは、ディレクティブの簡略化されたバージョンです。 DOM操作(リンクやコンパイルメソッドではない)を行うことはできず、「置換」も行われません。
コンポーネントは「制限:E」であり、(関数ではなく)オブジェクトを使用して構成されます。
例:
app.component('onOffToggle', {
bindings: {
value: '=',
disabled: '='
},
transclude: true,
template: '<form class="form-inline">\
<span ng-transclude></span>\
<switch class="small" ng-model="vm.value" ng-disabled="vm.disabled"/>\
</form>',
controllerAs: 'vm',
controller: ['$scope', function($scope) {
var vm = this;
$scope.$watch("vm.disabled", function (val) {
if (!val) {
vm.value = undefined;
}
})
}]
});
さらに読む: https://toddmotto.com/exploring-the-angular-1-5-component-method/
OOP Java指向の背景から来て、モジュールを含むさまざまなAngularjsコンポーネントを区別しようとしていました。モジュールについて見つけた最良の答えは Angularjsモジュール化への13ステップ
AngularJSのコンテキストでは、モジュール化とは、タイプではなく機能ごとに編成することです。比較すると、時間= [60、60、24、365]と金額= [1、5、10、25、50]の配列が与えられた場合、どちらも同じ型ですが、その機能は完全に異なります。
つまり、コンポーネント(コントローラー、フィルター、ディレクティブ)は、現在存在する場所ではなく、モジュール内に存在することになります。
つまり、1.4xコードの場合、コンポーネントは再利用可能なコードのブロックですが、バージョン1.4xのコンテキストでは、モジュールパターンは、Angularjsのこれらのコードブロックに対する繰り返し構造であると見なしますが、バージョン1.5までは真のコンポーネントとは見なされませんでした。これらのモジュールの実装方法は、コンポーネントのタイプを提供します。つまり、コントローラーの実装構造は、それが理にかなっている場合、サービスまたはプロバイダーと区別します。また、Angularjsのドキュメントでこれに対処する必要があったと思います。
Angularjsコードで繰り返される基本的なパターンを次に示します。
(function () {
// ... all vars and functions are in this scope only
// still maintains access to all globals
}());
JavaScriptモジュールパターンの詳細 に関する優れた記事を次に示します。