AngularJS如何在2个模块之间配置提供程序



请看我的概念证明:http://plnkr.co/edit/y3pzFv?p=preview。

如何在 2 个模块之间配置提供程序?

简介:我正在尝试概括一项服务并稍微不同地配置多个实例。

现在我有一堆 Angular 服务(工厂),我想推广它们,以便它们可以重用。在我的概念验证中,我试图将AngularJS 1.3应用程序分解为2个模块"bob"和"joe"。每个模块应共享一个提供程序,该提供程序应具有称为 food 的可配置变量。我正在尝试定义一个可重用的服务并为每个模块创建一个单独的实例。

我已经阅读了有关提供程序的 Angular 文档,根据我的理解,提供程序允许您将可配置部分提取到 .config() 中。我做错了什么?我希望鲍勃的食物是香蕉,但第二配置的乔的食物正在覆盖鲍勃的食物。这让我相信食品提供商不会为每个"bob"和"joe"模块创建一个新实例。

我在 AngularJS v1.3.15 上

索引.html

<div ng-controller="BobCtrl">Bob's Food: {{ providerInstance.get() }}</div>
<div ng-controller="JoeCtrl">Joe's Food: {{ providerInstance.get() }}</div>

应用.js

angular.module('shared').provider('Food', function() {
  var _food = 'Default';  
  this.set = function(food) { _food = food; }
  this.$get = function() {
    return {
      get: function()  {
        return _food;
      }
    }
  };
});
angular.module('bob').config(function(FoodProvider) { 
  FoodProvider.set('Banana');
});
angular.module('bob').controller('BobCtrl', function($scope, Food) {
  $scope.providerInstance = Food;
});
angular.module('joe').config(function(FoodProvider) {
  FoodProvider.set('Apple');
});
angular.module('joe').controller('JoeCtrl', function($scope, Food) {
  $scope.providerInstance = Food;
});

因为所有类型的 Angular 提供程序都是单例对象。当您尝试引用提供程序对象时,将使用它们的最新状态。

最新更新