I am using angularjs routing. When I navigate to a view angular makes the request for the HTML defined in the templateUrl of the route. However, in a certain scenario - where the user's session has expired - the server returns a redirect. This redirect is followed and the resulting HTML is placed in the ng-view div.
This results in the login page being embedded within the original page which is no good. How can I make angular redirect the whole browser window to the redirect URL rather than just the contents of the ng-view?
Related
I read that if i handled routing through server, when a client asks for a page resulting the server to render a new document which will also result to refresh the web page unlike frontend/angular routing.
No. It wouldn't be a single page application. If you route through backend, whenever you change a route, your entire application will be bootstrapped in the browser again losing the essence of angularJS
How do you get a server-side redirect to go to a certain view in an angular app? I am guessing it has something to do with the redirect not triggering the part after the hash, but can this limitation be beat?
More info
I'm redirecting from an MVC controller to a page with an angular app. I'm using ui-router. The page containing the ui-view gets rendered, but processing stops there. If I refresh twice or go to the URL manually the page works as expected.
The MVC controller is called from a form which posts a file to the server and asynchronously populates a database and redirects when it's finished.
I don't see the problem, you can send a full url with hash and all on the location header and the browser will follow it, just check the response headers for this:
http://web-cf8f140d-22d3-4acd-b7a5-f9fa4e15e094.runnablecodesnippets.com/
What you can't do is getting the hash part directly from the request on the server side.
So for a Backbone/Flask app I have I am using Backbone.history to keep history of a certain page, and I am using parts of Flask to route through other parts of the app.
A standard user would flow through my application like this:
Load page /location; the /location page is served by flask and does not contain much javascript. It just displays some buttons.
The user clicks on one of the buttons and is redirected to /room/<id>/charts; again the application handles the routing to this page, and returns a html page containing the backbone application.
When this page is loaded I call Backbone.history.start() and I register some routes that should be handled by the backbone app on this page.
Now, when a user goes to several of these routes, and then clicks the back button of the browser, the browser will only go back until the first route that has been loaded by the backbone application on the /room/<id>/charts page. Even though I visited the /location page before coming to this /room/<id>/charts page that initiated the Backbone.history.
How can I make the Backbone.history work so it will work for the routes handled by the Backbone application, and also for the pages handled by the browser before the Backbone.history was started?
My AngularJS application uses
ui-router
an index.html file
all calls for login and data go to an ASP.NET Web Controller with a URL that starts with /api/xxx.
When a user enters myapp.com then the server index.html which is what I want. When the user now selects links on that page then ui-router shows the appropriate templates inside the index.html and the browser URL bar correctly displays addresses like these:
myapp.com/home
myapp.com/home/overview
myapp.com/city
myapp.com/city/london
Note that my configuration is set up like this:
.config([
'$httpProvider', '$locationProvider', '$sceProvider', '$stateProvider',
function (
$httpProvider, $locationProvider, $sceProvider, $stateProvider) {
$sceProvider.enabled(false);
$locationProvider.html5Mode(true);
If a user now clicks on refresh then the browser forgets that it was on index.html and tries to find the web page: myapp.com/city/london etc which of course does not exist. It then shows an error page saying the page does not exist.
How can I handle this situation? I would like a user clicking on myapp.com/city to refresh and ideally go back to myapp.com/city
EDIT
When you use HTML5 modle ruting with angular you must tell your server how to handle the request If you arrive at one of those routes, for example if you try to go to myapp.com/city you will get an error because the server is going to look for a city.html page at the root of the server which won't be there. If you navigate to that route from within your app it will work fine, but if you copy and paste that into your browser address bar you'll get a 404 because the server does not understand how to get to city.html. An easy fix would be to avoid using HTML5 routing mode. According to the angular docs you need to do some URL rewriting to make your server understand how to route to those pages:
From the docs:
Using HTML5 mode requires URL rewriting on server side, basically you
have to rewrite all your links to entry point of your application
(e.g. index.html)
You can also have a look here, this answer discusses how to get HTML5 routing working with your server.
when the user refreshes the application, you can lead them to login page or default page. which can be done by the following code.
app.run(['$location', function ($location) {
$location.path('/login');
}]);
I want to use $routeProvider for loading the partials from the server, but I don't want the url # value changes and the history changes ( App should go back to previous url without multiple back button clicks after multiple route changes within my app )
I don't think this is possible. As far as I know $routeProvider needs those Url changes.
Another way to do this would be to use ng-show and ng-hide to display partials on the page without changing the url. You can load the partials from the server using $http or $resource and if it needs it, use the $compile to execute any angular in those partials (ie directives).