Javascript 在AngularJS中为服务调用使用相对路径

我有以下代码，在部署到测试服务器之前一直运行良好：

$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。这是有道理的，我知道很多解决方法

---

我想知道的是引用服务URL的正确方式，这种方式在角度上是可移植和可维护的。

使用$location服务-它将返回您的路径、哈希和服务器地址。。你需要的一切！您可以调用

$location.path（）+“/GetUserList”

或类似的功能

---

请参见此处：

使用$location服务-它将返回您的路径、哈希、服务器地址。。你需要的一切！您可以调用

$location.path（）+“/GetUserList”

或类似的功能

---

请参见此处：

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

您可以有如下基本路径：

<base href="/application_root/" />

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

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

。。。然后将其注入如下服务：

<base href="/application_root/" />

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

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

---

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

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

您可以有如下基本路径：

<base href="/application_root/" />

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

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

。。。然后将其注入如下服务：

<base href="/application_root/" />

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

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

---

不过这只是我的意见。对应用程序执行最简单的操作。

我建议定义一个包含全局配置的模块，然后您可以在应用程序中传递该配置：

// Module specific configuration
angular.module('app.config')
  .value('app.config', {
    basePath: '/' // Set your base path here
  });

然后，由于AngularJS依赖项注入，您可以从应用程序中的任何位置访问此功能：

// Make sure your config is included in your module
angular.module('app', ['app.config']);

// Access your config e.g. in a controller
angular.module('app')
  .controller('TestCtrl', ['$scope','app.config', function($scope, config){

    // Use config base path to assemble url
    $scope.url = config.basePath + 'GetUserList';
    ...
  }]);

---

每当基本路径发生更改时（例如，当您更改到另一台服务器或主机时），您只需在全局配置中更改它，就完成了。

我建议定义一个包含全局配置的模块，然后您可以在应用程序中传递该配置：

// Module specific configuration
angular.module('app.config')
  .value('app.config', {
    basePath: '/' // Set your base path here
  });

然后，由于AngularJS依赖项注入，您可以从应用程序中的任何位置访问此功能：

// Make sure your config is included in your module
angular.module('app', ['app.config']);

// Access your config e.g. in a controller
angular.module('app')
  .controller('TestCtrl', ['$scope','app.config', function($scope, config){

    // Use config base path to assemble url
    $scope.url = config.basePath + 'GetUserList';
    ...
  }]);

---

每当基本路径发生更改时（例如，当您更改到另一台服务器或主机时），您只需在全局配置中更改它，即可完成。

我无法使用

标记，因为我的应用程序是在另一个源区的弹出窗口中动态创建的。我正在考虑这个线程中的其他选项，使用basePath变量，并在每个

$http、ng src、templateUrl等中使用它

但这有点开销，在生成xhr之前构建了一个拦截器来更改每个url

var app = angular.module("myApp", []);

app.config(["$httpProvider", function($httpProvider) {
    $httpProvider.interceptors.push('middleware');
}]);

app.factory('middleware', function() {
    return {
        request: function(config) {
            // need more controlling when there is more than 1 domain involved
            config.url = "//example.com/api/" + config.url
            return config;
        }
    };
});

app.controller("Ctrl", ["$http", function($http) {
    $http.get("books"); // actually requestUrl = http://example.com/api/books
}])

还有html

<div ng-include src="'view'">
    <!-- actually src = http://example.com/api/view -->
</div>



但我确实建议使用
标记，除非您使用的是window.popup（）
我无法使用
标记，因为我的应用程序是在另一个源区域的弹出窗口中动态创建的。我正在考虑这个线程中的其他选项，使用basePath变量，并在每个
$http、ng src、templateUrl等中使用它

但这有点开销，在生成xhr之前构建了一个拦截器来更改每个url

var app = angular.module("myApp", []);

app.config(["$httpProvider", function($httpProvider) {
    $httpProvider.interceptors.push('middleware');
}]);

app.factory('middleware', function() {
    return {
        request: function(config) {
            // need more controlling when there is more than 1 domain involved
            config.url = "//example.com/api/" + config.url
            return config;
        }
    };
});

app.controller("Ctrl", ["$http", function($http) {
    $http.get("books"); // actually requestUrl = http://example.com/api/books
}])

还有html

<div ng-include src="'view'">
    <!-- actually src = http://example.com/api/view -->
</div>



但是我确实建议使用
标记，除非您使用的是window.popup（）
公认的答案对我有帮助。我正在使用我的MVC应用程序。
我采取了一个额外的步骤，以便我的baseUrl可以在我的angular控制器中用于web api调用或访问模板

使用ng init设置baseUrl（从服务器端填充的值）

被接受的答案帮助了我。我正在使用我的MVC应用程序。
我采取了一个额外的步骤，以便我的baseUrl可以在我的angular控制器中用于web api调用或访问模板

使用ng init设置baseUrl（从服务器端填充的值）

在ng init函数中，传递一个参数，该参数包含虚拟目录的值（存储在Request.ApplicationPath中的int ASP.NET）

在ng init函数中，传递一个参数，该参数包含虚拟目录的值（存储在Request.ApplicationPath中的int ASP.NET）

我也有类似的问题
我只用MVC页面中的一行代码就可以解决这个问题

<base href="~/" />


我也有类似的问题
我只用MVC页面中的一行代码就可以解决这个问题

<base href="~/" />

一种简单的方法，我使用ASP.NET Razor（Web MVC），因此我获得了应用程序路径，并将其作为应用程序的基础

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>

<meta name="description" content="">
@{ var appPath = Request.ApplicationPath.ToString();
    if (!appPath.EndsWith("/")) {
        appPath = appPath + "/";
    }
}
<base href="@appPath" />


标题
@{var appPath=Request.ApplicationPath.ToString（）；
如果（！appPath.EndsWith（“/”）{
appPath=appPath+“/”；
}
}
一种简单的方法，我使用ASP.NET Razor（Web MVC），因此我获得了应用程序路径，并将其作为应用程序的基础

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>

<meta name="description" content="">
@{ var appPath = Request.ApplicationPath.ToString();
    if (!appPath.EndsWith("/")) {
        appPath = appPath + "/";
    }
}
<base href="@appPath" />


标题
@{var appPath=Request.ApplicationPath.ToString（）；
如果（！appPath.EndsWith（“/”）{
appPath=appPath+“/”；
}
}
我只想将所有URL设置为相对的

url: "../GetUserList",

反而

对，
进行硬编码对我来说听起来不是个好主意，因为您可能需要将此环境更改为环境，并且对虚拟目录名具有依赖性。
我只需要将所有URL设置为相对的

url: "../GetUserList",

反而

对我来说，
的硬编码听起来不是个好主意，因为您可能需要将此环境更改为环境，并且对虚拟目录名具有依赖性。
$location.path（）似乎始终为空。我只是像这样把它注入我的控制器，或者我需要做什么？var saController=function（$scope，$http，$location）{}很抱歉响应太晚，但在我们的应用程序中，我们将$locationProvider配置为