2013-12-09 48 views
1

我一直在對我的頭撞這幾天,我仍然不確定什麼是錯的。當我加載本地主機時,我收到無限的項目列表。這些項目通常是空的,不包含任何東西。當我嘗試刪除它們時,我得到一個404錯誤,說'api/todos/undefined。'MEAN Stack CRUD todolist給予無限列表,不會刪除

以下是代碼。我很抱歉,如果它很多。我只是不知道錯誤在哪裏。也許它在命名中?還有一個路由問題。

var mongoose = require('mongoose'); 

mongoose.connect('mongodb://localhost/'); 

var Todo = mongoose.model('todos', { 
    text : String 
}); 

module.exports.Todo = Todo; 

控制器

變種baselTodo = angular.module( 'baselTodo',[]);

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

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


    // when submitting the add form, send the text to the node API 
    $scope.createTodo = function() { 
     $http.post('/api/todos', $scope.formData) 
      .success(function(data) { 
       $scope.todos = data; 
      }) 
      .error(function(data) { 
       console.log('Error: ' + data); 
      }); 
     $http.get('/api/todos').success(function(data) { 
      $scope.todos = data; 
     }) 
    }; 

    // delete a todo after checking it 
    $scope.deleteTodo = function(id) { 
     $http.delete('/api/todos/' + id) 
      .success(function(data) { 
       $scope.todos = data; 
      }) 
      .error(function(data) { 
       console.log('Error: ' + data); 
      }); 
    }; 

    { 
    $scope.updateTodo = function(id) { 
     $scope.newItem = prompt("Please enter your new item: ", ""); 
     $http.put('/api/todos/' + id, {text: $scope.newItem}).success(function(data) { 
       $scope.todos = data; 
      }); 

      $http.get('/api/todos').success(function(data) { 
       $scope.todos = data; 
      }); 
    }}; 




}; 

HTML

<body ng-controller="mainController"> 

<div class="container"> 
    <div id="person-form"> 
     <form> 

      <div class="form-group"> 
       <h1>Enter Item:</h1> 
       <input type="text" ng-model="formData.text"> 
      </div> 

      <button ng-click="createTodo()">Create</button> 

      <h3>Current List:</h3> 
      <ul ng-repeat="todo in todos"> 
       <li> {{todo.text + " || ID: " + todo._id}} </li> 
       <button ng-click="updateTodo(todo._id)">Update</button> 
       <button ng-click="deleteTodo(todo._id)">Delete</button> 
      </ul> 

     </form> 
    </div> 
</div> 

</body> 
</html> 

服務器

// ================== SERVER.JS ======================== 

    // set up ------------------------------------------ 
    var api = require('./routes/api'); 
    var express = require('express'); 
    var app = express();  

    // configuration ----------------------------------- 
    app.configure(function() { 
     app.use(express.static(__dirname + '/public')); 
     app.use(express.logger('dev')); 
     app.use(express.bodyParser()); 
     app.use(express.methodOverride()); 
    }); 

    // listen (start app with node server.js) ---------- 
    app.listen(3000); 
    console.log("App listening on port 3000"); 

    // routing ----------------------------------------- 

    // Main Page 
    app.get('/', function(req, res) { 
     res.sendfile('./public/index.html'); 
    }); 

    // API Routing 
    app.get('/api/users', api.read); 
    app.post('/api/users', api.create); 
    app.put('/api/users/:_id', api.update); 
    app.delete('/api/users/:_id', api.delete); 

回答

0

你錯過了在server.js文件中的分號。你需要這個:

app.put('/api/todos/:_id', api.update); 

也給另一個分號加分號。

+0

這工作,以便事實上更新,但它不會改變我一直得到加載本地主機時加載無限列表的列表的事實。 – KFDoom

+0

我不知道我是否可以幫忙。我仍然在學習這些東西。 – user2993058

+0

我認爲你的mongo中有垃圾數據。打開芒果殼並手動清除它們。 – Sriharsha