Angularjsのコンポーネントとは何ですか？

Question

私はディレクティブに関するいくつかの読書をしていましたが、ディレクティブとコンポーネントの区別は何か、私はAngularjsに多くのコンポーネントがあることがわかったときに不思議でした。

機能コンポーネント、タイプコンポーネント、サービスコンポーネント、フィルタコンポーネント、プロバイダコンポーネントなどがあります。次に、モジュールコンポーネントは、ディレクティブ、サービス、フィルタ、プロバイダ、テンプレート、グローバルAPI、およびテストモックが含まれます。それは物事をもっと混乱させる傾向がありました。リストされているコンポーネントの種類の違いを説明するAngularドキュメントの "コンポーネント"の定義を見つけることができませんでした。

Angularjsの「コンポーネント」はなんですか？再利用可能なコードブロックのような単純なものですか？

ところで、私は現在、角度バージョン1.4.2を使用しています。

Answer 1

OOP Javaのバックグラウンドの背景から、モジュールを含むさまざまなAngularjsコンポーネントを区別しようとしていました。私は、モジュールについて発見された最良の答えはAngularJS文脈で13 Steps to Angularjs Modularization

た、モジュール化が機能 代わりの種類別組織だと思います。比較するには、与えられた配列time = [60,60,24,365]と money = [1,5,10,25,50]の両方が同じ型ですが、それらの関数は全く異なります。

つまり、あなたのコンポーネント（コントローラ、フィルタ、ディレクティブ）は、今住んでいる場所ではなく、 がモジュールになります。

コンポーネントは再利用可能なコードのブロックですが、javascriptのコンテキストでは、Module PatternはAngularjsのコードブロックの繰り返し構造です。これらのモジュールが実装される方法は、コンポーネントのタイプを提供します。つまり、コントローラーの実装構造によって、それが意味をなされる場合、サービスまたはプロバイダーと区別されます。私はAngularjsの文書がこれに対処していたはずだとも思う。ここで

(function() { 
    // ... all vars and functions are in this scope only 
    // still maintains access to all globals 
}()); 

はJavascript Module Pattern in depthの逸品です。ここ

は、私がAngularjsコードで繰り返し見基本的なパターンです。

Answer 2

角型コンポーネントは、バージョン1.5で導入されました。

コンポーネントは、ディレクティブの簡略化されたバージョンです。 DOM操作（リンクやコンパイル方法ではありません）を行うことはできません。また、「置き換え」も行っていません。

コンポーネントは「restrict：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/