Django rest framework connection with angular js services

Question

I have a rest framework working and the serializers are working great. The api.py file displays the json as the following format.

URL : http://127.0.0.1:8000/api/studentacademicprograms/

[
    {
        "credits_completed": 32, 
        "academic_program_gpa": 3.7, 
        "primary_program": true, 
        "academic_program": {
            "acad_program_id": 124, 
            "acad_program_category": {
                "id": 1, 
                "program_type": 1, 
                "title": "Associate in Arts"
            }, 
            "acad_program_type": {
                "id": 2, 
                "program_type": "Certificate"
            }, 
            "acad_program_code": "AA.ARTS", 
            "program_title": "Associate in Arts Degree", 
            "required_credits": 60, 
            "min_gpa": 3.3, 
            "description": "another description"
        }
    }]

I also have an angular js service that is currently reading static data from json files that i created manually:

services.js:

angular.module('jsonService', ['ngResource'])
    .factory('DegreesService', function($resource) {
      return $resource('/static/json/degrees.json')
    })

    .factory('DegreeCategoriesService', function($resource) {
        return $resource('/static/json/degreecategories.json')
    })

    .factory('DetailsService', function($resource) {
        return $resource('/static/json/details.json')
    })

    .factory('ProgramsService', function($resource) {
        return $resource('/static/json/programs.json')
    });

But now i wanted to change the angular factory such that it gets the json data from the rest framework instead of reading from static data. How do i achieve this?

Answer 1

I recommend making a service for the interactions with your API endpoint - depending on how restful that service is, consider using something like restangular, which can make things even easier. If all you need is a read-only service API, restangular will be overkill.

There's a nice general description of how to do this at http://www.benlesh.com/2013/02/angularjs-creating-service-with-http.html, and a nice related stackoverflow question for doing this at Convert Angular HTTP.get function to a service