angular js infinite scrolling with django rest framework

Question

I've been following this tutorial here for the infinite scrolling.

http://en.proft.me/2015/09/4/how-make-infinity-scroll-loading-bar-angularjs/

but for some reason it's throwing me this error

"angular.js:38Uncaught Error: [$injector:modulerr"

am i doing something wrong here?

im a newbie to django rest framework and angular js.

what i want to achieve here is having the API json data loaded and injected into the html (which i did) and have it scrollable and clickable. (with hyperlinks, but without refreshing the page)

could anyone take a look at the code?

index.html




  
    
                

  
    
        Post List
        {% verbatim %}
        
        
            {{ post.title }}
            {{ post.content }}
      
            Loading...
        
        {% endverbatim %}

urls.py

    from django.conf.urls import url
from django.contrib import admin

from .views import (
    PostListAPIView,
    PostDetailAPIView,
    PostUpdateAPIView,
    PostDeleteAPIView,
    PostCreateAPIView,
    )

from django.conf.urls import patterns, url, include
from .views import PostListView


urlpatterns = [
    url(r'^$', PostListAPIView.as_view(), name='list'),
    url(r'^create/$', PostCreateAPIView.as_view(), name='create'),
    #url(r'^create/$', post_create),
    url(r'^(?P[\w-]+)/$', PostDetailAPIView.as_view(), name='detail'),
    url(r'^(?P[\w-]+)/edit/$', PostUpdateAPIView.as_view(), name='update'),
    url(r'^(?P[\w-]+)/delete/$', PostDetailAPIView.as_view(), name='delete'),

    #url(r'^(?P[\w-]+)/edit/$', post_update, name ='update'),
    #url(r'^(?P[\w-]+)/delete/$', post_delete),
    #url(r'^posts/$', ".views."),



    url(r'^$', PostListView.as_view(), name='list2')
]

serializers.py

        from rest_framework.serializers import ModelSerializer, HyperlinkedIdentityField

    from posts.models import Post


    class PostCreateUpdateSerializer(ModelSerializer):
        class Meta:
            model = Post
            fields = [
                #'id',
                'title',
                #'slug',
                'content',
                'publish'
            ]


    class PostDetailSerializer(ModelSerializer):
        class Meta:
            model = Post
            fields = [
                'id',
                'title',
                'slug',
                'content',
                'publish'
                ]


    class PostListSerializer(ModelSerializer):
        url = HyperlinkedIdentityField(
        view_name='posts-api:detail',
        lookup_field='slug'
        )
        delete_url = HyperlinkedIdentityField(
        view_name='posts-api:delete',
        lookup_field='slug'
        )
        class Meta:
            model = Post
            fields = [
                'url',
                'id',
                'title',
                'content',
                'publish',
                'delete_url'
            ]



    from rest_framework import serializers

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

views.py

    from rest_framework.generics import CreateAPIView, ListAPIView, RetrieveAPIView, UpdateAPIView, DestroyAPIView

from posts.models import Post
from .serializers import PostCreateUpdateSerializer, PostListSerializer, PostDetailSerializer

from rest_framework.pagination import LimitOffsetPagination, PageNumberPagination
from .pagination import PostLimitOffsetPagination, PostPageNumberPagination

class PostCreateAPIView(CreateAPIView):
    queryset = Post.objects.all()
    serializer_class = PostCreateUpdateSerializer

class PostDetailAPIView(RetrieveAPIView):
    queryset = Post.objects.all()
    serializer_class = PostDetailSerializer
    lookup_field = 'slug'

class PostUpdateAPIView(UpdateAPIView):
    queryset = Post.objects.all()
    serializer_class = PostCreateUpdateSerializer
    lookup_field = 'slug'

class PostDeleteAPIView(DestroyAPIView):
     queryset = Post.objects.all()
     serializer_class = PostDetailSerializer
     lookup_field = 'slug'

class PostListAPIView(ListAPIView):
    queryset = Post.objects.all()
    serializer_class = PostListSerializer
#    pagination_class = PostLimitOffsetPagination

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


from .serializers import PostListSerializer

class PostListView(generics.ListAPIView):
    queryset = Post.objects.all()
    serializer_class = PostListSerializer
    filter_backends = (filters.DjangoFilterBackend,)
    filter_fields = ('category',)
    pagination_class = LimitOffsetPagination

thanks.

the live site is here : http://192.241.153.25:8000/

clockwatcher · Accepted Answer

Your first error was the missing sanitize module as I referenced in my comment. Adding the missing include:

Will fix that.

Your current error is really a new question but has to do with this code in your index page (line 498 of the rendered index page).

$http.get(this.url).success(function(data) {
    var items = data.results;
    for (var i = 0; i < items.length; i++) {
        this.items.push(items[i]);
}
...

The data object that your code is being returned looks like this:

    [ {  
      "url":"http://192.241.153.25:8000/api/posts/test-2/",
      "id":3,
      "title":"test",
      "content":"test",
      "publish":"2016-01-01",
      "delete_url":"http://192.241.153.25:8000/api/posts/test-2/delete/"
    },
    ...
    ]

It doesn't have a results property. I didn't really look into what you were doing with it but you probably want this (notice the lack of the "results"):

$http.get(this.url).success(function(data) {
    var items = data;
    for (var i = 0; i < items.length; i++) {
        this.items.push(items[i]);
}
...

Or you want to change up what you're returning so that it has a results property.

angular js infinite scrolling with django rest framework

Answers (2)

Related Questions