在ToDo列表应用程序中设置更新
我正在使用AngularJS，Node，Express和MongoDB创build一个CRUD todo应用程序。 除了更新部分，我已经弄清了所有部分。 我真的不知道如何实现，或者代码可能看起来像什么。 特别是AngularJS的东西（快速路由不是那么糟糕）。 我想如果我可以通过ID更新。 希望得到一些意见。
function mainController($scope, $http) { $scope.formData = {}; // 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) { $('input').val(''); $scope.todos = data; }) .error(function(data) { console.log('Error: ' + 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); }); }; 这里是路线，以防万一。
app.get('/api/todos', function(req, res) { // use mongoose to get all todos in the database Todo.find(function(err, todos) { // if there is an error retrieving, send the error. nothing after res.send(err) will execute if (err) res.send(err) res.json(todos); // return all todos in JSON format }); }); // create todo and send back all todos after creation app.post('/api/todos', function(req, res) { // create a todo, information comes from AJAX request from Angular Todo.create({ text : req.body.text, done : false }, function(err, todo) { if (err) res.send(err); // get and return all the todos after you create another Todo.find(function(err, todos) { if (err) res.send(err) res.json(todos); }); }); }); // delete a todo app.delete('/api/todos/:todo_id', function(req, res) { Todo.remove({ _id : req.params.todo_id }, function(err, todo) { if (err) res.send(err); // get and return all the todos after you create another Todo.find(function(err, todos) { if (err) res.send(err) res.json(todos); }); }); }); // application ------------------------------------------------------------- app.get('*', function(req, res) { res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end) }); };
有两种方法 – 你可以使用$ http.put bu你也可以使用$ resource。 我希望这会帮助你
的index.html
<!DOCTYPE html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-resource.min.js"></script> <script type="text/javascript" src="angularjs_app.js"></script> </head> <body> <div ng-controller="MainController"> <form name="todoForm" novalidate> <label>Id</label> <input type="text" name="_id" ng-model="editTodo._id"> <br/> <label>Subject</label> <input type="text" name="subject" ng-model="editTodo.subject"> <br/> <label>Description</label> <input type="text" name="desc" ng-model="editTodo.desc"> <br/> <button ng-click="updateTodo()">Update Todo</button> </form> </div> </body> </html>
angularjs_app.js（1 Way）
var myApp = angular.module('myApp', []); myApp.controller('MainController', ['$scope', function($scope) { $scope.updateTodo = function() { $http.put('/api/todos/' + $scope.editTodo._id, $scope.editTodo).success(function() { alert('Todo updated'); }); // Or you can try // $http.put('/api/todos/' + $scope.editTodo._id, {"todo": $scope.editTodo}) // .success(function(data, status, headers, config){ // $scope.editTodo = data.todo; // }) // .error(function(data, status, headers, config){ // alert(data.error_message); // }); }; }]);
angularjs_app.js（2 Way）
var myApp = angular.module('myApp', ['ngResource', 'myAppServices']); myApp.controller('MainController', ['$scope', 'TodoFactory', function($scope, TodoFactory) { $scope.updateTodo = function() { TodoFactory.update($scope.editTodo, function() { alert('Todo updated'); }); }; }]); var myAppServices = angular.module('myAppServices', ['ngResource']); myAppServices.factory('TodoFactory', ['$resource', function($resource) { return $resource('/api/todos/:todoId', {}, { update: {method:'PUT', params: {todoId: '@_id'}} }); } ]);
nodejs_server.js
var express = require('express'); var path = require('path'); var http = require('http'); var todos = require('./routes_todos'); var app = express(); app.configure(function() { app.set('port', process.env.PORT || 3000); app.use(express.logger('dev')); /* 'default', 'short', 'tiny', 'dev' */ app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(express.static(path.join(__dirname, 'public'))); }); app.get('/api/todos', todos.findAll); app.get('/api/todos/:id', todos.findById); app.post('/api/todos', todos.add); app.put('/api/todos/:id', todos.update); app.delete('/api/todos/:id', todos.remove); http.createServer(app).listen(app.get('port'), function() { console.log("Express server listening on port " + app.get('port')); });
routes_todos.js
var mongo = require('mongodb'); var Server = mongo.Server; var Db = mongo.Db; var BSON = mongo.BSONPure; var server = new Server('localhost', 27017, {auto_reconnect: true}); db = new Db('todosdb', server); db.open(function(err, db) { if (!err) { console.log("Connected to 'todosdb' database"); db.collection('todos', {strict: true}, function(err, collection) { if (err) { console.log("Error todos does not exist"); } }); } }); exports.findAll = function(req, res) { db.collection('todos', function(err, collection) { collection.find().toArray(function(err, items) { console.log('todos send from DB'); res.send(items); }); }); }; exports.findById = function(req, res) { var id = req.params.id; console.log('Retrieving todo: ' + id); db.collection('todos', function(err, collection) { collection.findOne({'_id': new BSON.ObjectID(id)}, function(err, item) { res.send(item); }); }); }; exports.add = function(req, res) { var todo = req.body; console.log('Adding todo: ' + JSON.stringify(todo)); db.collection('todos', function(err, collection) { collection.insert(todo, {safe: true}, function(err, result) { if (err) { res.send({'error': 'An error has occurred'}); } else { console.log('Success: ' + JSON.stringify(result[0])); res.send(result[0]); } }); }); }; exports.update = function(req, res) { var id = req.params.id; var todo = req.body; console.log('Updating todo: ' + id); console.log(JSON.stringify(todo)); delete todo._id; db.collection('todos', function(err, collection) { collection.update({'_id': new BSON.ObjectID(id)}, todo, {safe: true}, function(err, result) { if (err) { console.log('Error updating todo: ' + err); res.send({'error': 'An error has occurred'}); } else { console.log('' + result + ' document(s) updated'); res.send(todo); } }); }); }; exports.remove = function(req, res) { var id = req.params.id; console.log('Removing todo: ' + id); db.collection('todos', function(err, collection) { collection.remove({'_id': new BSON.ObjectID(id)}, {safe: true}, function(err, result) { if (err) { res.send({'error': 'An error has occurred - ' + err}); } else { console.log('' + result + ' document(s) removed'); res.send(req.body); } }); }); };
- 当Angular不可用时，如何等待一个元素与量angular器可见？
- 有什么方法可以限制ng-repeat中的重复项目的数量？
- 如何使用angular postgres和node在configuration文件中显示数据库中的用户信息？ 我的代码不起作用
- $ location.path不使用Angularjsbutton点击加载html文件
- 在路由改变时重新加载不受ngRoutepipe理的控制器
- 锚标签和$ http.get之间的根本区别是什么？
- 如何在Leaflet.js中使用Angular JS
- 如何在AngularJS客户端和Node.js服务器之间重新使用代码
- 与Express.js和Angular2的CORS