如何使用 api url 注入 Angular 应用程序答案

【问题标题】：How to inject angular app with api url如何使用 api url 注入 Angular 应用程序
【发布时间】：2016-01-20 23:47:41
【问题描述】：

我正在构建一个使用节点 api 的 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 应用程序像这样渲染翡翠文件：

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

这可行，但感觉很hacky。有什么更好的方法？

【问题讨论】：

标签： angularjs node.js pug config

【解决方案1】：

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

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

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

然后在您的应用中，您只需稍作修改即可执行您之前所做的操作。

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

您还可以在您的应用中创建一个ConfigService，以公开window.config。然后更容易在测试中模拟出这些值。

【讨论】：