使用django rest框架将django与angularJS集成时未显示数据

时间:2018-06-29 16:00:19

标签: angularjs django django-rest-framework

在遵循有关如何将Django与angularJS集成的教程之后,大家好 当我打开Django通过$ http连接到angular的链接时 我的网站没有任何内容,只有白色的空白屏幕 我不知道到底是什么问题 这是我的home.html,其中angular连接到

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Hello</title>

  </head>
  <body ng-app=crud.demo>
    {% verbatim %}
    <div ng-controller=crud_controller>
      <div ng-repeat='list in data.title'>
      <h3> {{list.title}}</h3>
       <!-- <li ng-repeat ='cards in list.cards '>{{cards.title}}</li> -->
       <!-- <input type="text" ng-model=new_title>{{new_title}} -->
       <!-- <button type="button" name="button" ng-click=add(list,new_title)>hey</button> -->
      </div>
    </div>

    {% endverbatim%}
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js">

      </script>
        <script src="{% static "crud/crud.js" %}"></script>
  </body>
</html>

这是我的crud.js文件

(function(){
  'use_strict';
  angular.module('crud.demo',[]).controller('crud_controller',['$scope','$http',crud_controller]);
  function crud_controller($scope,$http){
    // $scope.add= function(list,title){
    //   var card={
    //     title:title
    //   };

      // list.cards.push(card)
      $scope.data=[];
      $http.get('api/hello').then(function(response){
        $scope.data=response.data;
      });
    }

}



());

url'api / hello'是json格式的序列化数据的链接

HTTP 200 OK
Allow: GET, POST, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

[
    {
        "title": "hello",
        "description": "hello",
        "published": true
    },
    {
        "title": "hey there",
        "description": "cool",
        "published": true
    },
    {
        "title": "wassup",
        "description": "nice",
        "published": false
    },
    {
        "title": "ok",
        "description": "nice",
        "published": false
    },
    {
        "title": "super",
        "description": "excellent",
        "published": false
    }
]

我已经在控制台中检查了任何类型的问题,但没有发现与crud.js相关的问题

0 个答案:

没有答案