6

Al momento sto imparando a utilizzare AngularJS. Ho ampiamente preso in considerazione il modo in cui Angular gestisce l'iniezione di dipendenza, ma c'è un divario per il quale non riesco a trovare una risposta.Iniezione di un tipo primitivo in AngularJS

Dire che ho un servizio che recupera i dati dal web, in base alla query dell'utente; potrebbe assomigliare a questo:

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

Sto iniettando il servizio http $, quindi posso deridere per il test. Tuttavia, ho l'URL di root del mio servizio web hard-coded nella classe. Idealmente, mi piacerebbe disaccoppiare questo URL dalla classe di servizio e iniettarlo come dipendenza. Tuttavia, non vedo un modo per iniettare una stringa o un'altra primitiva in una funzione di fabbrica angolare. Vorrei idealmente come il codice a guardare come questo:

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

Una soluzione che posso vedere è solo per creare un UrlProviderService e iniettare tale servizio nel modulo WebBasedService, quindi chiamare urlProvider.Url o simili. Sembra un po 'puzzolente: sembra eccessivo creare un servizio completamente nuovo solo per un pezzo di dati di configurazione. Posso anche immaginare che io possa creare un servizio che è una stringa, in questo modo:

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

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

Questo mi sembra un abuso del concetto di servizio però.

AngularJS offre una soluzione "standard" al problema dell'iniezione di primitive come dati di configurazione? Oppure uso solo una delle soluzioni sopra?

risposta

9

È possibile utilizzare .constant() per l'iniezione nella configurazione.

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

0

Ampliando la (fantastica) risposta di cui sopra - che era esattamente l'indizio di cui avevo bisogno - qui c'è un sapore leggermente diverso per quelli di noi che preferiscono funzioni con nome. Ero stato sconcertante su come fare questo per AGES, quindi evviva Mark !!

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