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