在AngularJS中使用相对路径进行服务调用

Question

我有以下代码，在部署到测试服务器之前，它工作正常：

$scope.getUserList = function (userName) {
    $http({
        method: "get",
        url: "GetUserList",
        params: { userName: userName }
    }).
        success(function (data) {
            $scope.users = data;
        }).
        error(function () {
            alert("Error getting users.");

问题是我已部署到虚拟目录，并且下面的调用试图从服务器根目录访问GetUserList。这是有道理的，而且我知道许多解决方法。

我想知道的是一种 正确的 方式，该方式以可移植且可在Angular中维护的方式引用服务URL。

Answer 1

我建议在头部使用HTML基本标记，并对与此相关的所有路径进行编码。例如，在ASP.NET中，您可以获取对应用程序基础的引用，该引用可以是站点的根路径，也可以不是站点的根路径，因此，使用基础标记会有所帮助。奖励：它也适用于所有其他资产。

您可以具有如下基本路径：

<base href="/application_root/" />

…然后类似“ foo / bar.html”的链接实际上就是/application_root/foo/bar.html。

我喜欢使用的另一种方法是将命名链接放在标题中。我经常在一个位置有一个API根，而在其他地方有一个指令模板根。然后，在头中添加一些这样的标签：

<link id="linkApiRoot" href="/application_root/api/"/>
<link id="linkTemplateRoot" href="/application_root/Content/Templates/"/>

…然后在模块中使用$ provide获取链接href并将其公开给服务和指令，如下所示：

angular.module("app.services", [])
    .config(["$provide", function ($provide) {
        $provide.value("apiRoot", $("#linkApiRoot").attr("href"));
    }]);

…然后将其注入到这样的服务中：

angular.module("app.services").factory("myAdminSvc", ["apiRoot", function (apiRoot) {
    var apiAdminRoot = apiRoot + "admin/";
    ...

不过只是我的意见。为您的应用程序做最简单的事情。