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/.

Yep, static files work fine. The controllers are loaded properly. The URL pattern is the problem. — darkhorse
– darkhorse, Commented Feb 7, 2017 at 6:19
you should check the browser's console for error as well i think. It's better to trace back what went wrong — Nathan Do
– Nathan Do, Commented Feb 18, 2017 at 16:36
Can you please post the base.html code? That's where the problem is going to be. I've done this in a number of projects and I have it working exactly the way you need. — themanatuf
– themanatuf, Commented Feb 20, 2017 at 19:28

0xdead · Accepted Answer · 2017-02-14 13:15:20Z

4

+50

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 :)

answered Feb 14, 2017 at 13:15

0xdead

14k6 gold badges62 silver badges66 bronze badges

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

Comments

ramanathan · Accepted Answer · 2017-02-21 09:22:27Z

0

Try out this ui router for angularJS https://github.com/angular-ui/ui-router

It will be more helpful on nested views and problem like which you are facing currently.

answered Feb 21, 2017 at 9:22

ramanathan

1041 silver badge2 bronze badges

Collectives™ on Stack Overflow

Using Django URLs with AngularJs routeProvider

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related