如何基於域或主機應用程序動態更改Angularjs服務上的API端點

Question

我有使用Angularjs和Web API的MVC Web應用程序，這兩個應用程序都發布在不同的域中。 每次我提交代碼更改時，TFS都會發布MVC應用程序和Web API，並使用web.config轉換它會更改Web配置連接和應用程序密鑰以指向開發人員，生產或測試。

現在我正在使用angular我有一個服務，指向API端點做一些事情，例如登錄。

...

function loginService($http, $q) {

        var baseUri = "http://localhost/"

        var service = {
            login: login,
           ...
        };

        return service;


        function login(user, password) {
            var deferred = $q.defer();
            $http({ method: 'POST', url: baseUri + '/api/tokens',
...

正如您所看到的，baseUri設置為localhost，但我希望它對於生產環境類似於var baseUri = "http://production/"並且用於測試baseUri = "http://testing/" 。 所以baseUri的變化取決於TFS發布的內容。

請記住，托管MVC應用程序的域與WebAPI不同，因此我無法檢查角度范圍的域並構建基URI。

謝謝

Answer 1

你能否在MVC應用程序的域上進行切換並基於它為API構建URI的哪一個？

所以類似於：

switch (MVCdomain) {
    case "http://production/": baseUri = "http://APIproduction/"; break;
    case "http://testing/": baseUri = "http://APItesting/"; break;
}

可能會將其封裝在自己的endpointService中，您可以將其注入loginService或任何其他需要它的服務，如下所示：

(function () {
    angular.module('app').factory('endpointService', function ($location) {
        return {
            getAPIEndpoint: function () {
                var endpoint = '';
                switch ($location.host()) {
                    // test if MVC app is in prod/test/local and determine what API endpoint should be called
                    case 'ProdDomainP.com': endpoint = 'ProdDomainAPIP.com'; break;
                    case 'TestDomainP.com': endpoint = 'TestDomainAPIP.com'; break;
                }
                return endpoint;
            }
        }
    });
})();

這將是您注入其他服務的服務，以確定您調用的API端點，如下所示：

function loginService($http, $q, endpointService) {

    var baseUri = endpointService.getAPIEndoint();

    var service = {
        login: login,
       ...
    };

    return service;


    function login(user, password) {
        var deferred = $q.defer();
        $http({ method: 'POST', url: baseUri + '/api/tokens',
    ...

Answer 2

我也想嘗試這樣做。 所以我沒有在我的角度應用程序中硬編碼api端點，在我引導角度之前，我在JavaScript中進行服務調用以獲取端點。 在服務器端（web api），控制器從web.config讀取以獲取角度應用程序將使用的端點，並將它們作為JSON返回。 然后，在我引導角度之前，在端點返回到JavaScript之后（通過本機js promise或角度承諾），我設置了一個包含所有端點的全局對象var。 在角度中，有一個端點服務公開此全局端點對象。 最后，當設置端點對象時，我引導角度應用程序。 這可以確保在角度運行之前設置端點並嘗試使用端點。

它很糟糕，需要有一個存在於角度之外的全局端點對象，但這是我能想到的唯一方法，允許使用web.config進行轉換，而不必在js中對URL端點進行硬編碼