93

我正在使用angular-seed模板来构建我的应用程序。最初，我将所有 JavaScript 代码放入一个文件中，main.js. 该文件包含我的模块声明、控制器、指令、过滤器和服务。该应用程序像这样工作得很好，但是随着我的应用程序变得更加复杂，我担心可伸缩性和可维护性。我注意到 angular-seed 模板中的每一个都有单独的文件，因此我尝试将我的代码从单个main.js文件分发到该问题标题中提到的每个其他文件中，并在angularapp/js的目录中找到-种子模板。

我的问题是：如何管理依赖项以使应用程序正常工作？此处找到的现有文档在这方面不是很清楚，因为给出的每个示例都显示了一个 JavaScript 源文件。

我所拥有的一个例子是：

应用程序.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;
    }
);

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

请注意缺少方括号。

所以，前一个版本，一个带方括号的版本，应该只使用一次，通常在你的app.jsormain.js中。所有其他相关文件——控制器、指令、过滤器……都应该使用后一个版本，即不带方括号的版本。

我希望这是有道理的。干杯!

于 2013-05-27T21:53:46.430 回答
12

如果您想将应用程序的不同部分 ( filters, services, controllers) 放在不同的物理文件中，您必须做两件事：

  1. app.js在您或每个文件中声明这些名称空间（因为没有更好的术语） ；
  2. 请参阅每个文件中的这些名称空间。

所以，你app.js会是这样的：

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

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

在每个单独的文件中：

服务.js

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

控制器.js

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

所有这些都可以合并为一个调用：

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

重要的是你不应该重新定义angular.module('myApp'); 这会导致它在您实例化控制器时被覆盖，可能不是您想要的。

于 2015-04-16T16:11:56.030 回答
3

您收到错误是因为您尚未定义myApp.services。到目前为止，我所做的是将所有初始定义放在一个文件中，然后在另一个文件中使用它们。就像你的例子一样，我会输入：

应用程序.js

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

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

这应该可以消除错误，尽管我认为您应该阅读其中一条评论中提到的Eduard Gamonal文章。

于 2013-05-27T14:21:32.590 回答