添加一个新用户
在本节中，你将了解有关使用 Express 创建 API 端点，使用 Angular 构建表单，以及使用 Monk 在 Mongo 中存储文档的更多信息。
与上一节类似，我们将从后端到前端的几个步骤中实现此功能。首先，我们将创建一个用于添加用户的 API 端点。我们将使用 Express 路由创建此端点并使用 Monk 在 Mongo 中存储用户文档。然后，我们将创建一个包含表单的新网页，以添加用户。我们将使用 Angular 构建此页面。
Let’s get started.
1. 创建一个 API 端点
打开 routes->users.js，在现有的路由之后和 module.exports 之前添加这个新路由（记住，module.exports 应该是你模块的最后一行）：
router.post('/',function(req,res) {
var collection = db.get('users');
collection.insert({
// 这里应该是和之前的用户保持同样属性
// 有姓名、年龄、性别
name: req.body.name,age: req.body.age,gender: req.body.gender
},function(err,user) {
if (err) throw err;
res.json(user);
});
});
这段代码应该相当熟悉。谈谈重要的部分。首先，注意使用 router.post 方法。在上一篇中，我们使用了 router.get 方法来处理 HTTP GET 请求。这里，我们使用 HTTP POST，这是用于创建新对象的 REST 约定。
在路由处理程序中，首先我们获得对用户集合的引用，然后使用 insert 方法向 Mongo 添加一个新文档。
此方法的第一个参数是具有三个属性的 JSON 对象：name，age 和 gender。我们使用 req.body 读取这些属性的值。此对象表示将在请求的正文中提交的数据。
最后，在用于插入文档的回调方法中，如果我们没有得到任何错误，我们使用响应（res）的 json 方法返回一个 JSON 表示的新用户文档。
2. 创建一个表单
好的，API 准备好了。现在我们需要一个用于添加用户的表单。
在 public->partials 下创建一个名为 user-form.html 的新视图文件。在此视图中键入以下代码：
<h1>Add a User</h1>
<form>
<div>
<label>Name</label>
<input></input>
</div>
<div>
<label>Age</label>
<input type="number"></input>
</div>
<div>
<label>Gender</label>
<input></input>
</div>
<input type="button" value="Save"></input>
</form>
现在，我们需要告诉 Angular 在用户访问到 /add-user 时呈现这个视图。我们需要一个新的路由这么做。
打开 forusers.js 并更新路由配置代码，如下所示：
app.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'partials/home.html',controller: 'HomeCtrl'
})
// 添加这一部分
.when('/add-user',{
templateUrl: 'partials/user-form.html'
})
.otherwise({
redirectTo: '/'
});
}]);
注意，我没有在这里设置控制器，因为我们还没有。我们将在下一步中这样做。
视图和路由准备就绪。最后，我们需要在我们的主页中添加一个 /add-user 的链接。打开 partials->home.html 并在 ul上方添加一个新链接：
<p>
<a href="/#!/add-user">Add a User</a>
</p>
请注意，你应该在你的 Angular 应用程序中的链接前面加上 /#!【注：原教程和译文均为 /#，现在多了一个感叹号】。这用于兼容不支持单页应用程序的旧版浏览器。
让我们预览我们迄今为止做了什么。返回浏览器，然后刷新主页。你应该会看到添加用户的链接。点击链接并查看添加用户页面。
我不得不承认，这个表单看起来真的很丑陋，它离一个真正的应用程序很远。让我们给它加上一个漂亮的外观。
添加并使用 Bootstrap
我们将使用 Bootstrap 为我们的表单添加一点风格。 如果你不熟悉 Bootstrap，它是一个前端 CSS 框架，用于构建现代和响应式Web应用程序。在这一步中，我们将引用 Bootstrap CSS 文件并使用一些 Bootstrap 类来装饰我们的表单元素。
打开 views->layout.jade 文件
添加如下行在 head 中的 link 下:
link(rel="stylesheet",href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css")
确保它与上一行具有相同的缩进级别。
现在，回到 partials->user-form.html。添加下面的类到 HTML 元素中：
<h1>Add a User</h1>
<form>
<div class="form-group">
<label>Name</label>
<input class="form-control"></input>
</div>
<div class="form-group">
<label>Age</label>
<input class="form-control" type="number"></input>
</div>
<div class="form-group">
<label>Gender</label>
<input class="form-control"></input>
</div>
<input class="btn btn-primary" type="button" value="Save"></input>
</form>
这些类是用于创建表单的标准 Bootstrap 类。有关如何使用 Bootstrap 创建现代表单的更多信息，请参阅 Bootstrap 文档。
让我们回到浏览器并刷新页面。嗯…现在看起来好多了
现在，这个表单没有行为。如果点击保存按钮，是没有任何反应的。这也是我们接下来要实现的东西。
实现添加的控制器
正如我之前告诉所说，在 MVC 框架中，控制器负责处理视图引发的事件。我们将创建一个 Angular 控制器来处理 Save 按钮的点击事件。
app.controller('AddUserCtrl',['$scope','$resource','$location',function($scope,$resource,$location) {
$scope.save = function() {
var Users = $resource('/api/users');
Users.save($scope.user,function() {
$location.path('/');
});
};
}
]);
这个控制器有三个依赖：$scope 作为控制器和视图之间的胶水，$resource 用于使用我们的 RESTful API，$location 用于改变浏览器地址栏中的 URL。所有这些都是内置的 Angular 服务。
在这个控制器的主体中，我们在 $scope 上定义了 save 方法。当用户单击保存按钮时将调用此方法。我们很快就会把这个方法链接到我们的视图。现在，让我们看看这个方法里面发生了什么。
首先，我们调用 $resource 方法传递我们的 API（/api/users）地址。这将返回一个对象的方法来使用 API。在最后一节中，我们使用查询方法来获取所有用户。在这里，我们使用 save 方法将用户提交到我们的 API。
Users.save 方法有两个参数：要提交的对象和回调函数，这将指示异步调用完成。在回调中，我们使用 $location 服务将浏览器的地址更改为网站的根目录。Angular 知道（根据我们的路由）根 URL 绑定到主视图。它将向用户显示主页。
现在，打开 partials->user-form.html 并更改输入字段如下：
<h1>Add a User</h1>
<form>
<div class="form-group">
<label>Name</label>
<input class="form-control" ng-model="user.name"></input>
</div>
<div class="form-group">
<label>Age</label>
<input class="form-control" type="number" ng-model="user.age"></input>
</div>
<div class="form-group">
<label>Gender</label>
<input class="form-control" ng-model="user.gender"></input>
</div>
<input class="btn btn-primary" type="button" value="Save"></input>
</form>
ng-model 属性是我们用于数据绑定的另一个指令。这样，我们告诉 Angular，任何时候我们的输入字段中的值被改变，它应该自动更新 $scope 被引用的属性。在第一个示例中，当标题文本框的值更改时，Angular 将自动在 $scope.user.title 中设置它。
接下来，更改按钮声明如下：
<input class="btn btn-primary" type="button" value="Save" ng-click="save()"></input>
ng-click 属性是我们用来处理 HTML 元素的点击事件的另一个 Angular 指令。有了这个指令，我们告诉 Angular，如果用户点击这个按钮，它应该在 $scope 上执行 save 方法，这是我们在前几分钟定义的。
最后，在路由中注册这个新的控制器：
.when('/add-user',{
templateUrl: 'partials/user-form.html',controller: 'AddUserCtrl'
})
我们完成了。让我们测试一下应用程序。返回浏览器，填写表单并提交。您应该会在列表中看到一个新用户。
【当然，我们这个页面是没有做数据验证的，如果你什么都不输入直接点 Save，也会存入一条空数据】
让我们快速回顾一下在本节中学到的内容。我们使用 Express 创建了一个新的 API 端点，并使用 Monk 在 Mongo 中存储用户文档。然后，我们创建了一个带有表单的 Angular 视图来添加用户。我们使用 Bootstrap 美化了表单。最后，我们为此视图创建了控制器来处理点击事件。在点击事件的处理程序中，我们使用 $resource 服务将数据提交到服务器。
