Wstrzyknięcie prymitywnego typu w AngularJS

Question

W tej chwili uczę się w AngularJS. W dużej mierze muszę poradzić sobie ze sposobem, w jaki Angular radzi sobie z zastrzykiem zależności, ale jest luka, na którą nie mogę znaleźć odpowiedzi.

Powiedz, że mam usługę, która pobiera dane z internetu, na podstawie zapytania użytkownika; Może to wyglądać tak:

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

mam wstrzykiwanie usługę http dolarów, więc mogę go wyśmiewać do testów. Mam jednak główny adres URL mojej usługi internetowej zakodowany na stałe w klasie. Idealnie chciałbym oddzielić ten URL od klasy usługi i wstrzyknąć go jako zależność. Jednak nie widzę sposobu na wstrzyknięcie struny lub innego prymitywu w kątową funkcję fabryczną. I byłoby idealnie jak kod powinien wyglądać tak:

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

Jedno rozwiązanie widzę jest tylko stworzenie UrlProviderService i wstrzyknąć tej usługi do modułu WebBasedService, a następnie zadzwonić urlProvider.Url lub podobny. Wydaje się to trochę śmierdzące: wydaje się, że przesadą jest stworzenie zupełnie nowej usługi tylko dla jednego elementu danych konfiguracyjnych. Mogę sobie wyobrazić, że mógłbym stworzyć usługę, która jest ciągiem znaków, tak jak poniżej:

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

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

To wydaje się nadużywanie pojęcia usług chociaż.

Czy AngularJS oferuje "standardowe" rozwiązanie problemu wstrzykiwania prymitywów jako danych konfiguracyjnych? Czy mogę po prostu użyć jednego z powyższych rozwiązań?

Answer 1

Możesz użyć .constant(), aby wprowadzić swoją konfigurację.

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

Answer 2

Rozwijając na odpowiedź (fantastyczne) powyżej - który był dokładnie taki trop potrzebowałem - oto nieco inny smak dla tych z nas, którzy wolą nazwie funkcji. Zastanawiałem się, jak to zrobić dla AGESa, więc okrzyki Mark!

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