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, '');
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
When my app first loads I would like the obtain the last part of the url path. I use this token in order to perform requests, I am currently not using partials since its overkill for my needs. I am currently attempting to extract the path on my controller using the $location.path() method but it returns an empty string.
Here is my simple logging function
$scope.obtainTitle = function(){
var path = $location.path();
console.log($location);
console.log($location.path());
console.log($location.url());
console.log($location.hash());
$scope.title = decodeURIComponent(path);
};
Here is the output, I am serving my site from c9 which is why I blocked out host.
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¶m2=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¶m2=456";
alert(url.match(/http:\/\/domain\.com(.*)\?/)[1]);
And a more generic approach - ^.*\/\/.*?(\/.+)\?:
var url = "http://domain.com/dir1/dir2/?param1=123¶m2=456";
alert(url.match(/^.*\/\/.*?(\/.+)\?/)[1]);
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";
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.