如何使用API​​ URL注入Angular應用

Question

我正在構建使用節點API的角度應用程序。 我需要一種使用節點api的網址來引導角度代碼的方法。 我希望節點服務器具有一個保存自己的URL的配置文件，該URL可能會根據開發，測試，生產等（例如http://localhost:4000/api或http://www.myproductionbox.com/api/v2而有所不同http://www.myproductionbox.com/api/v2 ）。

從服務器配置文件獲取該URL並將其動態合並到有角度的源代碼中的最佳方法是什么？

我將翡翠用於html模板，使用這些模板我可以得到一些工作：

constants.jade ：

|angular.module('myApp', []).value('baseUrl', '#{apiBaseUrl}')

其中apiBaseUrl在配置文件中定義。 express應用程序按以下方式呈現玉文件：

app.get('/constants', function(req, res) {
    res.render('constants.jade', { apiBaseUrl: settings.api.baseUrl })
})

這行得通，但感覺很笨拙。 有什么更好的方法？

Answer 1

我們使用內聯<script>來保存所有這些類型的配置參數。 如

<script>
  window.config = {
    baseUrl: '#{apiBaseUrl}'
  };
</script>

這樣，您的角度應用程序仍可以存在於CDN或其他內容提供的外部文件中。

然后，在您的應用程序中，您需要做一些稍作修改的操作。

angular.module('myApp', []).value('baseUrl', window.config.baseUrl)

您還可以在應用程序中創建一個ConfigService ，以公開window.config 。 然后可以更輕松地在測試中模擬出這些值。