28

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

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

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

    Object.functionName();

これではなく：

    functionName();

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

4

2 に答える 2

53

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

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

  $scope.phones = [..];

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

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

要するに、AngularJS はコントローラー関数を適切にカプセル化することを可能にするだけでなく、コントローラー関数をグローバル関数として宣言するための、よりシンプルで迅速で汚れた方法も公開します。

于 2012-11-13T15:23:11.713 に答える
19

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';
  }]);

この表記法は、依存性注入の「インライン注釈」の下にあります。

モジュールの一部として登録されているコントローラーをテストするには、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');
  });

});

コントローラをテストするこの方法は、Understanding the Controller Component の「Testing Controllers」にあります。

于 2013-01-08T09:42:43.247 に答える