Angular Routing in Django

Question

I am new to Angular JS and trying to implement routing in a Django App. My Html code is:-

 <body>
<nav class="navbar navbar-inverse" ng-app="QuizRouting">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#/page1">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<div ng-view></div>
</body>

My JS code is :-

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

app.config(function($routeProvider) {
    $routeProvider
        .when("quiz/page1", {
            templateUrl: "/quiz/templates/quiz/page1.html"
        });
});

I have included all the prerequisites for Angular and angular routing. But on clicking on the page 1 link the required template is not rendered.

this is the page1.html:-

<div>
    <h1>Its Working!</h1>
</div>

Pankaj Parkar Pankaj Parkar · Accepted Answer · 2016-10-02T18:28:15

You had incorrect href on Page 1 anchor. You should correct it to below.

<li><a href="#/page1">Page 1</a></li>

And in .when also

.when('/page1', ....)

Angular Routing in Django

2 Answers