In angular js urls are start with #. I want to change # with some character, however i know we can remove # with html5Mode(true). But i don't want to remove it , i just need to replace it with some other character.
You can't actually change the fragment identifier (#).
It's used in Angular for identifying the resource route.
You could use html5Mode in order to delete it only in browsers that support that kind of behavior. in other browsers that doesn't support this behavior, Angular has a fallback guarantee, that it will change the route to start with #!.
Related
This happens nearly always.
AngularJS puts slash in index.php#/gohere, so i can't go to "gohere".
Why angular puts? and how to prevent it from putting slash between index.php#/gohere?
normally it should be like this index.php#gohere, doens't it?
edit:
now i changed html alittle. it does like this now.
http://localhost/subsite/#/here
The hash inside the URL is called "Hashbang Mode".
You can add an option to your app.config() section
that turns off the default hashbang mode and activates
the HTML5-history based mode:
$locationProvider.html5Mode(true);
This mode allows you to use URLs without the hash,
e.g.
http://localhost/subsite/here
instead of
http://localhost/subsite/#/here
You can find more information about the modes in the official angular JS documentation:
https://docs.angularjs.org/guide/$location
(scroll down to "Hashbang and HTML5 Modes")
We are using DPS's PXPay to generate payments for our app.
On a successful transaction the url that is provided looks like
http://ourapp.com/checkout/complete?result=v5eX-DlMlfGe2FUcPeZgCFiKhZwgmCVhlTfL-rtnPszpe8S_6MYJMbVPDK14h7KxQM6xfKYUnXhz_RcSOHqw4VwHX97GU9XINHwh9DFt6aDHOLMvdAnSwZost5H2aOQlZgMESDzlwNGx_lfgeLba2Us41x437J3PWTJ_LLJVK4OY_7K4c6rxQ88Mve7FfoYd7P8CAZWxyHbC-wxCyLiocw4_NQ_34ct-IAsR1MM3C2OkPijfBAk-l72rOOMWGp8EoLpdOHyT0uITvsdjMvOFIHIMnSdVs2JFCslAmTRMDl4jkb5ezBf9wKZuo91KgII0kd9dFJMFCm7evt-X0ykLw_vjcgg85kZoRbDvi89nEGiWmFLVKM_xVgZYufeMMudOGRcHgi4i-RZJ4mml2JMzN2OtJKyQdpxuC-3b9KfnRbyy_F75Gak5fwJIf4tvo6VNJKUJuBtKYKafPyH_YJU4HQMeHP8uO0-FhMN3mzRCmGjvExuqx1BhA67R35pmaTbyxz-06JEvIqzf8FTftoBowLSeu37KtNmagZ8cJpMlCe4kUaFY4v6ZTx7h9rYx37oYtZNsSR1t3KDFzQYRs5LAg8RQ==&userid=OurDevId
This is definitely the request that is coming into the browser. BUT what is displayed in my browser URL bar... and what angular reads for the "result" token is this...
http://ourapp.com/checkout/complete?result=v5eX-DlMlfGe2FUcPeZgCFiKhZwgmCVhlTfL-rtnPszpe8S_6MYJMbVPDK14h7KxQM6xfKYUnXhz_RcSOHqw4VwHX97GU9XINHwh9DFt6aDHOLMvdAnSwZost5H2aOQlZgMESDzlwNGx_lfgeLba2Us41x437J3PWTJ_LLJVK4OY_7K4c6rxQ88Mve7FfoYd7P8CAZWxyHbC-wxCyLiocw4_NQ_34ct-IAsR1MM3C2OkPijfBAk-l72rOOMWGp8EoLpdOHyT0uITvsdjMvOFIHIMnSdVs2JFCslAmTRMDl4jkb5ezBf9wKZuo91KgII0kd9dFJMFCm7evt-X0ykLw_vjcgg85kZoRbDvi89nEGiWmFLVKM_xVgZYufeMMudOGRcHgi4i-RZJ4mml2JMzN2OtJKyQdpxuC-3b9KfnRbyy_F75Gak5fwJIf4tvo6VNJKUJuBtKYKafPyH_YJU4HQMeHP8uO0-FhMN3mzRCmGjvExuqx1BhA67R35pmaTbyxz-06JEvIqzf8FTftoBowLSeu37KtNmagZ8cJpMlCe4kUaFY4v6ZTx7h9rYx37oYtZNsSR1t3KDFzQYRs5LAg8RQ&userid=OurDevId
If you look closely... the two '==' are being taken off the end of the "result" token string.
I've tested in non angular applications and this isn't happening. Why does angular do this and how do I prevent it?
Angular cannot handle == because of its $location's search parsing. Just visit : https://angularjs.org/?foo==123 and the url will change to https://angularjs.org/?foo=
The same will not happen on a non-angular page.
Solution: Either patch angular OR HTML encode the section after ?result=
Depending on what you're trying to do with the URL that is returned, it might be simpler to just set window.location directly instead of working through Angular. This bypasses the query-string parsing in $location that's stripping the double equals.
if my present URL is : xzy.com/#/home/new
$location.hash() gives home/new and $location.path also gives home/new
What is the difference in the two?
If inside the controller of home/new I write $location.hash("#/home/new") or $location.path("/home/new") both do not reload the partial but if I do location.href="#/home/new", it reloads the partial. Why is this?
Also, if inside the partial there is a <a href="#/home/new"> that will also reload the partial.
Why doesn't setting the path/hash reload the partial?
There are two parts to the route.
The first "hash" is really there just for browser compatibility and won't show if you are in HTML5 mode.
For example, given this URL:
http://localhost/spa.htm
If you set:
$location.path('/myPath');
you will get:
http://localhost/spa.htm#/myPath
In this case, the "hash" is just for the browser to hold the URL, the method is path. Note also when you call path without a preceding / it is added, i.e. 'myPath' becomes '/myPath'.
If you subsequently set:
$location.hash('myHash');
You will get:
http://localhost/spa.htm#/myPath#myHash
Finally, let's assume you did not set the path first, then you'll get:
http://locahost/spa.htm#/#myHash
If you are using HTML5 mode, the path is appended without the initial hash.
The first hash is used to append the route, the second is a reference to content on the page. For example, if you use the $anchorScroll service it will respond to what is placed in $location.hash() and not in $location.path().
To summarize:
http://localhost/spa.htm#{path}#{hash}
I had a similar question this morning then Google led me here.
Inspired by other answers and some Googlings I've done, here is my result:
for example, given a browser url:
http://localhost:8080/test.html#!/testpath#testhash%20with%20someothers
in AngularJS ,
url is
/testpath#testhash
path is
/testpath
in another word , from left to right ,path starts at the first character in url and ends at the # or ? or the end of url.
path always start with '/' .so ,if no path is specified ,the path is set as "/" rather than ""
hash is
testhash%20with%20someothers
in another word ,hash starts at the next character of # in url and ends at the end of url
location.href is not implemented in AngularJS. when you say: location.href="#",it behaves like clicking an anchor tag :
click
when invoke the method $location.path,$location.hash as setters, they do change the browser url to match your demands.
And ,why you want AngularJS to RELOAD a page at all? :)
The reason for the second part of your question, why it is not redirecting might be:
You might need to update the binding, with $scope.$apply , this is required when you are using the code other than angular like native javascript, jquery code
for example:
$scope.$apply(function(){
$location.path("#/home/new");
})
Terminology
#foo: slashless scheme
#/foo: slashy scheme
Background
There are certain legacy parts of the application which use (and rely on) the slashless scheme. I would like to introduce Angular routing (probably with ui-router) in a non-destructive way, such that doesn't interfere with the legacy routing so that part of the application could be gracefully phased out over time. Once that happens the all-angular app could switch to the slashy scheme all at once.
So far
I tried setting $locationProvider.hashPrefix('') to an empty string, but it seems you can only set the string between # and /, so that didn't work.
Options
It seems I can either
rewrite legacy parts of the app, or
rewrite Angular's $locationProvider.hashPrefix to include '/' by default. Therefore setting it to '' would become meaningful.
Both of these options seem very time-consuming.
Do you know about a better way to make Angular recognize the slashless scheme?
You can try using redirects!
With ui-router:
app.config(function ($urlRouterProvider) {
// when there is an 'old' route, redirect to new one
$urlRouterProvider.when('foo', '/foo');
// You can also use regex for the match parameter
$urlRouterProvider.when(/(\w+)/i, '/$1'); // UNTESTED!!!!!!
})
Reference about ui-router wiki
I'm sorry but hashtags are quite hard to test in plunkers/fiddles, so i'm not providing one for now...
I'm new to AngularJS. So far I have been working with a page in root (/), and I haven't seen any issues with the navigation.
Now I added a path - "entries". I see AngularJS is appending the path again, so
http://localhost:9000/entries
becomes:
http://localhost:9000/entries#/entries
And also a request with parameters, like:
http://localhost:9000/entries?par1=a&par2=1
becomes:
http://localhost:9000/entries?par1=a&par2=1#/entries?par1=a&par2=1
I read: $location doc
But still I don't quite understand what's going on here. Is this correct behaviour? If not, how do I turn it off?
This is the correct behavior. Changing paths in angular does not actual correspond to a change in the URL itself, just the fragment (what comes after the #). This is how angular (and JS frameworks in general) keep track of your location and changes it without refreshing.