Add Angular login front-end to Django rest framework backend

Once you have created you rest api using django-rest-framework then you will many end points as you may had created and configured into urls.

So to integrate the rest api, First of you need to have access to the domain where your rest api are exposing, we will assume localhost:8000.

Now you should create an angular constant to hold this rest endpoint domain information, because we will use many api at many places in our angular project, So in order to keep it clean we must use constant and this can be inject wherever we require rest endpoint.

Rest Endpoint constant in AgnularJS

angular.module('angularApp')
  .constant('restEndPoint', 'http://localhost:8000');

Now this will be avaialbe anywhere in project by injecting such as a service.

It depends how you design your rest api but If you have design your rest api with rest standards then I would suggest to use $resource instead of using $http.

I always prefer to write my persistent logic inside a factory, Again its your choice.

Here is an example of using the rest endpoint in angular's way.

Factory

angular.module('AngularApp')
  .factory('TodoService', ['$resource', 'restEndPoint', function  ($resource, restEndPoint) {
    return $resource(restEndPoint+'/todos/:id')
}]);

Controller

angular.module('AngularApp')
  .controller('TodoCtrl', function ($scope, TodoService) {
      var Todo = new TodoService();

      // Now Todo is an $resource instance. Which can be used to get/post/patch/delete data on rest api. such as following.

     // GET all records.
     Todo.$query(); 

     // GET specific record based on id.
     Todo.$query({id:1});

     // POST data to create new Todo item.
      newTodo = { title: 'Task 1', completed: false}
      Todo.$save(newTodo)

     // PUT/PATCH specific record base on id.
     editTodo =  { title: 'Task title changed', completed: false}
     Todo.$update({id: 1}, editTodo); 

});

I hope you understand the rest api integration with angularJS. Let me know if you have any queries.

Thanks