在Angular JS中识别上下文路径的更好方法是什么答案

【问题标题】：Whats the better way to identify the context path in Angular JS在Angular JS中识别上下文路径的更好方法是什么
【发布时间】：2013-06-06 00:21:01
【问题描述】：

我已将我的 Web 应用程序部署到带有应用程序上下文的 tomcat。例如，我的 URL 看起来像这样。

http://localhost:8080/myapp

myapp - 是这里的应用程序上下文。

如果我想调用网络服务，现在在 Angular 服务中说getusers。我的网址应该是这个/myapp/getusers。但我想避免对应用程序上下文进行硬编码，因为它可能会从一种部署更改为另一种部署。我已经设法从$window.location.pathname 找出上下文路径，但它看起来很愚蠢。有没有更好的办法？

仅供参考，我正在使用 Spring MVC 提供宁静的服务。

【问题讨论】：

标签： angularjs spring-mvc contextpath

【解决方案1】：

我所做的是在主 jsp 文件中声明一个变量。然后该变量将在整个 Angular 应用程序中可用。

<script type="text/javascript">
    var _contextPath = "${pageContext.request.contextPath}";
</script>

此代码应在包含其他 JavaScript 库之前写入标头中。

【讨论】：

如何在 Angular 服务中访问这个变量？

【解决方案2】：

我也在使用 tomcat 和 Spring MVC。在 JavaScript 中使用相对 url 就可以了。

为此，您只需删除 REST url 开头的 /。这样您的 url 从浏览器中的当前 url 开始。

将$resource('/getusers') 替换为$resource('getusers')

【讨论】：

【解决方案3】：

将$location 服务注入您的控制器。

 var path = $location.path(); // will tell you the current path
     path = path.substr(1).split('/'); // you still have to split to get the application context

 // path() is also a setter
 $location.path(path[0] + '/getusers');
 // $location.path() === '/myapp/getusers'

 // ------------------ \\

 // Shorter way
 $location.path($location.path() + '/getusers');
 // $location.path() === '/myapp/getusers'

【讨论】：

如果你在非单页应用中使用angular，这种方法是不可靠的。例如调用 ${contextPath}/api/delegation/apps。上面的方法不知道应用程序是否已重新部署到根上下文或从各种嵌套路径调用页面。

【解决方案4】：

在 Angular 2 中（如果使用 hashbang 模式）。下面的代码可以用来形成url。

document.location.href.substr(0, document.location.href.lastIndexOf("/#")) + "/getusers";

灵感来自@jarek-krochmalski 的回答

【讨论】：

【解决方案5】：

如果你使用 hashbang 模式，加上“#”，你可以这样做：

$location.absUrl().substr(0, $location.absUrl().lastIndexOf("#")) + "/getusers"

【讨论】：

【解决方案6】：

对于 AngularJS $http 服务，您最好使用 url : 'getusers'，如下所示：

$scope.postCall = function(obj) {
            $http({
                method : 'POST',
                url : 'getusers',
                dataType : 'json',
                headers : {
                    'Content-Type' : 'application/json'
                },
                data : obj,
            });
};

【讨论】：

【解决方案7】：

通常，您应该在控制器中使用注入，如下所示：

angular.module("yourModule").controller("yourController", ["$scope", "yourService", "$location", function($scope, yourService, $location){

....
      //here you can send the path value to your model.

      yourService.setPath($location.path());

....

}]);

【讨论】：