在angularjs中以单独文件组织自定义指令,服务的最佳方式

时间:2014-05-10 02:33:55

标签: angularjs optimization dependency-injection

所以我正在尝试将我在我的应用程序中使用的自定义指令/服务组织在一个单独的文件中,每当我编写新的应用程序时,我都可以将其包含在我的控制器所在的文件中。这应该允许我使用跨应用程序和服务的服务。控制器只是像其他js文件一样包含它们。目前我正在使用这种方式:

angular.module('commonModule',[]).service('myService',function(){});

要将此服务包含在其他应用中,我会这样做 - angular.module('anotherModule',['commonModule']) 除了包含具有'commonModule'服务的js文件。

这是正确的方法吗?如果我将已抽象的服务之间的依赖关系转换为单独的文件,它们是否仍然可以在上述安排中工作?

我尝试了这样的服务间依赖:

angular.module('commonModule',[]).service('myService1',function(){});
angular.module('commonModule',[]).service('myService2',function(myService1){});

以上是失败的。什么是更好的方式?

------------------- UPDATE: 正如Sten所说,我正在重新宣布该模块。我纠正了同样的问题。现在我按照下面的方式进行,但是我没有得到一致的结果。我仍然在一个应用程序上获得依赖性错误,而它适用于另一个应用程序,两者在其模块依赖项中都包含相同的“commonModule”。这是一种预期的行为/更好的方式吗?我还在想弄清楚。将更新它原来的结果。

var commonModule = angular.module('commonModule',[]);

commonModule.service('myService1', function(){});
commonModule.service('myService2', function(myservice1){});

更新2

所以上述方法有效。我遇到的错误是我的错误。因此,除了上面的commonModules声明之外,我还可以将它们包含在我的应用程序中,如下所示。

angular.module('newModule',['commonModule']);

虽然现在有效。我仍然会指出上述方法存在的一些问题,这些问题使得大门敞开,以便更好,更清洁。

如果在上述方法中,您的服务依赖于某些依赖项,例如 - 如果您正在创建上传服务,则必须在主文件中添加fileupload模块(在我的情况下,我使用了angular-file-upload)。或者需要像ngSanitize这样的模块。

因此,如果您有具有依赖关系的服务,那么您只能做一个简单的插件和放大器。玩上述方法。在较大的多个应用中,这将是一个问题,万一你错过了。

1 个答案:

答案 0 :(得分:0)

问题是你要两次定义模块。模块在代码组织中非常有用,我们大量使用它们 - 它们在单元测试中特别有用,因为我们只能包含我们需要进行单元测试的部分代码而不是其他内容。

angular.module('commonModule1',[]).service('myService1',function(){});
angular.module('commonModule2',['commonModule1']).service('myService2',function(myService1){});

如果我们不在项目中包含模块作为代码组织模式,我们还能如何包含NgRoute,ui.router或ui.bootstrap?复制,粘贴?

更新:

angular.module('commonModule',[])

  .service('myService1', function(){});

  .service('myService2', function(myservice1){});

无需为应用程序引入全局变量,只需命名空间即可!