Using Django URLs with AngularJs routeProvider

Question

for a project, I am using Django on the back-end and AngularJs on the front end.

Basically, what I want is to run the Angular app only when the url starts with projectkeeper/.

In other words, lets say my website is example.com. I want the angular app to run for the URLs example.com/projectkeeper/dashboard/, example.com/projectkeeper/projects/ and so on, but not on example.com/about/.

Hope I have made myself clear. Anyway, in order to do this, I am doing the following with my code:

urls.py

urlpatterns = [
    url(r'^projectkeeper/$', TemplateView.as_view(template_name='base.html')),
]

In the template base.html, I refer to my angular app obviously. For the angular routing, I have done the following:

myapp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/dashboard/', {
            title: 'Dashboard',
            controller : 'DashboardController',
            templateUrl : 'static/app_partials/projectkeeper/dashboard.html'
        })
        .otherwise({ redirectTo : '/' });
}]);

So, ideally, what I thought was that going to example.com/projectkeeper/#/dashboard/ would run the DashboardController from my angular app. However, this is not the case, I only get an empty page which means the routing was incorrect.

Any solutions to this? As I said before, I want is to run the Angular app only when the url starts with projectkeeper/.

Answer 1

I think you're pretty close, there is few things to make this works(honestly, this is confusing to understand and I hope I didn't forget anything).

First, your URLs order is important, if you define something before the angular routes they will be rendered first, so use your django app's urls before the angular one.

Then, if you want to make angular know about the sub-path you need to define <base> tag in your header. In your case:

<base href="/projectkeeper/" />

(you can also define projectkeeperit in all of your where functions tho).

For the urls, I would change the regex to: r'^projectkeeper/.*'. Again, should be the last one in your urls list.

You will encounter other issues like the {{ }}, authentication issues, but those will stay for a different answer :)