Question

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

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

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

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

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

Answer 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;
}

Answer 2

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

请注意，我为它提供了一个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="">

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

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

2 个答案: