title: Angularjs routing with django's urls
body: <p>I am using AngularJS for my front-end and Django as a back-end.</p>
  
  <p>I am doing very simple things at the back-end so I have not considered using tastypie.</p>
  
  <p>The problem where I am stuck is the client/server routing. I am thoroughly confused.
  What I do is:</p>
  
  <ol>
  <li><p>Render the entry.html page from django which has <code>&lt;div ng-view&gt;&lt;/div&gt;</code> in the body. 
  I am assuming that after this the routing is handled by angular's routeProvider</p></li>
  <li><p>In my static/js folder I have a file app.js which defines the route for another template for the form that I want to fill</p></li>
  </ol>
  
  <p>However when I run the project and load the app's entry url, I do not get redirected to the form. </p>
  
  <p>All the javascript files are included and I dont see any 404's in my log.<br>
  What am I doing wrong here ?</p>
  
  <p><strong>UPDATE</strong> :
  <code>app.js</code></p>
  
  <pre><code>App.config(['$routeProvider', function($routeProvider){
      $routeProvider
          .when('/',{templateUrl: '/templates/workflow/request_form.html',     controller:EntryCtrl})
          .otherwise({redirectTo:'/'})
  }]);
  </code></pre>
  
  <p><code>entry.html</code></p>
  
  <pre><code>{% extends "site_base.html" %}
  {% load staticfiles %}
  
  
  
  {% block body %}
    &lt;div class='ng-app'&gt;
      &lt;div class='row-fluid'&gt;
          &lt;ng-view&gt;&lt;/ng-view&gt;
         &lt;/div&gt;
     &lt;/div&gt;
  
  {% endblock %}
  
  {% block extra_script %}
       &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"&gt;&lt;/script&gt; 
        &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"&gt;    &lt;/script&gt;
        &lt;script src="http://code.angularjs.org/1.0.6/angular-resource.min.js"&gt;&lt;/script&gt;
        &lt;script src="http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js"&gt;    &lt;/script&gt;
        &lt;script src="/static/js/controller.js"&gt;&lt;/script&gt;
        &lt;script src="/static/js/app.js"&gt;&lt;/script&gt;
        &lt;script src="/static/js/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;script src="/static/js/bootstrap-datepicker.js"&gt;&lt;/script&gt;
        &lt;script src="https://maps.googleapis.com/maps/api/js?keyAIzaSyCLZKcTGUw9V0-    UcEHuZMCf6uZpNZZaVrg&amp;sensor=false"&gt;&lt;/script&gt;
  {% endblock %}
  </code></pre>
  
  <p><code>controller.js</code></p>
  
  <pre><code>var App = angular.module('app', ['ngResource']);
  
  function EntryCtrl($scope, $http, $routeParams, $location, master)
  {
      $scope.form = master.form
  }
  </code></pre>