我有以下代码，在部署到测试服务器之前运行良好：
$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的正确方法。
我建议在头部使用 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/";
...
不过只是我的看法。为您的应用程序做最简单的事情。
我建议定义一个包含全局配置的模块，然后您可以将其传递给您的应用程序：
// 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';
...
}]);
每当基本路径更改时（例如，当您更改为另一台服务器或主机时），您只需在全局配置中更改它即可。
我无法使用<base>标签，因为我的应用程序是从另一个来源动态地在弹出窗口中创建的。我正在考虑在这个线程中使用其他选项来使用 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>
但我建议您改用<base>标签，除非您使用的是 window.popup()
使用 $location 服务 - 它会返回您的路径、哈希值、服务器地址……您需要的一切！您的电话将是 to$location.path()+"/GetUserList"或类似的东西。
见这里：http ://docs.angularjs.org/guide/dev_guide.services.$location
我有一个类似的问题，我用 MVC 页面中的一行代码解决了它
<base href="~/" />
接受的答案帮助了我。我正在使用 Angular 为我的 MVC 应用程序提供服务。我采取了额外的步骤，以便我的 baseUrl 可以在我的角度控制器中用于 Web api 调用或访问模板。
使用 ng-init 设置 baseUrl（来自服务器端填充值）
<html ng-app="app" ng-controller="AppController">
<head>
<base href="{{baseUrl}}" ng-init="baseUrl = '@Model.BaseUrl'" />
</head>
角度控制器
$scope.manageCustomerGroups = function () {
openDialog($scope.baseUrl + 'content/templates/customerGroups.html');
}
我只会使所有 URL 相对。
url: "../GetUserList",
反而
url: "GetUserList",
硬编码对<base href="/application_root/" /> 我来说听起来不是一个好主意，因为您可能需要将此环境更改为环境，并且依赖于虚拟目录名称。
一种简单的方法，我使用的是 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" />
在 ng-init 函数中传递一个包含虚拟目录值的参数（int ASP.NET 存储在 Request.ApplicationPath 中）。
<div ng-controller="ControllerName" ng-init="init('@Request.ApplicationPath')">
在 Angular 控制器中，在每个 http 调用中使用这个值作为 URL 的前缀。您可以使用此功能来组合路径
function combinePath(path1, path2) {
if (path1 == null) {
return path2;
}
var last = path1.slice(-1);
var first = path2.charAt(0);
if (last == '/' && first == '/') {
path1 = path1.substring(0, path1.length - 1);
}
return path1 + path2;
}