AngularJS如何在两个独立应用间共享单个Service？

没问题，这完全可以实现！你现在遇到的问题根源是把modalService直接注册到了portfolioBuilder这个特定应用模块里，而accountSettings模块没法直接访问另一个模块内的服务。解决办法很简单——把modalService抽成一个独立的可复用Angular模块，然后让两个应用模块都依赖这个共享模块就行了。

具体步骤： #

1. 重构modalService为独立模块 #

修改你的modalService.js，把它定义成一个新的模块（比如叫modalServices），并且确保它依赖ui.bootstrap（因为用到了$modal）：

(function () { 
  'use strict';
  // 创建独立的modalServices模块，依赖ui.bootstrap
  var app = angular.module('modalServices', ['ui.bootstrap']); 
  app.service('modalService', ['$modal', '$log', function ($modal, $log) { 
    // 原有的modalService逻辑保持不变
    ... all the modalService functions ... 
  }]); 
})();

2. 更新两个应用模块的依赖 #

让portfolioBuilder和accountSettings模块都依赖我们刚创建的modalServices模块：

修改PortfolioBuilderController.js：

(function () { 
  'use strict'; 
  // 添加modalServices到依赖数组
  var app = angular.module('portfolioBuilder', ['filters', 'ngAnimate', 'ui.bootstrap', 'modalServices']); 
  app.controller('PortfolioBuilderController', [ 
    '$window', '$scope', '$log', '$timeout', 'PortfolioBuilder', 'modalService', 
    function ($window, $scope, $log, $timeout, PortfolioBuilder, modalService) { 
      $scope.portfolioBuilder = PortfolioBuilder; 
      ... all the portfolioBuilder controller functions ... 
    }
  ]); 
})();

修改AccountSettingsController.js：

(function () { 
  'use strict'; 
  // 添加modalServices到依赖数组，现在直接用modalService即可，无需modalService2
  var app = angular.module('accountSettings', ['filters', 'ngAnimate', 'ui.bootstrap', 'modalServices']); 
  app.controller('AccountSettingsController', [ 
    '$window', '$scope', '$log', '$timeout', 'AccountSettings', 'modalService', 
    function ($window, $scope, $log, $timeout, AccountSettings, modalService) { 
      $scope.accountSettings = AccountSettings; 
      ... all the accountSettings controller functions ... 
    }
  ]); 
})();

3. 更新服务中的依赖引用 #

把两个服务里的modalService2替换成共享的modalService：

修改PortfolioBuilderService.js：

(function () { 
  'use strict';
  var app = angular.module('portfolioBuilder'); 
  app.factory('PortfolioBuilder', [ 
    '$rootScope', '$window', '$timeout', '$log', '$http', 'modalService', 
    function ($rootScope, $window, $timeout, $log, $http, modalService) { 
      ... all the portfolioBuilder service functions ... 
    }
  ]); 
})();

修改AccountSettingsService.js：

(function () { 
  'use strict';
  var app = angular.module('accountSettings'); 
  app.factory('AccountSettings', [ 
    '$rootScope', '$window', '$timeout', '$log', '$http', 'modalService', 
    function ($rootScope, $window, $timeout, $log, $http, modalService) { 
      ... all the accountSettings service functions ... 
    }
  ]); 
})();

4. 清理冗余文件 #

现在你可以直接删除modalService2.js了，两个应用都会使用同一个共享的modalService。

为什么这样可行？ #

AngularJS的模块系统允许你创建可复用的独立模块，其他模块只需要在依赖数组中声明这个模块，就能访问其中注册的服务、指令等。这种方式不仅解决了代码重复的问题，还让你的服务逻辑更易于维护——以后要修改modal相关逻辑，只需要改动一个文件即可。

内容的提问来源于stack exchange，提问作者Brian Rice