Question

我们使用服务对后端服务进行HTTP调用，并在我们的控制器中注入该服务。该服务取决于地区。我们根据用户的区域决定使用哪种服务。有没有办法用一些限定符来标记服务，然后可能使用这个限定符将适当的服务注入我们的控制器？

Answer 1

在AngularJS中有提供程序的概念，它允许您在将组件注入其他服务，控制器等之前以某种方式配置组件。配置发生在应用程序的配置阶段。

AngularJS中的提供程序是可以注入其他组件的组件的最通用方法。工厂和服务等其他设施只是供应商之上的语法糖。

请注意，如果限定符在运行时更改，则提供程序不是正确的选项。您希望使用可能具有getInstance（限定符）函数的工厂或服务（单例）返回正确的组件。这样做的缺点是你需要提供限定符，并以手动方式处理实例化。

我创建了一个小例子，展示了一个＆＃39; Region＆＃39;可以根据用户来自的区域配置组件：

＆＃13;

var app = angular.module('MyApp', []);

// Specific region component that will be created using a certain preset.
app.factory('SpecificRegion', [
  function() {
    return function(region) {
      var specificRegion = region;
      this.getName = function() {
        return specificRegion;
      }
    }
  }
]);

// The object returned from the $get factory function is available to other
// components as 'Region'.
app.provider('Region', function RegionProvider() {
  var userRegion = 'NO_REGION';

  // Configuration interface for the provider
  this.setRegion = function(region) {
    userRegion = region
  }

  // Actual factory function which configures a component based
  // on a qualifier.
  // It would also be possible to return different components, not only
  // one configured a certain way. Dependency injection for factories
  // is available at this point.
  this.$get = ['SpecificRegion',
    function regionFactory(SpecificRegion) {
      return new SpecificRegion(userRegion);
    }
  ];
});

// Application config phase:
// Configure the region component to behave based on a qualifier.
// The qualifier could come from anywhere, e.g $window.userRegion
app.config(['RegionProvider',
  function(RegionProvider) {
    RegionProvider.setRegion('EMEA');
  }
]);

// Bringing it all together ...
app.controller('MainCtrl', ['$scope', 'Region',
  function($scope, Region) {
    $scope.regionName = Region.getName();
  }
]);

＆＃13;

.region {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp">

  <div ng-controller="MainCtrl">
    <b>Hello from:</b>  <span class="region">{{ regionName }}<span>
  </div>
  
</div>

＆＃13;

＆＃13; 关于plunker的可编辑版本：Region Component

有没有办法在Angular中执行DI时指定限定符？

1 个答案: