6

私は現時点でAngularJSの周りに自分のやり方を学んでいます。私は主にAngularが依存性注入を処理する方法を把握していますが、答えが見つからないギャップがあります。AngularJSでプリミティブ型を注入する

私は、ユーザーのクエリに基づいて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); 
        }); 
      } 
     } 
    }); 

一つの解決策はただurlProvider.Urlまたは類似を呼び出し、その後、UrlProviderServiceを作成し、WebBasedServiceモジュールにそのサービスを注入することである:私はこのように見えるように、理想的にコードたいと思います。それはちょっと臭いようです。構成データの1つのためにまったく新しいサービスを作成するのは難しいようです。

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

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

これはしかし、サービスコンセプトの乱用のように思える:私もそうのように、私は、が文字列でサービスを作成するかもしれないと想像することができます。

AngularJSは、プリミティブを構成データとして注入する問題に対する「標準的な」ソリューションを提供していますか?または、私は上記のソリューションの1つを使用していますか?

答えて

9

.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

0

ここに名前の関数を好む人たちのもののためにわずかに異なる味です。私はAGESのためにこれを行う方法を困惑させていたので、賞賛してください!

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