为什么2个不同的模块在添加为依赖于第三个模块时可以相互访问？

I am having 3 modules in my AngularJS App, e.g. main, home and product. main module having home and product module as dependencies (ng.module('main', ['home', 'product'])) while home and product modules are not having any dependencies(ng.module('product', []) ng.module('phome', [])), still product module can access home module service? WHY???

我在AngularJS App中有3个模块,例如主要,家庭和产品。主模块具有家庭和产品模块作为依赖项(ng.module('main',['home','product']))而home和product模块没有任何依赖项(ng.module('product',[] )ng.module('phome',[])),仍然产品模块可以访问家庭模块服务?为什么???

Below is sample code of my application, which is having the same scenario and same issue. And this is JSfiddle Link.

下面是我的应用程序的示例代码,它具有相同的方案和相同的问题。这是JSfiddle Link。

<!DOCTYPE html>
<html ng-app="main">
<body ng-controller="MainController as mainController">
{{mainController.name}}
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
(function (ng) {
    var homeModule = ng.module('home', []);
    homeModule.service("HomeService", [function () {
        var homeService = this;
        homeService.getName = function () {
            return "Home Service";
        }
    }]);
    var productModule = ng.module('product', []);
    productModule.service("ProductService", ["HomeService", function (HomeService) {
        var productService = this;
        productService.getName = function () {
            return "Product Service - " + HomeService.getName();
        };
    }]);
    var mainModule = ng.module('main', ['home', 'product']);
    mainModule.controller("MainController", ['ProductService', function (ProductService) {
        var mainController = this;
        mainController.name = ProductService.getName();
    }]);
})(angular);
</script>
</body>
</html>

2 个解决方案

#1

The answer is pretty simple. Angular doesn't scope the contents of a module to the module itself. I've read somewhere that there have been discussions of adding this functionality, but I haven't yet seen it implemented.

答案很简单。 Angular不会将模块的内容范围限定为模块本身。我已经在某处读过有关添加此功能的讨论,但我还没有看到它已实现。

To make matters worse, controllers applied to one imported module will be unique within your app. As an example, I was once using angular-ui bootstrap and someone on my team added an AlertController. We were pretty confused when the controller was never hit, but it was because angular-ui had already defined the controller.

更糟糕的是,应用于一个导入模块的控制器在您的应用中将是唯一的。作为一个例子,我曾经使用angular-ui bootstrap,我的团队中有人添加了AlertController。当控制器从未被击中时,我们非常困惑,但这是因为angular-ui已经定义了控制器。

So it's not just a question of visibility, but also of maintainability and naming.

因此,这不仅仅是可见性问题,还包括可维护性和命名问题。

Everything defined on a module is public.

模块上定义的所有内容都是公开的。

#2

It works because the dependency of home module is added to the main module and as main is only calling the product service therefore it should be only dependent on product module.

它的工作原理是因为主模块的依赖性被添加到主模块中,并且主要仅调用产品服务,因此它应该仅依赖于产品模块。

If you remove the home module dependency form the main module (which should be the case) it stops working.

如果从主模块中删除主模块依赖关系(应该是这种情况),它将停止工作。

TLDR; The down side of not adding the home dependency to product module is that it would not working by only adding the product dependency but you have to add the home dependency as well to work with product service.

TLDR;不向产品模块添加主依赖关系的缺点是它不能仅通过添加产品依赖关系来工作,但您必须添加主依赖关系以使用产品服务。

jsfiddle

#1