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

【问题标题】：Referencing resources in a global way either from a virtual directory or the web root?从虚拟目录或 Web 根目录以全局方式引用资源？
【发布时间】：2015-12-22 15:57:16
【问题描述】：

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

本地主机/测试/

然后我想搬到那里

www.test.com

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

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

更新/网络发布时，我必须将所有内容更改为：

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

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

有什么建议可以映射到全局路径，无论是在虚拟目录中还是在项目的根目录中？

谢谢:)

【问题讨论】：

在根 html/.Net 页面设置 baseUrl。创建一个用于发布的分支，该分支具有适用于服务器环境的正确 baseUrl。

标签： html angularjs asp.net-mvc root virtual-directory

【解决方案1】：

如果您只是关心获取站点的根/基本 url，以便您可以附加它以获取您所追求的另一个 url，您可以简单地使用 / 作为您的 url 的第一个字符。

var getUsersUrl =  "/api/users";

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

您不应该像这样对您的应用程序基本路径进行硬编码。您可以在 Razor 视图中使用 Url.Content 或 Url.RouteUrl 辅助方法来生成应用程序库的 url。无论您当前的页面/路径如何，它都会正确构建 url。一旦您获得此值，请将其分配给 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>

在您的角度控制器中，您可以像访问它一样，

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";

【讨论】：

这听起来是一个非常好的方法。我只是对此感到困惑： var app = angular.module("app", []);和 var a = angular.module("app").value("appSettings", myApp); .为什么要两次声明“应用程序”？（角度也是新手）
第一个是创建角度模块，第二个（没有空数组作为第二个参数）正在读取它。
这看起来是一个很好的解决方案 - 谢谢。当他们提出问题时，我会继续纠缠你:)
我无法让它正常工作（我知道，我不擅长搞清楚应用程序实例化/调用优先级）。所以我只是在注册我的脚本文件之前启动了一个全局 javascript 变量，我从相关文件中引用了它。不过，你的想法引导我到那里，所以谢谢你:)
全局变量不是一个好主意。尝试使用我在答案中提到的js命名空间。

【解决方案2】：

据我所知，使用“~/”不适用于纯 HTML/JS 文件，而这个我真的用不上……

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

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

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

【讨论】：

【解决方案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。

【讨论】：