routing with django and AngularJS

Question

I new to AngularJS and trying to set up Django with AngularJs, however, I have some issues with handling the routing with those two frameworks. so far I've set up like below:

When I run http://localhost:8000/index.html it works and shows me the file, but when I run http://localhost:8000/test as I wrote in app.js it gives me standard Django 404 error.

What am I missing?

urls.py

urlpatterns = [
    url(r'^index.html/$', 
]

app.js

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/test", {
        templateUrl : "index.html",
        controller: "MainCtrl"
    })
});

app.controller("MainCtrl", function ($scope) {
    $scope.msg = "test";
});

index.html

{% load static %}
<html ng-app="myApp">

<head>
</head>

<body>
    <div>
        test
    </div>
    <script src="{% static 'js/general/angular.min.js' %}" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script type="text/javascript" src="{% static 'js/app.js' %}"></script>
</body>

</html>

Haifeng Zhang · Accepted Answer · 2017-11-23 21:57:34Z

1

You need to define the URL and it's corresponding views method.

In you urls.py You need something like:

url(r'^test/$', views.test, name='test')

In views.py

def test(request):
    return HttpResponse('You are looking at test')

answered Nov 23, 2017 at 21:57

Haifeng Zhang

32.1k21 gold badges95 silver badges133 bronze badges

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

Collectives™ on Stack Overflow

routing with django and AngularJS

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