2016-05-26 2 views
0

Это может быть простой ответ, но я не могу найти его нигде. У меня есть тестовые данные в моей базе данных. Как использовать угловые для отображения данных из моего django restframework api? Другими словами, какой код я бы поставил в своем угловом контроллере и в моем html-файле?Как интегрировать django rest-framework и angularjs?

models.py

from django.contrib.postgres.fields import JSONField 
from django.db import models 

class UserData(models.Model): 
    """ 
    Requires a user id, email, first and last name. 
    """ 
    user_id = models.CharField(max_length=75) 
    email = models.EmailField() 
    phone = models.CharField(max_length=10) 
    name_first = models.CharField(max_length=100) 
    name_last = models.CharField(max_length=100) 

serializers.py

from rest_framework import serializers 
from check import models as m 
from django.contrib.auth.models import User 


class TestSerializer(serializers.ModelSerializer): 
    class Meta: 
     model = m.UserData 
     fields = ('user_id', 'email', 'phone', 'name_first', 'name_last') 

Основной urls.py

router = routers.DefaultRouter() 
router.register(r'user', json_views.TestViewSet) 

    urlpatterns = [ 
    url(r'^admin/', admin.site.urls), 
    url('^api/', include(router.urls, namespace='api')), 
    ] 

views.py

class TestViewSet(viewsets.ModelViewSet): 
    queryset = m.UserData.objects.all() 
    serializer_class = serializers.TestSerializer 
    permission_classes = (IsOwnerOrReadOnly,) 

Я предполагаю, что это основная идея, но я не понимаю, как установить связь между данными api и угловым дисплеем.

app.js

testApp = angular.module('demoapp', []); 

testApp.config(['$httpProvider', function($httpProvider){ 
    $httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 
}]); 

<body ng-app="demoapp"> 
<div ng-controller="testApp"> 
    <ul> 
     <li ng-repeat="user in data"> 
      [[user.user_id]] <br> 
      [[user.email]]<br> 
      [[user.phone]]<br> 
      [[user.name_first]]<br> 
      [[user.name_last]]<br> 
     </li> 
    </ul> 
</div> 

ответ

Смежные вопросы