web-dev-qa-db-ja.com

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

AngularJSには多くのコンポーネントがあることに気づいたとき、ディレクティブについていくつか読んでいて、ディレクティブとコンポーネントの違いは何なのかと思っていました。

関数コンポーネント、タイプコンポーネント、サービスコンポーネント、フィルターコンポーネント、プロバイダーコンポーネントなどがあります。次に、モジュールコンポーネントは、ディレクティブ、サービス、フィルター、プロバイダー、テンプレート、グローバルAPIで構成されるコンポーネントであることがわかりました。 、およびモックのテスト。それは物事をより混乱させる傾向がありました。 Angularドキュメントに記載されているコンポーネントの種類の違いを説明している）に「コンポーネント」の定義が見つかりませんでした。

では、AngularJSの「コンポーネント」とは正確には何でしょうか。コードの再利用可能なブロックのように単純なものですか？

ちなみに、私は現在Angularバージョン1.4.2を使用しています。

angularjsangularjs-components
9
James Drinkard

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/

16
Stefan Norberg

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モジュールパターンの詳細 に関する優れた記事を次に示します。

8
James Drinkard