Django Webservice Angular Ionic App setup

app.js

.state('tab.referral-registration-form', {
      url: '/register/referral/form',
      views: {
        'tab-dash': {
          templateUrl: 'templates/dash-referral-registration/dash-referral_form.html',
          controller: 'RegisterReferralFormCtrl'
        }
      }
    })
    .state('tab.referral-registration-ack', {
      url: '/register/referral/ack',
      views: {
        'tab-dash': {
          templateUrl: 'templates/dash-referral-registration/dash-referral_reg_ack.html',
          controller: 'RegisterReferralAckCtrl'
        }
      }
    })

browser

// That is end of Django server side setup for publishing a webservice. 
// This serves the first instance via GET
// This allows a remote http request to CREATE a new entry in Referral model

http://localhost:8000/instance/webservice/register/referral/


Example JSON dataset is:
{
    "farmer": 6,
    "name": "Malathi Gowthaman",
    "phone": 9500989012
}

controller.js

.controller('RegisterReferralFormCtrl', function($scope, $localStorage, $stateParams, $state, $http) {
    
    $scope.registerReferral = function(form) {
      if(form.$valid) {
        var data = {"name": form.name, "farmer": $localStorage.farmerid, "phone": form.phone};

        $http({
            method: 'PUT',
            url: 'http://127.0.0.1:8000/instance/webservice/register/referral/',
            data: data,
            headers: {'Authorization': 'Basic '+ window.btoa( "*********:*********")}
          }
        ).success(function(data, status, headers, config) {
          // this callback will be called asynchronously
          // when the response is available
          console.log(data);
          console.log(status);
        }).error(function(data, status, headers, config) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
          console.log(data);
          console.log(status);
        });
        $state.go('tab.sowing-registration-ack');
      }
    };
  })

gistfile1.txt

from instance.serializer import ReferralSerializer

@api_view(['GET', 'PUT'])
def register_farmer_referral_via_webservice(request):
    """
    Record the referrals coming from mobile applications.
    :param request:
    :return: success
    """

    # do the operations
    if request.method == "PUT":
        serializer = ReferralSerializer(data=request.data)
        print serializer
        if serializer.is_valid():
            print "serializer is valid"
            serializer.save()
            return Response(status=status.HTTP_201_CREATED)
        else:
            print "serializer is NOT valid"
            print serializer.error_messages
            print serializer.error
            print serializer.data
            return Response(serializer.errors, status=status.HTTP_204_NO_CONTENT)
    
    elif request.method == 'GET':
        serializer = ReferralSerializer(Referral.objects.all()[0])
        return Response(serializer.data)

gistfile2.txt

url(r'^webservice/register/referral/$', 'instance.views.register_farmer_referral_via_webservice'),

models.py

class Referal(models.Model):
    farmer = models.ForeignKey(Farmer)
    name = models.CharField(max_length=100)
    phone = models.BigIntegerField()

referral_ack.html

<ion-view view-title="Referral">
  <ion-content class="padding">
    <h4>Referral Registration is successful! Thanks!</h4>
    <span>Your Friend will be contacted soon. If he/she fails to receive a call from us in 72 hours, or if the matter is urgent please don't hesitate to call us right away.</span>
    <span>Our Phone Number:</span><span>{{ universalphone }}</span>
  </ion-content>
</ion-view>

referral_form.html

<ion-view view-title="Referral">
  <ion-content class="padding">
    <form name="referralRegistrationForm" novalidate="" ng-submit="registerReferral(referralRegistrationForm)">
    <div class="list list-section">
      <label class="item item-input item-stacked-label">
        <span class="input-label">Name:</span>
        <input type="text" name="name" ng-model="referralRegistrationForm.name" placeholder="eg., Ramasamy Kaliannan">
      </label>
      <label class="item item-input item-stacked-label">
        <span class="input-label">Phone:</span>
        <input type="text" name="phone" ng-model="referralRegistrationForm.phone" placeholder="eg., 1234567890">
      </label>
      <button class="button button-full button-positive" type="submit">
        Register
      </button>
    </div>
      </form>

  </ion-content>
</ion-view>

serializer.p

class ReferralSerializer(serializers.ModelSerializer):

    class Meta:
        model = Referral
        fields = ('farmer', 'name', 'phone')