AngularJSシード：JavaScriptを個別のファイルに入れる（app.js、controllers.js、directives.js、filters.js、services.js）

私はアプリケーションを構築するために山形シードテンプレートを使用しています。最初に、すべてのJavaScriptコードを単一のファイルに入れましたmain.js。このファイルには、モジュール宣言、コントローラー、ディレクティブ、フィルター、サービスが含まれています。アプリケーションはこのように正常に動作しますが、アプリケーションがより複雑になるため、スケーラビリティとメンテナンス性が心配です。Angular-seedテンプレートにはこれらのファイルごとに個別のファイルがあることに気付いたので、コードを単一のmain.jsファイルからこの質問のタイトルに記載されている他の各ファイルに配布しようとしましたapp/jsが、angularのディレクトリで見つかりました-シードテンプレート。

私の質問は、アプリケーションを機能させるために依存関係をどのように管理するのですか？既存の文書が見つかりました。ここでは例の各番組に、単一のJavaScriptソース・ファイルを指定したので、非常にこの点では明らかではありません。

私が持っているものの例は：

app.js

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

controllers.js

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

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

        // other functions...
    }
]);

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

services.js

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

main.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( //...

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

そのため、角括弧付きの旧バージョンは、通常、app.jsまたはで1回だけ使用する必要がありますmain.js。他のすべての関連ファイル（コントローラー、ディレクティブ、フィルターなど）は、角かっこなしの後者のバージョンを使用する必要があります。

私はそれが理にかなっていると思います。乾杯！

アプリケーション（filters, services, controllers）のさまざまな部分をさまざまな物理ファイルに配置する場合は、次の2つのことを行う必要があります。

1. 自分のapp.jsファイルまたは各ファイルでそれらの名前空間を宣言します（より適切な用語がないため）。
2. 各ファイルでそれらの名前空間を参照してください。

だから、あなたapp.jsはこのようになります：

angular.module('myApp', ['external-dependency-1', 'myApp.services', 'myApp.controllers'])
.run(function() {
   //...

})
.config(function() {
  //...
});

そして個々のファイルで：

services.js

angular.module('myApp.services', []); //instantiates
angular.module('myApp.services') //gets
.factory('MyService', function() { 
  return {};
});

controllers.js

angular.module('myApp.controllers', []); //instantiates
angular.module('myApp.controllers')      //gets
.controller('MyCtrl', function($scope) {
  //snip...
})
.controller('AccountCtrl', function($scope) {
  //snip...
});

これらすべてを1つの呼び出しに組み合わせることができます。

angular.module('myApp.controllers', []) 
.controller('MyCtrl', function($scope) {
 //snip...
});    

重要な部分は、再定義すべきではないということですangular.module('myApp')。これにより、コントローラーをインスタンス化するときに上書きされる可能性があります。

myApp.servicesまだ定義していないため、エラーが発生します。これまでに行ったことは、すべての初期定義を1つのファイルに入れてから、別のファイルで使用することです。あなたの例のように私は入れます：

app.js

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

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

これでエラーは解消されますが、コメントの1つに記載されているEduard Gamonalの記事を読んでおく必要があります。