Customize url format of Angularjs's $location.search - angularjs

Is it possible to change the url that $location.search(params) creates, without changing the functionality at all? For instance, can /page?movie=836 be changed to something like /page/movie/836?

No. $location.search() just grab the query part of the URL and parse it for convenience. Or as setter it updates the query part of the browser URL.
You can transform the search() literal to "REST" form and redirect by using $location.url() :
if $location.path() == /page?movie=836
var url = $location.path()
for (var key in $location.search()) {
url += '/' + key + '/'+ $location.search()[key]
}
$location.url( url ) // redirect to /path/movie/836

Related

Angularjs: How to remove querystring from url?

I enter url http://localhost/HTMLUS12706?key=1234 which redirects to http://localhost/HTMLUS12706/?key=1234#/index.
Now I need to remove ?key=1234 from url and update url to http://localhost/HTMLUS12706/#/index.
I have already tried these
$location.search('key', null);
$location.url($location.path());
delete $location.$$search.key;
$location.$$compose();
$location.$$search = {};
$location.search({});
You can use $location service to get the url params. Like this,
$location.search().key
$location has a method called url( urlString ) which sets the path to urlString.
Check this. The same method when called without params returns the current url path.

Get location path without parmaters

Is there a way with AngularJS to and get a URL path minus all parameters? I don't want to grab it out of the address bar, I have a var where the value is a URL that I want the path out of.
Turn this: var url1 = http://domain.com/dir1/dir2/?param1=123&param2=456
Into this: /dir1/dir2/
This just wants to return the path with the parameters:
var justPathLocation = $location.path();
window.location.pathname returns exactly what you need.
On this URL:
http: //stackoverflow.com/questions/30385367/get-location-path-without-parmaters/30386013#30386013?param=value
it returns this:
"/questions/30385367/get-location-path-without-parmaters/30386013"
So it returns only the path name, without query strings or fragment identifiers.
UPDATE
Here's a regex way, it uses the domain name, which you can hard-code or fetch using window.location.hostname:
var url = "http://domain.com/dir1/dir2/?param1=123&param2=456";
alert(url.match(/http:\/\/domain\.com(.*)\?/)[1]);
And a more generic approach - ^.*\/\/.*?(\/.+)\?:
var url = "http://domain.com/dir1/dir2/?param1=123&param2=456";
alert(url.match(/^.*\/\/.*?(\/.+)\?/)[1]);

AngularJS | Set Path Parmeter while using $http.get method

I have a GET endpoint with URI as /user/user-id . The 'user-id' is the path variable here.
How can I set the path variable while making the GET request?
This is what I tried:-
$http.get('/user/:id',{
params: {id:key}
});
Instead of replacing the path variable, the id get appended as query param.
i.e my debugger show the request URL as 'http://localhost:8080/user/:id?id=test'
My expected resolved URL should be like 'http://localhost:8080/user/test'
$http's params object is meant for query strings, so key-value pairs you pass into params are output as query string keys and values.
$http.get('/user', {
params: { id: "test" }
});
Becomes: http://localhost:8080/user?id=test
If you need http://localhost:8080/user/test, you can either:
Construct the url yourself,
$http.get('/user/' + id);
Or, use $resource (specifically $resource.get https://docs.angularjs.org/api/ngResource/service/$resource). This is a little cleaner.
Why not something like this?:
var path = 'test';
$http.get('/user/' + path, {});

Why does angular prefix redirect url with 'localhost' when using $location.path?

The following snippet of code doesn't redirect me to the specified page (redirectUrl) - but rather, prefixes redirectUrl with the string 'localhost'.
I end up redirected to "localhost/http://localhost/example/page".
How can I avoid this?
var redirectUrl = "http://localhost/example/page";
$location.path(redirectUrl); //redirects to "localhost/http://localhost/example/page".`
$scope.$apply();
You need to modify your path to a relative path rather than an absolute path. so it would be something like this:
var redirectUrl = "/example/page";
$location.path(redirectUrl); //redirects to "http://localhost/example/page".`
angular's $location service works based on relative url.
To redirect to absolute url you can use.
window.location.href="http://localhost/example/page";
or using angular's $window
$window.location.href="http://localhost/example/page";

angular changing the url location without reloading the page

I have some partials which are loaded with some URL templates/test.html for example. This TemplateURL will always be relative. I want to use the same templates in different locations within the website.
So , I want to use the same relative url http://somedomain.com/templates/Test.html even if I am on some actual url of http://somedaomian.com/some1/some2
I have tried to use the $loaction service, but I am unable to set the $loaction back to the home url when I need to.
E.g in my controller I would like to :
var new_base_url = homeURL();
function homeUrl() {
/* Here is where I am unable to get the home url */
$location.path('/'); // simply returns the current url
};
If you want the absolute Url, $location.absUrl() will return everything (all url segments).
If you want the host name, $location.host() will return the host name.
If you want the protocol, $location.protocol() will return that.
If you want the path, $location.path() will return that.
If you want the hash, $location.hash() will return that.
You should be able to use these methods to parse out the pieces of the url that you are after.
var path = $location.path();
var hash = $location.hash();
var basePath = path.replace(hash, '');

Resources