27

私はangular.jsを学んでいますが、いつ使用すべきか、app.controller("MyCtrl",...)いつ使用すべきか疑問に思ってfunction MyCtrl($scope){...}います。

この例では、2 つのアプローチに大きな違いは見られません (プランカーへのリンク)。

index.html :

<body ng-app="myApp">

    <div ng-controller="FirstCtrl as app1">
        <button class="btn" ng-model="app1.count"
                            ng-click="app1.increment()">
        Click to increment</button>
        {{ app1.count }}
    </div>

    <div ng-controller="SecondCtrl">
        <button class="btn" ng-model="count"
                            ng-click="increment()">
        Click to increment</button>
        {{ count }}
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
    <script type="text/javascript" src="example.js"></script>
</body>

example.js :

var app = angular.module("myApp", []);

app.controller("FirstCtrl",function () {
    this.count = 0;
    this.increment = function (){
        this.count = this.count + 1;
    }
});

function SecondCtrl($scope){
    $scope.count = 0;
    $scope.increment = function (){
        $scope.count = $scope.count + 1;
    }
}
4

3 に答える 3

17

モジュールベースのコントローラー宣言を使用する主な理由は次のとおりです。

  • ミニファイのサポート。依存性注入が失敗するため、コードを縮小すると、2 番目のアプローチは機能しなくなります。
  • JavaScript のグッド プラクティスは、グローバル名前空間の汚染を最小限に抑えることであり、そこで最初の構文が役立ちます。
于 2013-09-20T08:46:00.900 に答える
13

両方の使用法で、推奨されるアプローチは、それを注入$scopeして使用することです ( this2 番目のアプローチでも実行できる を使用するのではなく)。

アプローチ 1 と 2 の違いは、ミニフィケーションをサポートする方法にあります。前者では、注入された引数の配列を指定できますが、後者では変更し$injectます。これはもちろん少し技術的ですが、縮小化をサポートすることを強くお勧めします。ドキュメントの縮小に関する注意を参照してください。

前者もグローバルスコープで関数に名前を付けません。これは一般的に良いことです!

于 2013-09-20T08:47:12.623 に答える
12

通常、アプリケーションを作成するときは、Angular スコープの初期状態を設定する必要があります。

Angular は (JavaScript の Function#apply の意味で) コントローラー コンストラクター関数を新しい Angular スコープ オブジェクトに適用し、初期スコープ状態を設定します。これは、Angular がコントローラ タイプのインスタンスを作成しないことを意味します (コントローラ コンストラクタで new オペレータを呼び出すことにより)。コンストラクターは、常に既存のスコープ オブジェクトに適用されます。

モデル プロパティを作成して、スコープの初期状態を設定します。例えば：

function GreetingCtrl($scope) {
  $scope.greeting = 'Hola!';
}

GreetingCtrl コントローラーは、テンプレートで参照できるグリーティング モデルを作成します。

注: ドキュメント内の例の多くは、グローバル スコープでの関数の作成を示しています。これはデモンストレーションのみを目的としています。実際のアプリケーションでは、アプリケーションの Angular モジュールの .controller メソッドを次のように使用する必要があります。

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingCtrl', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

また、配列表記を使用して、Angular が提供する $scope サービスに対するコントローラーの依存関係を明示的に指定していることにも注意してください。

詳しくはこちらをお読みください

于 2013-09-20T08:47:36.017 に答える