考虑以下jfiddle http://jsfiddle.net/bchapman26/9uUBU/29/
//angular.js example for factory vs service
var app = angular.module('myApp', ['module1', 'module2']);
var service1module = angular.module('module1', []);
service1module.factory('myService', function() {
return {
sayHello: function(text) {
return "Service1 says \"Hello " + text + "\"";
},
sayGoodbye: function(text) {
return "Service1 says \"Goodbye " + text + "\"";
}
};
});
var service2module = angular.module('module2', []);
service2module.factory('myService', function() {
return {
sayHello: function(text) {
return "Service2 says \"Hello " + text + "\"";
},
sayGoodbye: function(text) {
return "Service2 says \"Goodbye " + text + "\"";
}
};
});
function HelloCtrl($scope, myService) {
$scope.fromService1 = myService.sayHello("World");
}
function GoodbyeCtrl($scope, myService) {
$scope.fromService2 = myService.sayGoodbye("World");
}
我有2个模块(模块1和模块2)。 这两个模块1和模块2定义了一个名为为myService服务。 这似乎内角创建为myService名称冲突时,两个模块导入对myApp。 看来AngularJs刚刚使用第二服务定义,而不警告您可能的问题。
非常大的项目(或一般只是重用模块)的名称将为冲突的风险,这可能是难以调试。
有没有办法与模块名称前缀名称,这样的名称冲突不会发生?
截至今日,AngularJS模块不提供任何形式的命名空间中,将防止在不同的模块对象之间的碰撞。 原因是,一个AngularJS应用程序有一个适用于所有对象的名称不尊重模块名单一注射器。
该AngularJS开发指南说:
要管理的依赖创造的责任,每个角应用程序有一个注射器。 该注射器是一种服务定位器,负责建设和相关的查询。
正如你所提到的,可注入的模块到你的主/应用模块时产生讨厌的错误。 当碰撞发生他们是沉默的,获奖者由哪个是最后一个模块注入确定。
因此,没有,有没有一个内置的避免这些冲突的方法。 也许这将发生在未来。 对于大型应用程序,其中这个问题就变得更容易,你是正确的,命名约定是你最好的工具。 考虑属于一个模块或功能区域的对象是否会使用短前缀。
您可以通过使用一个约定来命名你的模块,使他们始终是唯一的避免这种情况。
一种方法是看其他语言如何做到这一点。 例如在Java类的“全名”是基于文件的,它是在文件夹的名称。例如,如果你有在文件夹MyArtStuff称为Bitmap.java Java文件,类的全名会是MyArtStuff.Bitmap
原来AngularJS让你拥有点(。)为您的模块名称的一部分,所以你基本上可以使用名称约定。
例如,如果一个开发人员创建一个名为脚本“的MainPage \ Module1.js”“ModuleA”模块就应该命名他们的模块“MainPage.Module1.ModuleA”。 因为每个路径和文件名是在您的应用程序的唯一那么你的模块名称将是独一无二的。
你只需要得到你的开发人员遵守这个约定。
注意为Rockallite指出,这不会与服务,控制器等具有多个模块的同名帮助。 但是你可以使用一个类似的方法来结果和前缀这些元素的名称为好。
理想的情况是AngularJS将对命名空间,并在未来它可能。 在此之前,我们能做的最好的是做什么的开发人员已经所作所为超过40年被发明之前的命名空间和前缀我们的内容,我们可以最好的。
不幸的是,没有namespacing
中AngularJS。 一个解决方案是使用prefix
(另一种解决方案可能是这个 !)。 请看下面的例子:
// root app const rootApp = angular.module('root-app', ['app1', 'app2']); // app 1 const app1 = angular.module('app1', []); app1.controller('app1.main', function($scope) { $scope.msg = 'App1'; }); // app2 const app2 = angular.module('app2', []); app1.controller('app2.main', function($scope) { $scope.msg = 'App2'; })
<!-- angularjs@1.7.0 --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script> <!-- root app --> <div ng-app="root-app"> <!-- app 1 --> <div ng-controller="app1.main"> {{msg}} </div> <!-- app 2 --> <div ng-controller="app2.main"> {{msg}} </div> </div>
定义你想要的服务是从模块上的控制器。
service2Module.controller("ServiceTwoCtrl", function(myService, $scope) {});