javascript - 在 AngularJS 中注入(inject)原始类型

Question

我目前正在学习 AngularJS。我基本上已经掌握了 Angular 处理依赖项注入(inject)的方式，但有一个空白我找不到答案。

假设我有一项服务可以根据用户的查询从网络上检索数据；它可能看起来像这样:

var webBasedServiceModule = angular.module('WebBasedService', []);

webBasedServiceModule
    .factory('webBasedService', function ($http) {
        var rootUrl = "http://example.com/myApi?query=";
        return {
            getData: function(query) {
                return $http.get(rootUrl + query)
                    .then(function(httpCallbackArg) {
                        return doSomething(httpCallbackArg);
                    });
            }
        }
    });

我正在注入(inject) $http 服务，所以我可以模拟它进行测试。但是，我已经在类中硬编码了我的 Web 服务的根 URL。理想情况下，我想将此 URL 与服务类分离，并将其作为依赖项注入(inject)。但是，我看不到将字符串或其他原语注入(inject) Angular 工厂函数的方法。我希望代码看起来像这样:

var webBasedServiceModule = angular.module('WebBasedService', []);

webBasedServiceModule
    .factory('webBasedService', function ($http, rootUrl) {
        return {
            getData: function(query) {
                return $http.get(rootUrl + query)
                    .then(function(httpCallbackArg) {
                        return doSomething(httpCallbackArg);
                    });
            }
        }
    });

我能看到的一个解决方案是创建一个 UrlProviderService 并将该服务注入(inject) WebBasedService 模块，然后调用 urlProvider.Url 或相似的。这似乎有点臭:只为一个配置数据创建一个全新的服务似乎有点矫枉过正。我什至可以想象我可能会创建一个是字符串的服务，如下所示:

var urlServiceModule = angular.module('UrlService', []);

urlServiceModule
    .factory('rootUrl', function () {
        return "http://example.com/myApi?query=";
    });

不过，这似乎是对服务概念的滥用。

AngularJS 是否为将基元作为配置数据注入(inject)的问题提供了“标准”解决方案？还是我只使用上述解决方案之一？

Answer 1

您可以使用 .constant()注入(inject)您的配置。

var app = angular.module("app", []);

app.constant("rootUrl", "http://www.example.com");

app.factory('webBasedService', function ($http, rootUrl) {
    return {
        rootUrl: rootUrl
    }
});

app.controller("MyCtrl", ["$scope", "webBasedService", function ($scope, webBasedService) {
    $scope.rootUrl = webBasedService.rootUrl;
}]);

Example on jsfiddle