What is the correct Angular approach to retrieving the URL parameters?
Example: http://example.com/mypage.html?product=1234®ion=4&lang=en
Thanks
Add a comment
|
3 Answers
This will convert your query into an object
var queryData = url.split('?')[url.split('?').length - 1].split('&').reduce(function(prev, curr){
var fieldName = curr.split('=')[0];
var value = curr.split('=').length > 1 ? curr.split('=')[1] : '';
prev[fieldName] = value;
return prev
}, {});
And then you can access them by queryData.product, for example. Not angular, but it's a solution.
For the angular way, you can use $location.search() as described here http://www.angulartutorial.net/2015/04/get-url-parameter-using-angular-js.html
2 Comments
Ricky
Hi @TitusPopovici. Same question as well. This, only seems to work if my URL ends with #/ as in example.com/mypage.html#/?product=1234®ion=4&lang=en. Do you know if there is a workaround for this? The latter does not feel like a typical URL.
Titus Popovici
Not that I am aware of, for the angular way. You could make your own angular service that uses the function I wrote above for url's that are not angular routes (with the #/)
You can use the $location service. For example:
angular.module('parameters', []).run(['$location',
function($location) {
var params = $location.search();
}
]);
4 Comments
Ricky
Thanks @roger. This only seems to work if my URL ends with #/ as in example.com/mypage.html#/?product=1234®ion=4&lang=en. Is there any workaround for this?
roger
Are you usinge html5Mode? Because that your URL doesn't have the prefix "#/"? "$location.search();" works on html5Mode on the same way. If not, your parameters always have to be after "#/" prefix, this is the angular way, your URL will always be completed with "#/".
Ricky
Thanks @roger. I read about html5mode, and even saw the documentation, but I'm super confused on how to implement this. It says to use $locationProvider, but where do I set this? Would it be in the controller? Because I would need it to take effect globally
roger
You should use the config function of your module (angular.module('parameters', []).config(...))
I posted the same question with more details, and found a perfect response. Please see DavidL's response in my question here:
Reading URL parameters in AngularJS - A simple way?
Thanks to everyone who assisted me in this thread; perhaps I didn't include enough details in the original question.
