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.
Related
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
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, {});
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";
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, '');
In angularjs, Given a url http://example.com/photos/123 and url template http://example.com/photos/:id (that is used in $resource). How to get the hash: {id: 123}?
All url parameters can be accessed with the $routeParams service:
From the $routeParams documentation:
The route parameters are a combination of $location's search() and path(). The path parameters are extracted when the $route path is matched.
Example:
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}
EDIT: Given the below comments, I extend my answer
// The example url you provided.
var url = 'http://example.com/photos/123';
// We get a list with all the parts of the url.
var partList = url.split(/\/|\?|&|=|\./g);
// We get the bit that we know is the photo's id.
var idPart = partList[5];
You would use Angular $routeParams.
For example in your controller:
$routeParams.id
would return '123'
Edit: As pointed out by okigan the default routing assumes you have a location hash so your route would need to be http://example.com/#/photos/123. However you can turn this off to retain your desired routing by turning on html5mode. Please see removing #
Update: You can also access the url parts using regular Javascript. The following would get the second url part.
id = (window.location.pathname).split('/')[2]
You could use this as a base to extend the functionality.