Whats the better way to identify the context path in Angular JS

Question

I have my web application deployed to tomcat with an applicatio context. For example my URL looks something like this.

http://localhost:8080/myapp

myapp - is the application context here.

Now in an Angular service if i want to call a webservice say getusers. My URL should be this /myapp/getusers. But I want to avoid hardcoding the application context as it might change from one deployment to other. I have managed to figureout the contextpath from $window.location.pathname but it looks very stupid. Is there a betterway?

FYI I am using Spring MVC for restful services.

score 12 · Answer 1 · answered Sep 02 '13 at 14:54

12

What I have done is declared a variable in the main jsp file. Then that variable will be available throughout the angular application.

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

This code should be written in header before including other JavaScript libraries.

answered Sep 02 '13 at 14:54

Omer Arshad

485
6
14

How to access this variable in an Angular Service ? – Jess Jan 21 '19 at 17:23

score 7 · Answer 2 · answered Jun 16 '15 at 12:14

I'm also using tomcat and Spring MVC. Using relative url in JavaScript will do the trick.

For doing this you just need to remove the / at the begining of REST url. so that your url starts from the current url in your browser.

replace $resource('/getusers') with $resource('getusers')

score 3 · Answer 3 · answered Jun 10 '13 at 15:21

3

Inject the $location service to your controller.

 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'

answered Jun 10 '13 at 15:21

Oliver

4,401
2
19
18

5

If you are using angular in a non-single page application, this method is not reliable. e.g. calling ${contextPath}/api/delegation/apps. The method above has no idea if the application has been redeployed to the root context or pages are called from various nested paths. – Matthew Payne Jul 09 '14 at 14:35

score 2 · Answer 4 · answered Dec 28 '17 at 18:05

2

In Angular 2 (if using hashbang mode). Below code can be used to form the url.

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

Inspired from the answer of @jarek-krochmalski

answered Dec 28 '17 at 18:05

Eljo George

55
1
11

Jarek Krochmalski · Answer 5 · 2013-12-10T10:19:08.963

1

if you are using hashbang mode, with "#", you can do something like that:

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

edited Dec 10 '13 at 10:19

answered Dec 10 '13 at 10:00

Jarek Krochmalski

97
1
6

score 1 · Answer 6 · answered Mar 17 '17 at 10:41

For AngularJS $http service you are good to go with url : 'getusers', as follows:

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

score 0 · Answer 7 · edited Aug 20 '17 at 03:05

0

In general, you should use injection in your controller like the following:

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());

....

}]);

edited Aug 20 '17 at 03:05

Charles

1,104
21
29

answered Aug 20 '17 at 02:38

mapleTiger

1
1

Whats the better way to identify the context path in Angular JS

7 Answers7

Linked