从虚拟目录或 Web 根目录以全局方式引用资源？

Question

假设我有一个 MVC/WebAPI/AngularJS 站点，我在本地运行，例如;

localhost/Test/

然后我想搬到那里去

www.test.com

虽然在本地，但我有很多对以下格式的各种目录（jsfiles 等）的引用（在 JS 或 HTML 文件中）

app.directive('rpdbSpinner', function() {
    return {
        restrict: 'E',
        **templateUrl: '/Test/templates/directives/spinner.html',**
        scope: {
            isLoading:'='
        }
    }
})

当 updating/web 发布时，我必须将所有内容更改为：

app.directive('rpdbSpinner', function() {
    return {
        restrict: 'E',
        **templateUrl: '/templates/directives/spinner.html',**
        scope: {
            isLoading:'='
        }
    }
})

我可以手动执行此操作（这是我一直在做的），但是项目越大，就越难。当然，我可以只更改一次，然后在发布阶段排除这些文件 (web.config/rest)，但我仍然觉得我的做法是错误的。据我所知，使用“~/”对普通 HTML/JS 文件不起作用，而且我不能真正使用它...

无论是在虚拟目录中还是在项目的根目录中，是否有任何映射到全局路径的建议？

谢谢:)

Answer 1

Using "~/" wouldn't work on plain HTML/JS files as far as I'm aware, and this I can't really use it...

是的，但您可以将其作为变量注入到您的主服务器端服务网页中：

<script>
    var baseUrl = ... get the base url from the server using ~/
</script>

然后在您的外部脚本中简单地将相关 URL 与它连接起来。就静态 html 文件而言，它可能会有点问题。您可以通过一些特殊的服务器端处理程序为他们提供服务，这些处理程序将负责注入此逻辑。

Answer 2

如果您只关心获取站点的 root/base url，以便您可以将其附加到您想要的其他 url，您可以简单地使用 / 作为url.

的第一个字符

var getUsersUrl =  "/api/users";

如果您想要的不仅仅是应用程序根目录（例如：特定 urls（使用 mvc 辅助方法构建，例如 Url.RouteUrl等）

你不应该像那样硬编码你的应用程序基本路径。您可以在 razor 视图中使用 Url.Content 或 Url.RouteUrl 辅助方法来为应用程序库生成 url。它会负责正确构建 url 而不管你当前的 page/path。一旦你得到这个值，将它分配给一个 javascript 变量并在你的其他 js 代码中使用它来构建你的其他 url。 始终确保使用 javascript 命名空间以避免全局 javascript 变量可能出现的问题。

因此在您的剃刀视图（布局文件或特定视图）中，您可以这样做。

<script> var myApp = myApp || {}; myApp.Urls = myApp.Urls || {}; myApp.Urls.baseUrl = '@Url.Content("~")'; myApp.Urls.userListUrl = '@Url.Action("Index","User")'; </script> <script src="~/Scripts/NonAngularJavaScript.js"></script> <script src="~/Scripts/AngularControllerForPage.js"></script> <script> var a = angular.module("app").value("appSettings", myApp); </script>

在您的 angular 控制器中，您可以像这样访问它，

var app = angular.module("app", []); var ctrl = function (appSettings) { var vm = this; console.log(appSettings.Urls.userListUrl); vm.baseUrl = appSettings.Urls.baseUrl; //build other urls using the base url now var getUsersUrl = vm.baseUrl + "api/users"; console.log(getUsersUrl); }; app.controller("ctrl", ctrl)

您也可以在数据服务、指令等中访问它

在您的非 angular java 脚本文件中。

// With the base url, you may safely add the remaining url route. var urlToJobIndex2= myApp.Urls.baseUrl+"jobs/GetIndex";

Answer 3

您可以使用 module.constant 创建您可以使用的注射剂。

app.constant("URL_BASE", "/Test");

app.directive('rpdbSpinner', function(URL_BASE) {
    return {
        restrict: 'E',
        **templateUrl: URL_BASE + '/templates/directives/spinner.html',**
        scope: {
            isLoading:'='
        }
    }
})

如果您在注册指令之前注册它，您也可以使用 module.value。

有关详细信息，请参阅 AngularJS Module Guide -- configuration。

从虚拟目录或 Web 根目录以全局方式引用资源？

Referencing resources in a global way either from a virtual directory or the web root?

html

asp.net-mvc

root

virtual-directory

angularjs