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
Related
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 #.
I have URL's in project as:
http://blo.c/news
http://blo.c/video
How I can get segments news, video from these URL?
I tried to use $location in Angular JS, but this object has not these segments
You need to use $location.path()
// given url http://blo.c/news
var path = $location.path();
// => "/news"
If you are using HTML5 mode you must ensure $locationProvider.html5Mode(true) is set so $location works properly.
If you are not using HTML5 mode (which is the case here); then you'll need to drop to traditional javascript to get the URL, since you are not using Angular routing in the first place:
// given url http://blo.c/news
var path = window.location.pathname;
// => "/news"
You might choose to inject $window instead of using window directly, this is only a thin wrapper over the native window object but facilitates testing.
Use the $location.path function to get the url. To get what's after the url, use split
$location.path.split(/\{1}/)[1]
const URL = '/seg1/?key=value';
$location.path();// will return URI segment (in above URL it returns /seg1 ).
$location.search(); // getter will fetch URL segment after ? symbol.
//(in above URL it returns {key:value} object ).
Official Doc: https://docs.angularjs.org/guide/$location
I'm trying to add login with github in my app. So while testing on my local machine, I set my callback url like this http://localhost:8000/login/callback/.
And after that, I add a login link to my page like this, Login, and also
$routeProvider.when('/login/callback', {
controller: 'loginCtrl'
});
It success returned me a code with a link like this: http://localhost:8000/login/callback?code=cd07ff3b70f5d1d1b8a2. But angularjs can not response correctly.
Error response
Error code 404.
Message: File not found.
Error code explanation: 404 = Nothing matches the given URI.
I've also tried to set my redirect_url to http://localhost:8000/#/login/callback, but the return link is like this http://localhost:8000/?code=61e9c8b73c073a0bccc0/#/login/callback
I need the code to be appear at the end of the url but not in the middle so that I can use $location.search().code to get my code. How can I set it properly?
Like change my redirect_uri or change my router?
#lowerkey I still don't know how to handle this but I think that's because the page was reloaded.
When you are not setting the html5Mode to true, then will be # at the url, and if you reload the page, the # will track the information to the $scope to work with the htmlHistory api so that the app can work properly even with the page refresh.
But once you set the html5Mode to true, then there's no # to store any $scope information, and when the page reload, angular can not found the accordingly scope so it return 404.
You can check $location section on angularjs guide, it has a section explaining why this happen.
Page reload navigation
The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API, $window.location.href.
we should somehow push github to send params in html5-friendly way, i.e.
/login/callback/:code
for now I've created my hack-solution for it:
var code = parseUrlParam($location.absUrl(), 'code');
function parseUrlParam(url, param){
var temp = url.match(param + '=(\\w*)');
if(!temp[1]){
return false;
}
return temp[1];
}
I am using backbone.js routers to do navigation in my single page app.
Code excerpts to explain my problem :
routes: {
'action/:id' : performAction
}
In order to access this I have my anchor element , with href="#action/121"
My host url is http://mypage.com/test.html.
Problem is , when I click on this anchor tag my url changes to
http://mypage.com/action/121
And the router code is also not reached , Do not know where I am going wrong.
Looks like you are activating history push, be sure to disable it running this(instead of what you have):
Backbone.history.start({pushState: false});
I want to do a redirect that does a full page reload so that the cookies from my web server are refreshed when the page loads. window.location = "/#/Next" and window.location.href = "/#/Next" don't work, they do an Angular route which does not hit the server.
What is the correct way to make a full server request within an Angular controller?
For <a> tags:
You need to stick target="_self" on your <a> tag
There are three cases where AngularJS will perform a full page reload:
Links that contain target element
Example: link
Absolute links that go to a different domain
Example: link
Links starting with '/' that lead to a different base path when base is defined
Example: link
Using javascript:
The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API: $window.location.href.
See:
https://docs.angularjs.org/guide/$location
https://docs.angularjs.org/api/ng/service/$location
We had the same issue, working from JS code (i.e. not from HTML anchor). This is how we solved that:
If needed, virtually alter current URL through $location service. This might be useful if your destination is just a variation on the current URL, so that you can take advantage of $location helper methods. E.g. we ran $location.search(..., ...) to just change value of a querystring paramater.
Build up the new destination URL, using current $location.url() if needed. In order to work, this new one had to include everything after schema, domain and port. So e.g. if you want to move to:
http://yourdomain.example/YourAppFolder/YourAngularApp/#/YourArea/YourAction?culture=en
then you should set URL as in:
var destinationUrl = '/YourAppFolder/YourAngularApp/#/YourArea/YourAction?culture=en';
(with the leading '/' as well).
Assign new destination URL at low-level: $window.location.href = destinationUrl;
Force reload, still at low-level: $window.location.reload();
After searching and giving hit and trial session I am able to solove it by first specifying url like
$window.location.href = '/#/home/stats';
then reload
$window.location.reload();
I had the same issue. When I use window.location, $window.location or even <a href="..." target="_self"> the route does not refresh the page. So the cached services are used which is not what I want in my app. I resolved it by adding window.location.reload() after window.location to force the page to reload after routing. This method seems to load the page twice though. Might be a dirty trick, but it does the work. This is how I have it now:
$scope.openPage = function (pageName) {
window.location = '#/html/pages/' + pageName;
window.location.reload();
};
Try this
$window.location.href="#page-name";
$window.location.reload();