在 AngularJS 应用程序中使用 DI 时的奇怪行为

Question

由于我公司网站最初的开发方式（ASP .NET w/ascx 页面和代码隐藏），我不得不使用 Angular 的手动引导程序才能在同一页面上获得 2 个 Angular 应用程序。 1 应用程序在任何给定时间控制用户与之交互的主视口（这是应用程序的主体），而另一个应用程序只是用于控制页面顶部的 Header 的简单应用程序。

由于我希望网站的两个区域都使用 Angular，因此我不得不使用 manual bootstrapping 来将 Header 应用程序引导到页面。

这一直很有效，直到最近我需要页面的两个部分都对同一个工厂进行操作，即我想在标题应用程序和主应用程序中显示警报。当我尝试这样做时，我注意到工厂的 2 个实例正在被实例化。我可以从一端修改变量，而它们不会从另一端持续存在。

我的猜测是手动引导标头应用程序会导致 2 个应用程序之间“断开连接”，从而导致我注意到的行为。

这听起来正确吗？还是我可能只是做错了什么？

TL;DR

2 个 AngularJS 应用程序可以共享相同的 Angular 工厂单例还是每个都实例化自己的？我的猜测是 ngApp 和 angular.bootstrap 都实例化了根 $rootScope 并且所有子实体都从它们继承。因此，如果您有 2 个应用和 2 个$rootScopes，尝试将 DOM 事件添加到 1 将不会成功传播到另一个

Answer 1

正确。每个应用程序都会创建一个注入器实例，每个注入器实例都会创建自己的服务实例。

这是一个简单的说明：

angular.module("foo", [])
  .factory("fooSvc", function(){
    return { val: Math.random() };
  });

angular.module('app1', ["foo"])
  .controller('App1Ctrl1', function($scope, fooSvc) {
    $scope.val = fooSvc.val; // 0.9966537940781564
  });

angular.module('app2', ["foo"])
  .controller('App1Ctrl2', function($scope, fooSvc) {
    $scope.val = fooSvc.val; // 0.6884669279679656
  });