空のmongodbデータベースからデータを取得するのはなぜですか？

Question

私はtodoアプリケーションを実行しています。私のコードでは、ng-repeatディレクティブを使用して、データベースにあるように多くのtodoboxを作成しています。しかし、私の場合であってもデータベースが空であっても、5つのToDoボックスがあれば。それはおそらく私が呼んでいる私のloadDataの機能と関係がありますが、私はそれを理解することはできません。 Here is an image of what I get on my browser combined with the data from the debugger.。 localhost：3000/api/todosでリクエストを取得すると、データベースが空であるため、[]が正しく表示されます。何か案は？ここで

<div class="row"> 
    <h1>Things you have to do</h1> 
    <li ng-repeat="todo in todos"> 
    <p id="todobox"> {{ todo.name }} </p> 
    </li> 
    <form> 
    <input type="text" placeholder="I need to do..." ng-model="formData.newTodo" required> 
    <button ng-click="addTodo(formData)">Add</button> 
    </form> 
</div> 

は私のコントローラである：

var express = require('express'); 
var app = express(); 
var bodyParser = require('body-parser'); 
var mongoose = require('mongoose'); 

//connect to database 
mongoose.connect('mongodb://localhost:27017/tododbtest'); 

// set static files location 
// used for requests that our frontend will make 
app.use(express.static(__dirname + '/public')); 

//app.use(bodyParser.urlencoded({ extended: true })); 
app.use(bodyParser.json()); 
//define our model for the todos 
var Todo = mongoose.model('Todo', { 
    name: String, 
    //maybe change it to bool later 
    //checked: boolean 
}); 

//when I get a get request I'm going to send 
//the index.html file 
app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/public/index.html'); 
}); 

//get all the todos from the database 
app.get('/api/todos', function(req, res){ 
    Todo.find(function(err, todos){ 
    if(err) 
     res.send(err) 
    console.log(todos); 
    res.json(todos); 
    }); 
}); 

//create a todo 
app.post('/api/todos', function(req, res){ 
    console.log("Req.body.name:" + req.body.name); 
    Todo.create({name: req.body.name, checked: false}, 
    function(err, todo){ 
    if(err) res.send(err); 
    Todo.find(function(err, todos){ 
     if(err) res.send(err); 
     res.json(todos); 
    }); 
    }); 
}); 

app.listen(3000); 

Answer 1

$httpサービスリターン：

var app = angular.module('myApp', ['navigationDirective']); 

app.controller('MainController', ['$scope','$http', function($scope, $http){ 
    $scope.formData = {}; 

$scope.loadData = function(){ 
    $http.get('/api/todos') 
    .then(function(data){ 
     console.log('Data:' + data); 
     $scope.todos = data; 
    }); 
}; 
//call the loadData function that returns the data from the json file 
$scope.loadData(); 

//Add a new todo to the database 
$scope.addTodo = function(){ 
    $scope.formData = { 
    name: $scope.formData.newTodo 
    }; 
    $http.post('/api/todos', $scope.formData) 
    .then(function(data){ 
     console.log($scope.formData.name); 
     $scope.todos = data; 
     $scope.formData = {}; 
     console.log(data); 
    }); 
} 

}]); 

、ここでは私のserver.jsファイルです。ここ

は私htmlファイルの私の一部であり、応答オブジェクトに解決する約束。 Dataは、応答オブジェクトの5つのプロパティの1つです。 todos〜response.dataに設定します。

$http.post('/api/todos', $scope.formData) 
    .then(function(response){ 
     console.log($scope.formData.name); 
     $scope.todos = response.data; 
     $scope.formData = {}; 
    });