在AngularJS中注入基本类型

Question

我正在学习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);
                    });
            }
        }
    });

我正在注入$ 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是否为注入基元作为配置数据的问题提供了"标准"解决方案？或者我只使用上述解决方案之一？

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

关于jsfiddle的例子