AngularJS + Django: URL refresh or direct access not loading correctly

Question

We have AngularJS embedded into our Django application, with URL routing handled by AngularJS ui-router. All is working fine navigating between partials using ui-sref and clicking around within the application.

return $stateProvider.state('root.dashboard', {
        abstract: true,
        url: 'dashboard/'
      }).state('root.dashboard.profile', {
        url: 'profile/',
        views: {
          '@': {
            templateUrl: Urls['dashboard:profile'](),
            controller: 'ProfileController'
          }
        }
      }).state('root.dashboard.home', {
        url: '',
        views: {
          '@': {
            templateUrl: Urls['dashboard:dashboard_home'](),
            controller: 'DashboardController'
          }
        }
...

The problem is when the user has navigated to a non-root page (say for example http://example.com/dashboard/profile/), and the user refreshes the browser, re-loads the browser's URL or simply pastes in the non-root URL directly into the browser. Instead of loading the page retaining the same URL in the browser, the user is getting redirected to the root page (http://example.com/dashboard/) in this case.

Since routing is handled by Angular, on the server side we don't have any url routes defined for those non-root URLs; instead we have middleware that redirects 404s to the root page:

class Redirect404(object):
    def process_response(self, request, response):
        if response.status_code != 404 or request.method != 'GET':
            return response
        return HttpResponsePermanentRedirect('/dashboard')

We expect that the router would be able to maintain the original URL and bring the user back to the original page (i.e. 'dashboard/profile'). Note we have set HTML5Mode in Angular as follows:

$locationProvider.html5Mode = true;

There is some mistake in our understanding and/or setup, and would appreciate clarification.

Kevin Christopher Henry · Accepted Answer · 2015-07-27 16:46:13Z

9

+50

We expect that the router would be able to maintain the original URL and bring the user back to the original page.

That is the misunderstanding.

Here is the sequence of events:

The user types http://example.com/dashboard/profile/ into the location bar.
The browser sends a GET request to the server for that URL.
Your server responds with a 301 redirect response.
The browser sees that response and sends a new GET request to http://example.com/dashboard/.
The server responds with your Angular page.
The Angular application starts up and looks at window.href to see what the current route is. It sees the root route and responds appropriately.

In other words, when you redirect you lose the original URL.

The solution is simple: instead of redirecting, simply return your page in response to any (valid) URL. That way the requested URL is maintained, and when Angular starts up it will be able to figure out the right route. (This assumes that routing is set up properly in Angular, but it sounds like you have that working.)

The implementation is also simple. Just change your Django urls.py from something like this:

urlpatterns = [
    url(r'^dashboard/$', my_view),
]

to something like this:

urlpatterns = [
    url(r'^dashboard/.*$', my_view),
]

edited Jul 27, 2015 at 16:46

answered Jul 27, 2015 at 7:25

Kevin Christopher Henry

49.7k8 gold badges125 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Neil Over a year ago

Great. What if I want to allow only valid URLs and not all, without hard-coding every valid URL?

Kevin Christopher Henry Over a year ago

@Neil: You mean that you want Django to only return the page for valid URLs exposed by the Angular application, without having to type them all in urls.py? Good question. I don't know of an easy way to do that, though. A quick Google search turns up some apps for integrating Django urls and Angular routes, but they seem geared towards the REST backend, not this. You could right your own code to process the Angular files and construct urls.py programmatically, but that seems like overkill.

Kevin Christopher Henry Over a year ago

@Neil: Consider letting your Angular app deal with bad URLs. It should already have some mechanism for dealing with errors, including URL errors. (For example, /user/42/ might be a syntactically valid URL, but if that user doesn't exist your Angular app will have to have some way of handling the error.) So it might be easier just to do all the error handling in one place instead of getting the server to generate 404s.

Neil Over a year ago

makes sense. There is the otherwise rule in ui-router which will work well.

Ygor Thomaz Over a year ago

Thank you very much. I loved this solution. Congrats!

Collectives™ on Stack Overflow

AngularJS + Django: URL refresh or direct access not loading correctly

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related