Use html5Mode true in AngularJS with Django

Question

I'm using an AngularJS app with Django Rest Framework. However, I've setup my project such that the Angular page is served from within the templates folder of my setup such that

url(r'^$', index)

def index(request):
    return render(request, 'index.html', {})

I'm running the angular app on / url of Django and have setup my ngRoutes as follows:

var sgApp = angular.module('sgApp', [
        'ngRoute',
    ]);

sgApp.config(['$routeProvider','$locationProvider',
    function($routeProvider, $locationProvider){
        $routeProvider.when('/',{
            templateUrl: '/static/partials/index.html'
        });
        $locationProvider.html5Mode(true);
    }
]);

However, when I try to access an invalid url such as localhost:8000/some-random-url, it'll redirect to Django's inbuilt 404 page. Is there a way for me to fix this? Or do I have to completely abstract the angular app from the rest framework?

levi · Accepted Answer · 2015-03-11 18:07:30Z

4

You need to add in your angularjs router, the default route value (otherwhise)

sgApp.config(['$routeProvider','$locationProvider',
    function($routeProvider, $locationProvider){
        $routeProvider.when('/',{
            templateUrl: '/static/partials/index.html'
        })
        .otherwise({
            redirectTo: '/'
         });

        $locationProvider.html5Mode(true);
    }
]);

Then add this to the bottom of your urls.py

url(r'^.*$', index),

This means that if requested url did not match any previous url rules, redirect to index. Notice * in ^.*$

edited Mar 11, 2015 at 18:07

answered Mar 11, 2015 at 18:02

levi

22.8k7 gold badges79 silver badges76 bronze badges

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

6 Comments

Newtt Over a year ago

Hey, how do I make API calls work now that html5mode is present? Whenever I try to make any api calls, it returns to the '/' url present in the $routeProvider

levi Over a year ago

@Newtt Are u making those api calls using $http ? or just broswer?

levi Over a year ago

@Newtt you need to place url(r'^.*$', index) at bottom of your urls.py.It should be the last rule in your urls.py.

Newtt Over a year ago

Oh yeah! I ended up placing another url after that. Thanks a lot! :)

Nikko R. Over a year ago

how about if you want it to stay on the given url? for example the url visited was /orders what should I do so if the user refreshes it the page stays at /orders and not gets redirected back to the index? @levi

|

Bartłomiej Semańczyk · Accepted Answer · 2015-12-03 10:19:56Z

1

With Django/ DRF, for a series of routes have the index route with the .*$ as the last:

urlpatterns = patterns(
    '',
    url(r'^api/v1/', include(router.urls)),
    url(r'^api/v1/', include('agents.urls')),
    url(r'^api/v1/', include('utils.urls')),
    url(r'^api/v1/', include('authentication.urls')),
    url(r'^api/v1/', include('products.urls')),
    url(r'^admin/', include(admin.site.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
    url(r'^accounts/login', LoginView.as_view(), name='login'),
    url(r'^.*$', IndexView.as_view(), name='index'),
)
handler404 = 'views.handle_page_not_found_404'

where index is the last route.

edited Dec 3, 2015 at 10:19

Bartłomiej Semańczyk

62k52 gold badges257 silver badges408 bronze badges

answered Dec 3, 2015 at 9:59

Ian Juma

1071 silver badge13 bronze badges

Collectives™ on Stack Overflow

Use html5Mode true in AngularJS with Django

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related