Using angular.js with Tastypie for Django

The following angular.js service will allow you to consume a standard TastyPie REST API. As you may know, TastyPie returns its JSON objects a bit differently from what angular expects, so this service fixes it.

This example assumes that you have always_return_data=True in your resource. This is the resource I used with this example:

class NoteResource(ModelResource):
    class Meta:
        queryset = Note.objects.all()
        resource_name = 'note'
        #...
        list_allowed_methods = ['get', 'post', 'put', 'delete']
        always_return_data = True

If you don’t have always_return_data=True, you will need to remove the .success part of the create method.

angular.module('notes.service', ['ngResource'])
    .factory('Note', ['$http', function($http){
        var Note = function(data) {
            angular.extend(this, data);
        };

        Note.get = function(id) {
            return $http.get('/api/v1/note/' + id).then(function(response) {
                return new Note(response.data);
            });
        };

        Note.getAll = function() {
            return $http.get('/api/v1/note/').then(function(response) {
                return response.data.objects;
            });
        };

        Note.save = function(note) {
            var url = '/api/v1/note/';

            return $http.post(url, note).success(function(returnedNote) {
                //IMPORTANT: You need to activate always_return_data in your ressource (see example) 
                note.id = returnedNote.id;
            }).error(function(data){
                console.log(data);
            });
        };

        Note.remove = function(id) {
            return $http.delete('/api/v1/note/' + id + '/').success(function(){
                console.log("delete successful");
            });
        };

        return Note;
    }]);

9 comments on “Using angular.js with Tastypie for Django

  1. How can i use PATCH in angular and tastypie …… I need to update an created resource but if i use PUT for this it updates the resource but remove all the Related Objects . if i use PATCH in Angularjs it says PATCH is not a function ..

  2. I have used Django Tastypie collaborated with Angular. So far, I think Tastypie is very easy to use, except the “relational” problem. It always forces to save/update the related (such as, foreign key, m2m, etc) and it’s not always good idea. Have you ever used Tastypie with Foreign Key?

  3. Hello !
    I have an mobile app(angularjs + phonegap) & a backend(Djanogo+Tastpie).
    How can I create/authenticate users from the mobile app(facebook, twitter) in the backend ?
    Thank you very much !

  4. hi
    I have a problem with your sample!
    when I use :

    $scope.notes = Note.getAll()

    I can’t get real data I just get an object of http, how can I solve this?

  5. Thanks for the tutorial, could you teach me how to get the data in the controller?

    I’ve already tried this:

    appTest.controller(‘HomeCtrl’, ['$scope', '$http', 'Note',
    function($scope, $http, Note) {
    Note.getAll().then(function(data) {
    $scope.Notes = data.objects;
    });
    }]);

    But it didn’t worked as expected.

    Greetings

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax