web-dev-qa-db-ja.com

グローバルに定義されたAngularJSコントローラーとカプセル化

AngularJSのチュートリアルによると、コントローラー関数はグローバルスコープ内にあります。

http://docs.angularjs.org/tutorial/step_04

コントローラ関数自体は自動的にカプセル化されたスコープに解析されますか、それともグローバルスコープ内にありますか？独自の$ scopeへの参照が渡されることは知っていますが、関数自体は単にグローバルスコープ内にあるようです。明らかにこれは将来問題を引き起こす可能性があり、私は経験と教育を通じてカプセル化することを学びました。さらに、それらがグローバルスコープ内にある場合、このように参照されるオブジェクト内にカプセル化することはベストプラクティスとは見なされません。 ：

    Object.functionName();

これよりも：

    functionName();

グローバルスコープの汚染で発生する問題（つまり、関数のオーバーライドなど）を防止するため

javascriptangularjsencapsulation
28
Andrew Rhyne

AngularJSは、コントローラー関数を登録する2つの方法をサポートしています-グローバルにアクセス可能な関数（このチュートリアルでは、このフォームを参照できます）として、またはモジュール（一種の名前空間を形成する）の一部として。モジュールの詳細については、こちらをご覧ください： http://docs.angularjs.org/guide/module しかし、簡単に言うと、次のようなモジュールにコントローラーを登録します。

angular.module('[module name]', []).controller('PhoneListCtrl', function($scope) {

  $scope.phones = [..];

  $scope.orderProp = 'age';
});

AngularJSは多くの例でコントローラーを宣言する短いグローバル関数形式を使用していますが、この形式は簡単なサンプルに適していますが、実際のアプリケーションでは使用しないでください。

つまり、AngularJSは、コントローラー関数を適切にカプセル化することを可能にするだけでなく、それらをグローバル関数として宣言する、よりシンプルで迅速かつダーティーな方法を公開します。

53
pkozlowski.opensource

pkozlowski-opensource で答えられるように、モジュールの一部としてコントローラーを登録できます。

ミニファイが必要な場合は、リストの実際の関数の前に変数名を指定するだけで、これを拡張できます。

angular.module('[module name]', []).
  controller('PhoneListCtrl', ['$scope', function($scope) {

    $scope.phones = [..];
    $scope.orderProp = 'age';
  }]);

これは「縮小」後も同じように機能します。

angular.module('[module name]', []).
  controller('PhoneListCtrl', ['$scope', function(s) {

    s.phones = [..];
    s.orderProp = 'age';
  }]);

この表記は、「インライン注釈」の Dependency Injection にあります。

モジュールの一部として登録されているコントローラーをテストするには、angularにコントローラーを作成するように依頼する必要があります。次に例を示します。

describe('PhoneListCtrl test', function() {
  var scope;
  var ctrl;

  beforeEach(function() {
    module('[module name]');
    inject(function($rootScope, $controller) {
      scope = $rootScope.$new();
      ctrl = $controller('[module name]', {$scope: scope});
    });
  });

  it('should be ordered by age', function() {
    expect(scope.orderProp).toBe('age');
  });

});

このコントローラーのテスト方法は、「コントローラーのテスト」の コントローラーコンポーネントについて にあります。

19
user1