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.
Related
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.
A sample route in Nancy can be like:
Get["/method/key1={value1}/key2={value2}"]
which can be reached by calling it as:
/method/key1=foo/key2=bar
I want to write the querystring in below manner:
method?key1=value1&key2=value2
What would be the route for this?
It will be the following route:
GET["/method"] => x
{
var key1 = Request.Query.key1;
var key2 = Request.Query.key2;
};
Where Query is DynamicDictionary.
Related Questions:
Get url parameters in NancyFx
Why are no query parameters being passed to my NancyFX module?
NancyFX: How do I check if query-string / form values have been correctly passed to my handler?
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, {});
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, '');
I have my web application deployed to tomcat with an applicatio context.
For example my URL looks something like this.
http://localhost:8080/myapp
myapp - is the application context here.
Now in an Angular service if i want to call a webservice say getusers. My URL should be this /myapp/getusers. But I want to avoid hardcoding the application context as it might change from one deployment to other.
I have managed to figureout the contextpath from $window.location.pathname but it looks very stupid. Is there a betterway?
FYI I am using Spring MVC for restful services.
What I have done is declared a variable in the main jsp file. Then that variable will be available throughout the angular application.
<script type="text/javascript">
var _contextPath = "${pageContext.request.contextPath}";
</script>
This code should be written in header before including other JavaScript libraries.
I'm also using tomcat and Spring MVC. Using relative url in JavaScript will do the trick.
For doing this you just need to remove the / at the begining of REST url. so that your url starts from the current url in your browser.
replace $resource('/getusers') with $resource('getusers')
Inject the $location service to your controller.
var path = $location.path(); // will tell you the current path
path = path.substr(1).split('/'); // you still have to split to get the application context
// path() is also a setter
$location.path(path[0] + '/getusers');
// $location.path() === '/myapp/getusers'
// ------------------ \\
// Shorter way
$location.path($location.path() + '/getusers');
// $location.path() === '/myapp/getusers'
In Angular 2 (if using hashbang mode). Below code can be used to form the url.
document.location.href.substr(0, document.location.href.lastIndexOf("/#")) + "/getusers";
Inspired from the answer of #jarek-krochmalski
if you are using hashbang mode, with "#", you can do something like that:
$location.absUrl().substr(0, $location.absUrl().lastIndexOf("#")) + "/getusers"
For AngularJS $http service you are good to go with url : 'getusers', as follows:
$scope.postCall = function(obj) {
$http({
method : 'POST',
url : 'getusers',
dataType : 'json',
headers : {
'Content-Type' : 'application/json'
},
data : obj,
});
};
In general, you should use injection in your controller like the following:
angular.module("yourModule").controller("yourController", ["$scope", "yourService", "$location", function($scope, yourService, $location){
....
//here you can send the path value to your model.
yourService.setPath($location.path());
....
}]);