First create backend endpoints using Django Rest Framework:
task/models
from django.db import models
class Task(models.Model):
completed = models.BooleanField(default=False)
title = models.CharField(max_length=100)
description = models.TextField()
api/urls.py
from django.conf.urls import patterns, url
from rest_framework.urlpatterns import format_suffix_patterns
from api.views import task_list, task_detail
urlpatterns = patterns(
'api.views',
url(r'^tasks/$', task_list, name='task_list'),
url(r'^tasks/(?P<pk>[0-9]+)$', task_detail, name='task_detail'),
)
urlpatterns = format_suffix_patterns(urlpatterns)
mysite/urls.py
from django.conf.urls import patterns, include, url
from api.views import task_router
urlpatterns = patterns('',
url(r'^api/', include(task_router.urls)),
)
api/views.py
from rest_framework import viewsets
from rest_framework.routers import DefaultRouter
from task.models import Task
from api.serializers import TaskSerializer
class TaskMixin(object):
queryset = Task.objects.all()
serializer_class = TaskSerializer
class TaskViewSet(TaskMixin, viewsets.ModelViewSet):
pass
task_list = TaskViewSet.as_view({
'get': 'list',
'post': 'create'
})
task_detail = TaskViewSet.as_view({
'get': 'retrieve',
'put': 'update',
'patch': 'partial_update',
'delete': 'destroy'
})
task_router = DefaultRouter()
task_router.register(r'tasks', TaskViewSet)
Test the API endpoints
curl http://localhost:8000/api/tasks/
curl -X POST http://localhost:8000/api/tasks/ -d "title=hello world&description=a whole new world"
curl -X PUT http://localhost:8000/api/tasks/1 -d "title=hello world&description=be nice"
curl -X PUT http://localhost:8000/api/tasks/1 -d "title=hello world&description=be nice&completed=True"
curl -X DELETE http://localhost:8000/api/tasks/1
home.html
<html>
<body ng-app="taskApp">
<ul>
<li ui-sref-active="active"><a ui-sref="tasks"><span>Tasks</span></a></li>
</ul><hr>
<div ui-view></div>
<script type="text/javascript" src="{% static "lib/angular.min.js" %}"></script>
<script type="text/javascript" src="{% static "lib/angular-resource.min.js" %}"></script>
<script type="text/javascript" src="{% static "lib/angular-route.min.js" %}"></script>
<script type="text/javascript" src="{% static "lib/angular-ui-router.min.js" %}"></script>
<script type="text/javascript" src="{% static "app.js" %}"></script>
<script type="text/javascript" src="{% static "services.js" %}"></script>
<script type="text/javascript" src="{% static "controllers.js" %}"></script>
</body>
</html>
mysite/urls.py
from django.views.generic import TemplateView
...
url(r'^$', TemplateView.as_view(template_name='home.html'), name='home'),
services.js
angular.module('taskApp.services', ['ngResource'])
.factory('Task', function($resource) {
return $resource('/api/tasks/:id/');
});
controllers.js
var taskControllers = angular.module('taskApp.controllers', [])
taskControllers.controller('TaskCtrl', function TaskCtrl($scope, Task) {
Task.query(function(response) {
$scope.tasks = response;
});
$scope.submitTask = function(text,desc) {
var task = new Task({title: text,description:desc});
task.$save(function(){
$scope.tasks.unshift(task);
})
}
});
html_blocks/task-list.html
<form>
Add Task:
Title: <input type="text" ng-model="title">
Description: <input type="text" ng-model="desc">
<button ng-click="submitTask(title,desc)">Add </button>
</form>
<div ng-repeat="task in tasks">
<strong>[[ task.title ]]</strong>
<p> [[ task.description ]]</p>
</div>
app.js
angular.module('taskApp', [
'ui.router',
'ngResource',
'taskApp.services',
'taskApp.controllers',
])
.config(function ($interpolateProvider, $httpProvider, $resourceProvider, $stateProvider, $urlRouterProvider) {
$interpolateProvider.startSymbol('[[').endSymbol(']]');
// CSRF Support
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$resourceProvider.defaults.stripTrailingSlashes = false;
// Routing
$urlRouterProvider.otherwise('/');
$stateProvider
.state('tasks', {
url: '/',
templateUrl: '/html_blocks/task-list.html',
controller: 'TaskCtrl',
})
});