AngularJS：依存関係を追加する（インライン配列対インジェクション）

Question

GitHub（https://github.com/spring-projects/spring-boot）で実際のSpringブートプロジェクトが見つかりました。アプリケーションは、ユーザーが説明と一緒にアイテムのリストを作成することができます。リスト上の項目も削除する機能があります。このプロジェクトは、AngularJSを使用してSPA（シングルページアプリケーション）に自分自身を公開しようとする試みでした。

コードは、注入を使用して定義されたコントローラとファクトリに依存関係を追加します。

1. ：今

   var AppController = function($scope, Item) { 
       Item.query(function(response) { 
        $scope.items = response ? response : []; 
       }); 
   
       $scope.addItem = function(description) { 
        new Item({ 
        description: description, 
        checked: false 
        }).$save(function(item) { 
        $scope.items.push(item); 
        }); 
        $scope.newItem = ""; 
       }; 
   
       $scope.updateItem = function(item) { 
        item.$update(); 
       }; 
   
       $scope.deleteItem = function(item) { 
        item.$remove(function() { 
        $scope.items.splice($scope.items.indexOf(item), 1); 
        }); 
       }; 
       }; 
   
       AppController.$inject = ['$scope', 'Item']; 
       angular.module("myApp.controllers").controller("AppController", AppController); 
   

   コントローラや工場への依存関係を追加するには、2つの他の方法がある（私が間違っているなら、私を修正）：ここでは、この実装を使用しています「controller.js」と呼ばれる例クラスですインライン配列

2. 暗黙インジェクション

私の視点は、私は、コードを注入し、そのすべての依存関係を持つアプリケーションを取ると書き換えることができるということでしょうC ontrollerとfactoryの定義には、インライン配列手法を使用して依存関係が追加されます。ここではインライン配列を使用して、同じ「controller.js」が、次のとおりです。

angular.module("myApp.controllerModule").controller("AppController", ['$scope', 'Item', function($scope, Item){ 
Item.query(function(response) { 
    $scope.items = response ? response : []; 
}); 

$scope.addItem = function(description) { 
    new Item({ 
     description: description, 
     checked: false 
    }).$save(function(item) { 
     $scope.items.push(item); 
    }); 
    $scope.newItem = ""; 
}; 

$scope.updateItem = function(item) { 
    item.$update(); 
}; 

$scope.deleteItem = function(item) { 
    item.$remove(function() { 
     $scope.items.splice($scope.items.indexOf(item), 1); 
    }); 
}; }]); 

私はそうしようとしたとき、私のコードは、元のコードのように動作しません。私はそれが構文エラーかどうか、または異なるスタイルのアプリケーションにいくつかの重要な違いがあるかどうかはわかりません。なぜこれが動作していないのですか？

Answer 1

2つのコードサンプルでわかる唯一の違いは、モジュールの名前です。あなたはエラーメッセージを提供しないので、モジュールが注入されるべきすべてのファイルでmyApp.controllersをmyApp.controllerModuleに変更していないと仮定します。

Answer 2

ng-annotateという引数名からこれらの注釈を自動生成することができます。これは、ほとんどのプロジェクトで使用する必要があります。依存関係を手動で複製することはあまり実用的ではありません。