我们应该在哪里存储 JavaScript 调用的服务连接 URL？答案

【问题标题】：Where should we store service connection URL for JavaScript calls?我们应该在哪里存储 JavaScript 调用的服务连接 URL？
【发布时间】：2016-05-03 20:46:15
【问题描述】：

我正在创建一个调用我们托管的 WCF 服务的网站。请注意，URL 是 JS 中的硬编码：

    var config = {
        url: 'http://serverName:8000/MmaWebApiService/CreateCassette',
        method: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: { 'moduleSerialNumbers': 'dataHere' }
    };

我们应该在哪里存储 URL？我认为 web.config 文件会是一个好地方，但我不知道如何访问它。 One suggestion 是这样的：

<img id="ImgHeader" runat="server" src="<%$ ConfigurationSettings.AppSettings["ImagePath"] %>" />

但是，我认为这不适用于使用 AngularJS 的普通 HTML 页面。我对在哪里存储服务 URL 有点茫然，所以我没有在我的 JS 中对它们进行硬编码。例如，如果我们部署到不同的服务器上，我不想在 JS 中查找所有调用并替换服务器名称。我一定错过了一个最佳实践。

【问题讨论】：

这一切都取决于。您可以使用您之前提到的方法。在我的公司，我们使用服务器提供的各种 URL 在主布局中填充一个对象。 You can read from Web.config using ConfigurationManager.AppSettings.
您可以将它们放在一个 .js 文件中并将脚本包含在标题中。在单页应用程序中，我通常将它们存储在 .json 文件中，并在需要时通过 ajax 调用加载它。
Mike：我不认为我可以在 JS 中使用 ConfigurationManager。杰西：很好的提示。我可以试试。谢谢！
你在使用像 gulp 或 grunt 这样的 javascript 任务运行器吗？如果是这样，您可以走app.constant(...) 的路线，然后让您的任务运行者根据您是否运行来确定要做什么，例如gulp dev 或gulp prod
这是基于意见而关闭的事实是荒谬的。有人需要知道如何做某事，但它会被关闭，因为其他人可能有不同的意见。令人沮丧。

标签： javascript angularjs wcf

【解决方案1】：

Angular 允许您在模块设置中定义常量。

angular.module('app').constant(
    ENDPOINT, {
        "URL": 'http://serverName:8000/MmaWebApiService/CreateCassette'
    }
);

你现在有一个常量，可以像往常一样注入到控制器或服务中。

angular.application('app').controller('myCtrl', myCtrl);
myCtrl.$inject['ENDPOINT'];
function myCtrl(ENDPOINT) {
    var myUrl = ENDPOINT.URL;
}

【讨论】：

有趣。我想知道这是否比 Jesse 建议的更好：只需将 URL 放入 JS 文件中。
好吧，如果找不到模块配置，您的 Angular 应用程序将无法启动。如果无法加载外部配置文件，它将运行（尽管效果不佳）。
部署故事怎么样？您如何根据部署到 QA 或 prod 更改 URL？这是手动步骤吗？

【解决方案2】：

由于正确的 URL 是在部署时确定的，因此这是一个部署问题。所以我使用我们的部署工具 (Presto) 在部署过程中修改 URL。。我最终将根 URL 存储在 index.html 中：

请注意，我给了它一个 ID（连接），以便稍后我们的部署应用可以更改它。

然后，在我的 AngularJS 控制器中，我像这样使用它：

        var config = {
            url: rootWebApiUrl + '/api/Cassette',
            method: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: [$scope.state.subId1, $scope.state.subId2, $scope.state.subId3]
        };

我将 Presto 设置为在部署时修改 URL，方法是将 URL 设置为正在部署 Web API 的服务器的名称。

这种方法有一个小问题：index.html 必须能够进行 XML 解析，以便部署应用程序修改它。这意味着我必须更改一些行，如下所示：

必须大写：

<!DOCTYPE html[]>

必须关闭任何元标记（需要关闭正斜杠）：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

ng-view 后面必须有 =””：

<div ng-view="">

我进行了这些更改，但应用程序仍在运行。所以我觉得我很好。

【讨论】：