93

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

私の質問は、依存関係を管理してアプリケーションを機能させるにはどうすればよいですか? ここにある既存のドキュメントは、この点に関してあまり明確ではありません。与えられた各例は単一の 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...
    }
]);

フィルター.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
}

依存関係を管理するにはどうすればよいですか?

前もって感謝します。

4

3 に答える 3

108

この問題は、すべての個別のファイルでアプリケーション モジュールを「再宣言」したことが原因で発生します。

アプリ モジュールの宣言は次のようになります (宣言が適切な用語かどうかはわかりません)。

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

これは、アプリケーション モジュールへの割り当て (割り当てが正しい用語であるかどうかもわかりません) のようなものです。

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

角かっこがないことに注意してください。

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

それが理にかなっていることを願っています。乾杯！

于 2013-05-27T21:53:46.430 に答える
12

アプリケーションのさまざまな部分 ( ) をさまざまな物理ファイルに入れたい場合は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 つの呼び出しに組み合わせることができます。

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

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

于 2015-04-16T16:11:56.030 に答える
3

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

app.js

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

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

これでエラーは解消されるはずですが、コメントの 1 つで言及されているEduard Gamonalの記事を読む必要があると思います。

于 2013-05-27T14:21:32.590 に答える