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 proble

Answer 1

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>

Answer 2

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