how to pass "question mark" in url javascript

Question

In Angularjs app, i have a url like
http://url.com/my_app/#/store/items.
Now i want to append query string for example,
http://url.com/my_app/#/store/items?page=2.

but in url, javascript encodes the "?" to "%3F" which i don't want. It should remain "?" only in the url as angularjs $location.search() returns nothing for "%3F".

How it can be done ?

Unlearned

Check this w3schools.com/jsref/jsref_encodeuri.asp – Toenail

should the url pattern look like http://url.com/my_app/#/store/items/page/2 instead of http://url.com/my_app/#/store/items?page=2. As it may be more correct to have / pattern instead of ? pattern after the # – Cephalic

no i want to add it in qurystring only.. Its requirement// – Unlearned

why aren't you using $location.search('page',2) to set the query? Or working with routeparams? – Cud

Answer 1

There is not enough details in your question so I will assume that you are using AngularJS routing - or at least the $location service - in non-HTML5 mode. If so, the part after the # character represents your URL from the single-page-application point of view (more about AngularJS here).

If the above assumptions are correct it means that you shouldn't try to add or manipulate the question mark "by hand". Instead you should change the search part of the $location to manipulate query string (part after ?) and the question mark will be added / removed to the final URL as needed.

In your case you could write:

$location.path('/store/items').search('page', 2)

This is assuming that you are manipulating URLs from JavaScript, as stated in your question.

Fearnought

very nice answer! works very well for me and it a lot cleaner than what i did simply because i did not RTFM :D – Imponderable

Definitely the correct answer. Kind of sucks though if you have a prebuilt URL from somewhere else in the app that you now have to parse into 3 values. Ugh... that's angular poop. Owch! – Dammar

@Dammar if you don't want to split the URL, see my answer. – Scabble

Very neat answer! Though simple, would like to mention that you can pass multiple search parameters using object syntax also.However, in that case angular will replace full search object with the provided object. – Belcher

Answer 2

If you are using the $location service then use $location.url('/store/items?page=2') instead. This has been a setter method from at least 1.0.7 and works a treat in my 1.1.5 app.

Scabble

Def the best answer if all you have is the url string. – Harber

Answer 3

you can create a parameter object like:

var param = {
    page: 2
}
$location.url("/store/items").search(param)

Freitag

Answer 4

If you're using the ui-router which is highly recommended, you could use $state.go(to, params, options) as described here.

As prerequisite you need to define your state properly, that means every possible query parameter must be made known to the ui-router. See the following example (page and otherParam):

$stateProvider.
state('storeItems', {
  url: '/store/items?page&otherParam',
  templateUrl: '/modules/store/views/item.client.view.html'
});

And then you can just switch locations for instance from a controller by calling

$scope.gotoItemsPage = function(page) {
  $state.go('storeItems', {
    page: page,
    otherParam: 'Just a show off'
  });
};

No fiddling with the encoding needed and highly readable!

Winzler

Answer 5

You can use decodeURIComponent.

For example:

decodeURIComponent('http://url.com/my_app/#/store/items%3Fpage=2');
// will give you `http://url.com/my_app/#/store/items?page=2`

Munos

Do not fiddle with the URL for yourself! In the angular context there are far better ways than that. See the answer of @Fearnought or even better use $state.go(to, params, options) where params is an object containing your query params defined in your state and their values unencoded. – Me

Solved my problem with the returnUrl get param in dotnet core, not related to the question, but thanks for the idea! – Compressor