How to make infinity scroll with loading bar in AngularJS AngularJS 04.09.2015

Simple note how to combine AngularJS and Django REST framework and get infinity scroll with loading bar.

I'm going to use

• ngInfiniteScroll
• angular-loading-bar
• Django REST framework

Backend

Serializer for model

from rest_framework import serializers
from pins.models import Pin

class PinSerializer(serializers.ModelSerializer):
    class Meta:
        model = Pin

API view

from rest_framework import generics
from rest_framework import filters
from rest_framework.pagination import LimitOffsetPagination

from pins.models import Pin
from pins.serializer import PinSerializer

class PinListView(generics.ListAPIView):
    queryset = Pin.objects.all()
    serializer_class = PinSerializer
    filter_backends = (filters.DjangoFilterBackend,)
    filter_fields = ('category',)
    pagination_class = LimitOffsetPagination

URL file

from django.conf.urls import patterns, url, include
from pins.api_views import PinListView

urlpatterns = patterns('',
    url(r'^$', PinListView.as_view(), name='list'),
)

Frontend

• HTML file
• JS file