Django和AngularJS - 將查詢JSON數據發送到Angular

Question

編輯：我使用Django dev版本，所以我可以訪問JsonResponse（如下所示）。

我搞砸了Django並試圖使它與AngularJS一起工作。目前我試圖從數據庫中一次查詢4行，並將結果作爲JSON對象發送給Angular腳本。我只是不斷遇到問題 - 它不會工作。

這裏就是我的代碼是在現在一堆搜索在計算器上對自己儘量幫助出後：

# views.py 

class AJAXListMixin(object): 
    def dispatch(self, request, *args, **kwargs): 
     if not request.is_ajax(): 
      raise Http404("Improper access.") 
     return super(object, self).dispatch(request, *args, **kwargs) 

    def get_queryset(self): 
     return Project.objects.filter(added__lte=timezone.now()) 

    def get(self, request, *args, **kwargs): 
     return JsonResponse(self.get_queryset(), safe=False) 


class PageApi(AJAXListMixin, generic.ListView): 
    paginate_by = 4 # 4 results per page 
    ordering = '-added' # Most recent to oldest 

---------------------- 
# models.py 

class Project(models.Model): 
    title = models.CharField(max_length=100) 
    desc = models.TextField() 
    link = models.URLField(default=None, blank=True, null=True) 

    slug = models.SlugField(null=True) 
    added = models.DateField(_("Date Added"), default=datetime.today) 

    def __str__(self): 
     return self.title 

    def save(self, *args, **kwargs): 
     self.slug = slugify(self.title) 
     super(Project, self).save(*args, **kwargs) 

    def as_dict(self): 
     return { 
      "title": self.title, 
      "description": self.desc, 
      "link": self.link, 
      "slug": self.slug, 
      "date": self.added, 
      "previews": { 
       preview.as_dict() for preview in self.preview_set.all() 
      } 
     } 


class Preview(models.Model): 
    project = models.ForeignKey(Project) 
    file = models.FileField(upload_to='project/preview/') 

    def __str__(self): 
     return "{project} Preview {id}".format(
      project=self.project.title, id=self.id 
     ) 

    def as_dict(self): 
     return { 
      "url": self.file.url 
     } 

這裏是角碼我開始了與：

projects = angular.module("Projects", []); 

projects.config(['$httpProvider', function ($httpProvider) { 
    $httpProvider.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"; 
}]); 

projects.controller("ProjectList", ['$scope', '$http', function ($scope, $http) { 
    $scope.projects = {}; 
    $scope.page = 1; 

    $http.get('api/page/' + $scope.page) 
     .success(function (response) { 
     console.log(response) 
     }) 
     .error(function (status) { 
     alert("Error. Check network logs."); 
     }); 
}]); 

我想將響應存儲在項目$ scope變量中，以便我可以對角模板中的數據執行操作。

Answer 1

我建議考慮看看以下職位：

http://blog.kevinastone.com/getting-started-with-django-rest-framework-and-angularjs.html或這一個https://thinkster.io/django-angularjs-tutorial/

它走過在Django建立一個REST API序列化你的模型，並指定哪些字段序列化並使用Django Rest Framework返回JSON數據。

請注意，該示例使用CoffeeScript並使用GruntJS將其編譯爲JavaScript。

而不是你的角度控制器應該看起來更像以下（假設你有一個URL「/ API /項目/」，即路線，返回包含多個項目的JSON對象的API視圖）：

$scope.projects = []; 
$http.get('/api/projects/').success(function(data) { 
    $scope.projects = data; 
    console.log($scope.projects); 

}); 

不知道如何做到這一點與額外的分頁工作，但你可以在Django的REST框架文檔閱讀更多關於它：

http://www.django-rest-framework.org/api-guide/pagination/

希望這有助於！