Javascript 在AngularJS中注入基元类型

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

假设我有一个基于用户查询从web检索数据的服务；可能是这样的：

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

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

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

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

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是否为注入原语作为配置数据的问题提供了“标准”解决方案？或者我只是使用上面的一种解决方案吗？

您可以使用它在配置中注入

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

对上述（奇妙的）答案进行扩展-这正是我需要的线索-对于我们这些喜欢命名函数的人来说，这里有一个稍微不同的风格。多年来我一直在琢磨如何做到这一点，所以干杯，马克

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