[解決済み] AngularJSの種：JavaScriptを別ファイルにまとめる（app.js, controllers.js, directives.js, filters.js, services.js)

質問

私は angular-seed テンプレートを使ってアプリケーションを構成しています。最初に私はすべてのJavaScriptコードを1つのファイルにまとめました。 main.js . このファイルには、モジュール宣言、コントローラ、ディレクティブ、フィルタ、そしてサービスが含まれていました。アプリケーションはこのようにうまく動作しますが、アプリケーションがより複雑になると、スケーラビリティと保守性が心配になります。私はangular-seedテンプレートがこれらのそれぞれに対して別々のファイルを持っていることに気づきましたので、私のコードを単一の main.js ファイルから、この質問のタイトルで言及された他の各ファイルに私のコードを配布しようと試みました。 app/js ディレクトリにある angular-seed テンプレートに追加します。

私の質問は、アプリケーションを動作させるために依存関係をどのように管理すればよいのでしょうか？既存のドキュメントでは ここで にある既存のドキュメントは、この点に関してあまり明確ではありません。なぜなら、与えられた例のそれぞれが、単一のJavaScriptソースファイルを示しているからです。

私が持っている例では

app.js

angular.module('myApp', 
    ['myApp.filters',
     'myApp.services',
     'myApp.controllers']);

コントローラ.js

angular.module('myApp.controllers', []).
    controller('AppCtrl', [function ($scope, $http, $filter, MyService) {

        $scope.myService = MyService; // found in services.js

        // other functions...
    }
]);

フィルター.js

angular.module('myApp.filters', []).
    filter('myFilter', [function (MyService) {
        return function(value) {
            if (MyService.data) { // test to ensure service is loaded
                for (var i = 0; i < MyService.data.length; i++) {
                    // code to return appropriate value from MyService
                }
            }
        }
    }]
);

サービス.js

angular.module('myApp.services', []).
    factory('MyService', function($http) {
        var MyService = {};
        $http.get('resources/data.json').success(function(response) {
            MyService.data = response;
        });
        return MyService;
    }
);

メイン.js

/* This is the single file I want to separate into the others */
var myApp = angular.module('myApp'), []);

myApp.factory('MyService', function($http) {
    // same code as in services.js
}

myApp.filter('myFilter', function(MyService) {
    // same code as in filters.js
}

function AppCtrl ($scope, $http, $filter, MyService) {
    // same code as in app.js
}

依存関係はどのように管理すればよいですか？

よろしくお願いします。

どのように解決するのですか？

アプリケーションモジュールの再宣言に起因する問題です。

アプリケーションモジュールの宣言（宣言という言葉が正しいかどうかわかりませんが）はこのような感じです。

angular.module('myApp', []).controller( //...

これは、アプリケーションモジュールへの割り当て（割り当てという言葉が正しいかどうかも分かりませんが）がどのようなものかを示しています。

angular.module('myApp').controller( //...

角括弧がないことに注意してください。

というわけで、前者のバージョンでは、1つの と は一度だけ使うべきで、通常は app.js または main.js . その他のすべての関連ファイル - コントローラ、ディレクティブ、フィルタ ... - 後者のバージョンを使用する必要があります。 のない がないものを使うべきです。

ご理解いただけたでしょうか？乾杯!