9

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

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

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

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

4

3 に答える 3

15

Angular コンポーネントはバージョン 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/

于 2016-02-23T08:42:11.027 に答える
7

OOP Java 指向の背景を持つ私は、モジュールを含むさまざまな Angularjs コンポーネントを区別しようとしていました。モジュールについて私が見つけた最良の答えは、Angularjs モジュール化への 13 ステップだったと思います

AngularJS のコンテキストでは、モジュール化は型ではなく関数ごとに編成されます。比較すると、配列 time = [60, 60, 24, 365] と money = [1, 5, 10, 25, 50] が与えられた場合、どちらも同じ型ですが、機能はまったく異なります。

つまり、コンポーネント (コントローラー、フィルター、ディレクティブ) は、現在存在している場所ではなく、モジュールに存在します。

そうです、私たちの 1.4x コードでは、コンポーネントは再利用可能なコードのブロックですが、バージョン 1.4x のコンテキストでは、バージョン 1.5 までは真のコンポーネントとは見なされませんでしたが、バージョン 1.4x のコンテキストでは、モジュール パターンはこれらのコード ブロックに対する Angularjs の繰り返し構造と見なされます。これらのモジュールが実装される方法によって、コンポーネントのタイプが決まります。つまり、コントローラーの実装構造は、それが意味をなす場合、サービスまたはプロバイダーと区別されます。また、Angularjs のドキュメントはこれに対処するべきだったと思います。

Angularjs コードで繰り返される基本的なパターンを次に示します。

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

これは、 Javascript モジュール パターンの詳細に関する優れた記事です。

于 2015-11-05T18:52:27.140 に答える