Question

所以，我为一个todo-app Im制作了一个后端API，我知道http://localhost:3000/api/todo/done正在工作并返回两个对象，如下所示：

[{“_ id”：“54d6485357a52fc640bb3814”，“text”：“Hämtatårta”，“completed”：true}，{“_ id”：“54d648ae57a52fc640bb3815”，“text”：“Köpadricka直到Antons kalas”， “已完成”：真}]

我现在写了一个角度前端的第一次尝试。它在节点中运行良好，没有错误，但我没有在我的todo-list div中列出任何待办事项。你能就此提出建议吗？

HTML：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="../javascripts/core.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </script>
  </head>
  <body ng-controller"mainController">
    <div class="container">

          <!-- HEADER AND TODO COUNT -->
          <div class="jumbotron text-center">
              <h1>I'm a Todo-aholic <span class="label label-info">{{ todos.length }}</span></h1>
          </div>

          <!-- TODO LIST -->
          <div id="todo-list" class="row">
              <div class="col-sm-4 col-sm-offset-4">

                  <!-- LOOP OVER THE TODOS IN $scope.todos -->
                  <div class="checkbox" ng-repeat="todo in todos">
                      <label>
                          <input type="checkbox" ng-click="deleteTodo(todo._id)"> {{ todo.text }}
                      </label>
                  </div>

              </div>
          </div>
  </body>
</html>

角色代码：

var nodeTodo = angular.module('node-todo', []);

function mainController($scope, $http) {
  $scope.formData = {};

  // when landing on the page, get all todos and show them
  $http.get('/api/todo/done')
      .success(function(data) {
          $scope.todos = data;
          console.log(data);
      })
      .error(function(data) {
          console.log('Error: ' + data);
      });
}

我甚至没有在控制台上打印任何东西，我也不明白为什么......

Answer 1

检查您的角度应用是否正确连线。我的html代码段中没有ng-app指令，ng-contoller="mainController"中可能存在拼写错误（=缺失）。您的控制器也没有在模块中注册（但在这种情况下，它应该没有任何区别）。这里JSFiddle至少在请求数据时显示错误消息。希望这有助于解决您的问题

Answer 2

在html中尝试这一点（注意ng-app属性）以引用你的模块。

<body ng-app="node-todo">
<div class="container" ng-controller="mainController">

然后将您的控制器连接到您的应用/模块，如下所示：

 var nodeTodo = angular.module('node-todo', []);

 nodeTodo.controller('mainController', 
  ['$scope', '$http', function($scope, $http){

     $scope.formData = {};

  // when landing on the page, get all todos and show them
  $http.get('/api/todo/done')
  .success(function(data) {
      $scope.todos = data;
      console.log(data);
  })
  .error(function(data) {
      console.log('Error: ' + data);
  });

}]);

希望这有帮助。

如何获得角度应用程序来访问后端API

2 个答案: