GitHub 项目地址：https://github.com/maxsky/ForUsers
删除一个用户
在本节中，你将学习如何使用 Monk 删除文档。你还将复习一下你对 Express 和 Angular 的一次学习。在本章结束时，所有部分应该像拼图合在一起。
我们将在几个步骤实现此功能。从服务器开始，我们将构建一个用于删除用户文档的 API 端点。然后，我们会在列表中每个用户的前面添加一个删除链接。当用户点击此链接时，他们将被重定向到可以看到用户详情的页面。我们在该页面上有一个确认删除按钮。点击此按钮后，将调用我们的 API 端点，然后他们将被带回到用户列表。
但在我们在开始之前，我有一个建议。我认为，到目前为止，你应该能够自己实现这个功能。我想让你花 10 - 15 分钟实现此功能作为一个练习，以应用你迄今为止所学到的。然后，你可以回来对比我的解决方案，看看是否有任何改进的余地。在开始之前，请注意：
最好是按照我之前提到的同样的顺序，一步一步地做这个练习。完成每个步骤后，请返回此处并查看您的解决方案。
如果忘记了 Express 或 Angular API 的语法，不要担心。这是学习一个新框架的自然现象。只需浏览源代码，查看我们之前做过类似的例子就好。
如果你遇到困难，请随时进行 Google 搜索。
1. 构造 API 端点
打开 routes->users.js 并添加这个新路由：
router.delete('/:id',function(req,res) {
var collection = db.get('users');
collection.remove({
_id: req.params.id
},function(err,user) {
if (err) throw err;
res.json(user);
});
});
这里的一切都应该很熟悉。唯一的区别是，我们使用router.delete 注册 HTTP DELETE 请求的路由处理程序。
此外，请注意，我们正在使用用户集合对象的 remove 方法。第一个参数，你可能猜到，是条件对象。
2. 构建一个删除页
转到 partials->home.html，并在每个用户前添加一个删除链接，如下所示：
<li ng-repeat='user in users'> <a href="/#!/user/{{user._id}}"> {{user.name}} </a> <a href="/#!/user/delete/{{user._id}}"> <i class="glyphicon glyphicon-remove"></i> </a> </li>
这里，<i> 用于渲染图标。glyphicon 和 glyphicon-remove 都是用于渲染图标的 Bootstrap 类。Bootstrap 包括几十个用于构建应用程序的现代图标。要查看所有图标的列表，请转到 此处。要渲染图标，您需要使用两个 CSS 类。一个是 glyphicon（所有图标的基础），另一个是特定于您使用的图标的类（glyphicon-remove）。在 Bootstrap 文档中，你可以看到图标下方每个图标的 CSS 类。
点击此图标即可转到 /#!/user/delete/{{user._id}} 上的某个页面。让我们创建这个视图并为它注册一个路由。
将一个名为 user-delete.html 的新文件添加到 partials 文件夹。在此文件中编写以下代码：
<h1>Delete User</h1> <p> Are you sure you want to delete this user? </p> <ul> <li>Name: {{user.name}}</li> <li>Age: {{user.age}}</li> <li>Gender: {{user.gender}}</li> </ul> <input type="button" value="Yes,Delete" class="btn btn-danger" ng-click="delete()" /> <a class="btn btn-default" href="/#!/">No,Go Back</a>
这里没有什么特别的。我使用简单的 ul 和 li 来显示用户的不同属性。在现实的应用程序中，您可以使用更复杂的标签。
只要注意，我添加了 btn-danger 类到删除按钮使它显示为红色，和 btn-default 的后退按钮，使它呈白色。
回到 forusers.js 中，我们需要创建一个路由来注册此视图和控制器：
.when('/user/delete/:id',{ templateUrl: 'partials/user-delete.html' })
完成以上步骤后，回到浏览器，刷新页面并点击任一用户的 x 图标，将如下所示：
接下来，我们需要一个控制器。在此控制器中，我们将调用我们的 API 以获取网页加载时用户的详细信息。此外，当用户点击删除按钮时，我们会调用 API 删除用户。
打开 forusers.js 并创建这个控制器：
app.controller('DeleteUserCtrl',['$scope','$resource','$location','$routeParams',function($scope,$resource,$location,$routeParams) {
var Users = $resource('/api/users/:id');
Users.get({ id: $routeParams.id },function(user) {
$scope.user = user;
})
$scope.delete = function() {
Users.delete({ id: $routeParams.id },function() {
$location.path('/');
});
}
}
]);
再次，在这一点上一切都应该很熟悉。
.when('/user/delete/:id',{ templateUrl: 'partials/user-delete.html',controller: 'DeleteUserCtrl' })
你完成了。让我们测试删除功能。返回浏览器，然后刷新主页。单击删除图标。删除其中一个用户。用户将被删除，你将被重定向到首页。
Wrapping Up
如果你这么做了，你已经证明你热衷于学习新事物。所以这是一个伟大的工作。我希望你喜欢这几篇博文，并学习到 Node，Express，Angular 和 MongoDB 的基础。
你使用 Node，Express，Angular 和 MongoDB 成功构建了具有完整 CRUD 功能的应用程序。
你使用 Express 创建了一个 RESTful API，支持 GET，POST，PUT 和 DELETE。
你在 Node 中了解了模块系统并使用了
require方法。你了解了节点软件包管理器（NPM）并使用它来安装 Node 模块。
你使用了 Angular 构建单页应用程序。
你学习了 Angular 的依赖管理。
你使用 Angular 的内置服务，例如
$scope，$resource，$location和$routeParams。你使用 Angular 指令（
ng-model，ng-click）向 DOM 元素添加了行为。你熟悉了 Bootstrap，给你的表单和按钮添加了漂亮的外观。
欢迎指导各种意见，请在评论区提出，我将更正。
