backbone router # is disappearing from the url - backbone.js

This url bellow, load the page:
/app/#/rGd4FaNjg22EvTuot3SRKF1suueUSc8Lhd
(I also tried /app/#rGd4FaNjg22EvTuot3SRKF1suueUSc8Lhd )
(and also tried /app#rGd4FaNjg22EvTuot3SRKF1suueUSc8Lhd)
...then become
/app/rGd4FaNjg22EvTuot3SRKF1suueUSc8Lhd
How to keep the # in the url ?

You should use /app#rGd4FaNjg22EvTuot3SRKF1suueUSc8Lhd, without the slash after the pound sign. The slash indicates another level in the URL.

It looks like you've started Backbone.history with pushState:true option. I would guess it looks something like this in your code:
Backbone.history.start({ pushState: true, root: '/app' });
That pushState options removes the # for you.
Docs: http://backbonejs.org/#History
So if you don't want your front-end routes be handled as if they are back-end urls, just set pushState option to false, or remove it because false is the default. When it's false the backbone routes will be handled with #.

Related

prevent angular change hashtag and slash in URL

I try to stop angular to modify the URL format
like from 'mail.google.com/#inbox'
to 'mail.google.com/#/inbox'
the context is I'm developing a Chrome extension, and customer like to use it with Streak in the same time. But sometimes my app will stop 'pipeline' feature of Streak shows up.
And the reason I guess is angular change the URL to different format therefore, stop some function of Streak(maybe)
so, to prevent angular add slash after hash tag,
I use html4 mode in config like
$locationProvider.html5Mode(true);
in fact, it works! but with error message:
$location in HTML5 mode requires a tag to be present!
so I change it the config part to
$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
then error message disappear, but slash will be encode
ex:
"mail.google.com/#pipeline/aaabbbccc..."
become
"mail.google.com/#pipeline%2Faaabbbccc..."
and pipeline not shows up.
then I find method to prevent slash encode from this method
I change config back to
$locationProvider.html5Mode(true);
and add tag to head to index;
as I'm developing a inject script app
I add the html tag by Jquery in content script
$('head').append('<base href="/">');
then situation become weird,it will open new tab and sometimes sign me out of gmail, also pipeline not shows as well.
Furthermore, I find the thing trigger URL change is some directive use $state
Is somebody have idea how to prevent angular modify URL formate change?
or my assumption of reason is wrong?

$location.search() not working

Update2:
$location just for ng.
so $location.search is ng's search
it parse url from mark like # or #! .
but $window.location handle the brower url
in my question, first url's ng search is empty
and second url's ng search is {code & state}
is it right?
Update1:
i found the *$window.location* got the right data.
is *$location* override the all things?
Question
i use angular-ui-router in my project. and i want to get search string from url,
like this: http://localhost:8080/?code=123456&state=auth#/api/oauth2_authorize
in app.config, i set:
$stateProvider.state("oauth2_authorize", {
url: "/api/oauth2_authorize?code&state",
template: "",
controller: function($location) {
var search = $location.search();
}
})
i think the search will be { code : 123456; state:auth} but no.
i try to change the url to : http://localhost:8080/#/api/oauth2_authorize?code=123456&state=auth
and it work.
somebody could tell me why? the html5mode is false.
i check the angularjs's document, and $location's sample show that, i can get the search string from both url.
and i try to use $urlRouterProvider , but it still empty.
what can i do?
Because, if you set html5mode to false, all your urls need to have #. Even if in your url state you dont have # .
For that reason
http://localhost:8080/?code=123456&state=auth#/api/oauth2_authorize doesn't work and
http://localhost:8080/#/api/oauth2_authorize?code=123456&state=auth
it does.
Check angularjs docs for $location and urls
I guess something wrong with AngularJs version you are using.
Which version are you using?
refer following link suggest the same issue and fix with HTML5Mode=true
https://github.com/angular/angular.js/issues/6198
Or just go through following pages, may be helpful to fix your issue.
https://github.com/angular/angular.js/issues/5964
https://github.com/angular/angular.js/issues/4607

Backbone.js And Push State

I'm using Backbone.js to develop a Web App and I have a doubt with the correct use of routing and Html5 Push State. Here my code
var HoopRouter = new HoopApp.Router.RequestManager;
Backbone.history = Backbone.history || new Backbone.History({});
Backbone.history.start({
root : '/web_app',
pushState : true
});
And in a method I'm doing this :
Backbone.history.navigate('#gameScreen/31', { trigger : true });
This workds correctly but giving me a url like this https://my_host/web_app/gameScreen/31 but when I enter this url in the navigation bar and press enter the browser says that the url is not found in this server and also the href links are not working. If I check the pushState to false, it works well but Backbone use the "#" routes and I want to use the "/" routes.
I'm don't know if I'm forgetting something.
Your server needs to return a value for every URL your client can generate when using pushState. See BackboneJS + Codeigniter pushState true not working

Backbone - file-like application root

If I am serving my Backbone application from http://example.com/foo/bar.html, what should I specify the application root as? E.g.:
Backbone.history.start({
pushState: true,
root: '/foo/'
});
vs
Backbone.history.start({
pushState: true,
root: '/foo/bar.html'
});
In fact, does it even matter as far as Backbone routing and history are concerned?
I notice that if I use the former form, images with relative URLs become broken because pushState would cause the (apparent) location of the window to change to a string like /foo/login, and then a relative URL like img/orange_cat.jpg gets resolved to /foo/login/img/orange_cat.jpg by the browser, when I really want /foo/img/orange_cat.jpg.
The first form is the correct one.
To fix the broken images issue
And add this to your head tag
<base href="/foo/" />

Backbone.js and leading hash

I have the following problem. Some part of my Backbone application has url like:
site.ru/#profile
When the page is loaded URL changes to:
site.ru/profile
So, the hash was lost. So, I see the problem in navigate function of Backbone:
var routeStripper = /^[#\/]/;
...
var frag = (fragment || '').replace(routeStripper, '');
As I understand this code clean a hash at the begin of URL.
Is it true way to simply delete this line of code to fix the problem? Could you advise me some other ways to fix this.
TIA!
Backbone only removes the hash if you enable pushState.
Change Backbone.history.start({pushState: true}); to Backbone.history.start();
http://backbonejs.org/#Router
Seems Backbone.js is using / & # as delimiters, to pull out the root address & sub-directories. The / filtering needs tp stau tp get the "fragment". Try to just delete the # in that RegEx, but leave the rest of the line there. (& leave a comment in the code that you have done so! :)
I would also submit a bug report, since it is resending the link without the hash.
Having the same issue, and some others with us ;-) (see GitHub issue)
I've fixed this for now by not listening to hash changes, like so:
Backbone.history.start({
pushState: true,
hashChange: false,
root: '/'
});
This seemed to work for me.

Resources