Phonegap is a great framework to build mobile applications if you don’t have time to go native. If you combine it with the power of a javascript framework such as Backbone or AngularJS is even better.

We have been working in a big application built with Django and Tastypie in the Backend and AngularJS in the frontend, Build the mobile app with Phonegap makes sense because we can reuse much code from our web counterpart.

Although working with your own API and debugging it in the phone/simulator is not usually the fastest way of debugging, so we usually work with the API as JSONP until It’s necessary to test it in the simulator/phone.

If you want to do that with AngularJS services keep in mind you need to deactivate some security from $http service, and you will need to activate that security again when going to production or testing the real app in the phone/simulator to have the real functionality.

You can do that in AngularJS removing this header provisionally in your configuration.

delete $http.defaults.headers.common['X-Requested-With'];

If you are using Django and/or Tastypie you will need to activate a middleware to enable JSONP requests.


    from django import http
    try:
        from django.conf import settings
        XS_SHARING_ALLOWED_ORIGINS = settings.XS_SHARING_ALLOWED_ORIGINS
        XS_SHARING_ALLOWED_METHODS = settings.XS_SHARING_ALLOWED_METHODS
        XS_SHARING_ALLOWED_HEADERS = settings.XS_SHARING_ALLOWED_HEADERS
        XS_SHARING_ALLOWED_CREDENTIALS = settings.XS_SHARING_ALLOWED_CREDENTIALS
    except AttributeError:
        XS_SHARING_ALLOWED_ORIGINS = '*'
        XS_SHARING_ALLOWED_METHODS = ['POST', 'GET', 'OPTIONS', 'PUT', 'DELETE']
        # CAUTION! This one is very dangerous
        XS_SHARING_ALLOWED_HEADERS = ['Content-Type', '*', 'Authorization']
        XS_SHARING_ALLOWED_CREDENTIALS = 'true'
        
    class XsSharing(object):
        """
        This middleware allows cross-domain XHR using the html5 postMessage API.
        Access-Control-Allow-Origin: http://foo.example
        Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
        Based off https://gist.github.com/426829
        """
        def process_request(self, request):
            if 'HTTP_ACCESS_CONTROL_REQUEST_METHOD' in request.META:
                response = http.HttpResponse()
                response['Access-Control-Allow-Origin']  = XS_SHARING_ALLOWED_ORIGINS
                response['Access-Control-Allow-Methods'] = ",".join( XS_SHARING_ALLOWED_METHODS )
                response['Access-Control-Allow-Headers'] = ",".join( XS_SHARING_ALLOWED_HEADERS )
                response['Access-Control-Allow-Credentials'] = XS_SHARING_ALLOWED_CREDENTIALS
                return response
            return None
    
        def process_response(self, request, response):
            response['Access-Control-Allow-Origin']  = XS_SHARING_ALLOWED_ORIGINS
            response['Access-Control-Allow-Methods'] = ",".join( XS_SHARING_ALLOWED_METHODS )
            response['Access-Control-Allow-Headers'] = ",".join( XS_SHARING_ALLOWED_HEADERS )
            response['Access-Control-Allow-Credentials'] = XS_SHARING_ALLOWED_CREDENTIALS
            return response

This will be the middleware, We added an Allowed header to test if the access token is working, this is dangerous and It’s critical to remove it when you are done testing. Then you just activate it in the settings.py file.


MIDDLEWARE_CLASSES = (
    ...
    'mymodule.xhr_middleware.XsSharing'
)

That’s it! If everything goes well you will be able to debug your app with your own API from your browser. :-)

WARNING! Be careful when uploading to production and disable this tricks!