AngularJS and Django: Conflicting routing

Question

So, I was integrating AngularJS with a Django backend.

For loading the HTML partials/templates I am using angularjs' ui-router. Here's my angularjs code:

function config($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
    $stateProvider.state("home", {
        url: "",
        controller: "HomeCtrl as home",
        templateUrl: "/static/templates/home.html"
    })
    .state("feed", {
        url: "/feed",
        controller: "FeedCtrl as feed",
        templateUrl: "/static/templates/feed.html"
    })
}

My home state loads fine. But when I try to load the feed state, I get the following error:

I am guessing Django is interfering with angularjs' routing? How do I handle this?

How are you trying to load feed state? By entering URL directly or clicking some link when home state is loaded? — GwynBleidD
– GwynBleidD, Commented Sep 21, 2015 at 11:34
Ok got it! should have entered 'baseurl/#/feed' instead of 'baseurl/feed'. Thanks! :) — Tarun Dugar
– Tarun Dugar, Commented Sep 21, 2015 at 11:36
If you're entering directly that URL, AngularJS can't catch it because it is not loaded. If you want to have URLs without #, you should return same angular template from django when entering any URL managed by angularjs directly — GwynBleidD
– GwynBleidD, Commented Sep 21, 2015 at 11:39

Thran · Accepted Answer · 2015-09-21 13:32:34Z

1

Django have to handle "feed" state same way as "home" state.

url(r'^(feed)?$', "your_app.views.home")

The best way is probably handle all remaining urls by home view and deal with it in angular later. Add this at the last line of your urls.py

url(r'^.*$', "your_app.views.home", name='home'),

And do not forgot activete HTML5 mode

$locationProvider.html5Mode(true);

answered Sep 21, 2015 at 13:32

Thran

1,1408 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

AngularJS and Django: Conflicting routing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related