如何获得角应用访问后端的API

所以，我已经做的工作对一个待办事项应用程序内我是个后端API，我知道http://localhost:3000/api/todo/done工作和返回两个对象，看起来像这样：如何获得角应用访问后端的API

[{ “_id”：“54d6485357a52fc640bb3814”，“text”：“Hämtatårta”，“completed”：true}，{“_ id”：“54d648ae57a52fc640bb3815”，“text”：“Köpadricka till Antons kalas”，“completed” }]

我现在写了一个角度的前端第一次尝试。这一切都在节点运行良好，没有错误，但我没有得到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>

ANGULAR CODE：

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); 
     }); 
}

我甚至不得到任何东西印在控制台，我不明白为什么...

来源

2015-02-08 The Kaizer

您应该在角码上放置一个断点，并测试$ scope.todos是否获取值 – 2015-02-08 20:55:01

您在'http.get'中缺少API-Base;你应该检查你的网络控制台，看你的HTTP方法是否返回状态200 OK。 – Bricktop 2015-02-08 20:59:36

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

来源

2015-02-08 21:33:51 Stubb0rn

我添加了=现在，它似乎工作得更好，至少我有两个复选框与数据库中的待办事项数目匹配。但是，我没有得到任何文字的待办事项。有小费吗？ – 2015-02-09 08:04:10

我还看到todos已添加到范围内...似乎是{{todo.text}}的问题 – 2015-02-09 08:11:42

尝试在html（注意ng-app atribute）引用您的模块。

<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); 
    }); 

}]);

希望这有助于。

来源

2015-02-08 21:50:14 uonchiu

如何获得角应用访问后端的API

回答

相关问题