javascript - 在 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 标记会有所帮助。奖励:它也适用于所有其他 Assets 。

你可以有一个像这样的基本路径:

<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"));
    }]);

...然后将其注入(inject)到这样的服务中:

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

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