在 AngularJS 中注入原始类型答案

【问题标题】：Injecting a primitive type in AngularJS在 AngularJS 中注入原始类型
【发布时间】：2013-07-29 22:36:26
【问题描述】：

我现在正在学习如何使用 AngularJS。我基本上已经掌握了 Angular 处理依赖注入的方式，但是我找不到答案。

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

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);
                    });
            }
        }
    });

我正在注入 $http 服务，所以我可以模拟它进行测试。但是，我在课堂上硬编码了我的 Web 服务的根 URL。理想情况下，我想将此 URL 与服务类分离，并将其作为依赖项注入。但是，我看不到将字符串或其他原语注入角度工厂函数的方法。理想情况下，我希望代码如下所示：

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 并将该服务注入WebBasedService 模块，然后调用urlProvider.Url 或类似的。这似乎有点臭：只为一个配置数据创建一个全新的服务似乎有点矫枉过正。我什至可以想象我可能会创建一个是字符串的服务，如下所示：

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

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

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

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

【问题讨论】：

标签： javascript angularjs dependency-injection angularjs-service

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

扩展上面的（很棒的）答案——这正是我需要的线索——对于我们这些喜欢命名函数的人来说，这里的风格略有不同。我一直在想如何为 AGES 做到这一点，所以干杯马克！！

 angular.module('myModule', [])
   .constant('rootUrl','http://localhost:3001')
   .factory('dataService', ['$http', 'rootUrl', dataServiceImplementation])
   .controller('MainController', ['$scope', 'dataService', mainController])

【讨论】：