Angularjs routing with django's urls

Question

I am using AngularJS for my front-end and Django as a back-end.

I am doing very simple things at the back-end so I have not considered using tastypie.

The problem where I am stuck is the client/server routing. I am thoroughly confused. What I do is:

1. Render the entry.html page from django which has <div ng-view></div> in the body. I am assuming that after this the routing is handled by angular's routeProvider

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

However when I run the project and load the app's entry url, I do not get redirected to the form.

All the javascript files are included and I dont see any 404's in my log.
What am I doing wrong here ?

UPDATE : app.js

App.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/',{templateUrl: '/templates/workflow/request_form.html',     controller:EntryCtrl})
        .otherwise({redirectTo:'/'})
}]);

entry.html

{% extends "site_base.html" %}
{% load staticfiles %}



{% block body %}
  <div class='ng-app'>
    <div class='row-fluid'>
        <ng-view></ng-view>
       </div>
   </div>

{% endblock %}

{% block extra_script %}
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js">    </script>
      <script src="http://code.angularjs.org/1.0.6/angular-resource.min.js"></script>
      <script src="http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js">    </script>
      <script src="/static/js/controller.js"></script>
      <script src="/static/js/app.js"></script>
      <script src="/static/js/bootstrap.min.js"></script>
      <script src="/static/js/bootstrap-datepicker.js"></script>
      <script src="https://maps.googleapis.com/maps/api/js?keyAIzaSyCLZKcTGUw9V0-    UcEHuZMCf6uZpNZZaVrg&sensor=false"></script>
{% endblock %}

controller.js

var App = angular.module('app', ['ngResource']);

function EntryCtrl($scope, $http, $routeParams, $location, master)
{
    $scope.form = master.form
}

Hastate

Could you post app.js code? – Waterspout

We're going to need to see some code. Did you define ng-app in the template? Have you set up your Angular module, and configured it to use the routeProvider? – Schistosomiasis

Sure updated. These are my two files that I use. – Hastate

does the page render anything? do you get errors on javascript console? – Waterspout

What is your EntryCtrl? – Brietta

@EugenioCuevas The page renders the background and other things. There is no error in the javascript console in the browser too – Hastate

@Brietta There is nothing, its an empty controller for now. Is that a problem ? :/ – Hastate

@DeepankarBajpeyi how do you initialize it? that may be the issue. can you post the exact code for that. – Brietta

@Brietta I have added the controller code. I am a total beginner at angular so pardon me for silly questions :P – Hastate

@DeepankarBajpeyi I am also a beginner in angular. This book (shop.oreilly.com/product/0636920028055.do) helped me to get started. Many examples there are broken but it explains the overall idea of how to use angular. It might help you too. – Brietta

Answer 1

You have to define the controller as part of the module. Try the following:

// controller.js
angular.module('app')
       .controller('EntryCtrl', [
          '$scope',
          '$http',
          '$routeParams',
          '$location',
          'master', // this has to be angular injectable
          function($scope, $http, $routeParams, $location, master) {
              $scope.form = master.form;
          }
       ]);

and you should only define the app once within the app.js:

// angular.js
angular.module('app', ['ngResource'])
       .config([
         '$routeProvider',
         function($routeProvider){
             $routeProvider
                .when('/', {
                    templateUrl: '/templates/workflow/request_form.html',
                    controller: 'EntryCtrl'
                })
                .otherwise({
                    redirectTo: '/'
                });
         }
       ]);

Then make sure you include this after you define the angular app within the template:

<script src=".../angular.min.js"></script>
<script src=".../app.js"></script> <!-- where app is defined -->
<script src=".../controller.js"></script> <!-- where EntryCtrl is defined -->

Brietta

Answer 2

Instead of writing

  <div class='ng-app'>
    <div class='row-fluid'>
        <ng-view></ng-view>
       </div>
   </div>

You should write:

{% endraw %}
      <div class='ng-app'>
        <div class='row-fluid'>
            <div ng-view>
        </div>
      </div>
{% endraw %}

the {% endraw %} is used to tell the templating engine (if it is jinja2) not to consider what is between those blocks

And I think that angular directive are supposed to be in an html tag and not like <ng-view>

Courteous

I have tried doing it the div way too. It doesn't work anyway. – Hastate

maybe the whole <script> things should be before the ng-app and ng-view directive – Courteous

My bad the <script> should be below ng-app – Courteous