如何让 Angular 应用程序访问后端 API答案

【问题标题】：How to get angular app to access backend-API如何让 Angular 应用程序访问后端 API
【发布时间】：2015-02-08 20:41:46
【问题描述】：

所以，我为我正在开发的待办事项应用程序创建了一个后端 API，我知道 http://localhost:3000/api/todo/done 正在工作并返回两个对象，如下所示：

[{"_id":"54d6485357a52fc640bb3814","text":"Hämta tårta","completed":true},{"_id":"54d648ae57a52fc640bb3815","text":"Köpa dricka until Antons kalas", "完成":true}]

我现在第一次尝试用 Angular 编写前端。它在节点中运行良好，没有错误，但我的 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);
      });
}

我什至没有在控制台中打印任何内容，我不明白为什么......

【问题讨论】：

你应该在 Angular 代码上放一个断点，并测试 $scope.todos 是否获得了值
您在http.get 中缺少您的API-Base；你应该检查你的网络控制台，看看你的 HTTP 方法是否返回状态 200 OK。

标签： javascript angularjs node.js

【解决方案1】：

检查您的 Angular 应用程序是否正确连接。我在您的 html sn-p 中没有看到 ng-app 指令，ng-contoller="mainController" 中可能有错字（= 缺失）。此外，您的控制器未向模块注册（但在这种情况下，它不应该有任何区别）。这是JSFiddle，至少在请求数据时会显示错误消息。希望这有助于解决您的问题

【讨论】：

我现在添加了 =，它似乎工作得更好，至少我得到了两个与数据库中待办事项数量相匹配的复选框。但是我没有收到关于待办事项的任何文字。有什么建议吗？
我还看到 todos 被添加到范围...似乎是 {{ todo.text }} 的问题

【解决方案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);
  });

}]);

希望这会有所帮助。

【讨论】：