在 AngularJS 中从全局 javascript 变量配置 API

Question

我正在 AngularJS 中构建一个使用 API 和一些参数的 Web 应用程序

var api_params = {
    api_key: "ABCDE12345",
    api_base_url: "/something",
    // ...
}

我正在尝试通过app.value 或app.constant 在我的角度app 中设置这些属性，以便以一种干净的方式拥有它。

app.value('API_Params', {
    // ...
    // ...
});

我试图避免在隐藏输入中设置这些值

<input type="hidden" name="api_key" value="ABCDE12345"/>
<!-- ... ... -->

（我可以使用 angular.element($selector) 检索），并避免对值进行硬编码

app.value('API_Params', {
    api_key: "ABCDE12345",
    api_base_url: "/something",
    // ...
}

但无论我如何寻找或修改代码，总是有错误。

---

这将是我的理想情况：

在我的 HTML 中：

<script>
    var api_params = {
        // ... as seen above
    }
</script>

在我的 Angular 应用中

myWebApp.value('API_Params', "Something clever here to get api_params");

谢谢！

---

更新：我正在努力避免不良做法。如果您认为还有其他合法方法，请发布您的答案和建议。

Answer 1

简单，我只是定义一个全局变量

var api_params = {
    api_key: "ABCDE12345",
    api_base_url: "/something",
    // ...
}

并像这样在 myApp.value 或 myApp.constant 中使用它：

myApp.config("API_Params", api_params)

这将使所有控制器都可以访问它（例如API_Params.api_key）。

---

我的问题是全局 Javascript 变量没有在 AngularJS sn-p 之前定义。也就是说，脚本应按以下顺序定义：

<script>
    var api_params = {
        api_key: "ABCDE12345",
        api_base_url: "/something",
        // ...
    }
</script>
<script src="angular.js"></script>

但是angular.js sn-p 被放在了最上面。与jQuery 或其他库不同，angular.js 不会等待document.ready()

Answer 2

这完全取决于您计划如何使用 api_params。

如果您需要它“生活”在 Angular 的“世界”中，即被您的 Angular 应用程序使用，那么将其设置为值或常量将是一个不错的选择，因为它可以很容易地被您的服务/控制器检索并使用通过您的 $http 服务。

如果您全局需要 api_params 即不仅适用于您的 Angular 应用程序，那么最好将这些参数设置为您的 Angular 应用程序也可以访问的“窗口”或“文档”对象的属性，即

在您的 html 模板中：

window.api_params = {
  api_key: 'any_api_key',
  ...
};

在您的 Angular 应用中：

var app = angular.module('myapp');

app.controller('mycontroller', [$window, function ($window) {
    $window.api_params.api_key = 'new_api_key';
}]);

Answer 3

首先用:而不是=更正你的var定义

var api_params = {
    api_key: "ABCDE12345",
    api_base_url: "/something"
}

试试这样：

myWebApp.constant('API_Params',{
    api_key: "ABCDE12345",
    api_base_url: "/something"
});

Answer 4

app.value('config', {
   "constant1": "value1",
   "constant2": "value2"
});

并通过

访问它

config.constant1

别忘了在控制器中注入config

你可以参考我原来的答案here。