如何使用 api url 注入 angular 应用程序

Question

我正在构建一个使用节点 api 的 angular 应用程序。我需要一种方法来 bootstrap angular 代码和节点 api 的 url。我希望节点服务器有一个包含自己 url 的配置文件，该文件可能因开发、测试、生产等而异（例如 http://localhost:4000/api 或 http://www.myproductionbox.com/api/v2）。

从服务器配置文件中获取 url 并将其动态合并到 angular 源代码中的最佳方法是什么？

我将 jade 用于 html 模板，我可以使用这些模板来工作：

constants.jade:

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

其中 apiBaseUrl 在配置文件中定义。 Express 应用程序会像这样呈现 jade 文件：

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

这行得通，但感觉不太好。有什么更好的方法？

Answer 1

我们使用内联 <script> 来保存所有这些类型的配置参数。比如

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

这样你的 angular 应用程序仍然可以存在于由 cdn 或其他东西提供的外部文件中。

然后在您的应用程序中，稍作修改即可执行之前的操作。

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

您还可以在您的应用中创建一个 ConfigService 来公开 window.config。那么在你的测试中模拟这些值就更容易了。

如何使用 api url 注入 angular 应用程序

How to inject angular app with api url

config

node.js

angularjs

pug