This might be simple answer, but I cannot find it anywhere. I have test data in my database. How do I use angular to display the data from my django restframework api? In other words, what code would I put in my angular controller and in my html file?
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')
main 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,)
I am assuming this is the basic idea, but I do not understand how to make the connection between the api data and the angular display.
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>
