如何獲得角應用訪問後端的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

回答

相關問題