修改一个用户的信息
在本节中，你将看到另一个 API 端点，Angular 视图，控制器和路由的示例。
我们将以类似的方式来处理这一部分。首先，我们创建两个 API 端点：一个用于获取具有 ID 的用户，另一个用于更新用户。然后，我们会在首页中为每个用户添加一个链接。当用户点击此链接时，他们将被重定向到填充了用户详细信息的表单。当他们点击保存，修改的信息将被保存，然后他们将被返回到主页。
1. 创建一个 API 端点
这一步应该已经很熟悉了。我们将创建两个新路由：
GET /api/users/{id}
PUT /api/users/{id}
所以，打开 routes->users.js。并添加以下路由：
router.get('/:id',function(req,res) {
var collection = db.get('users');
collection.findOne({
_id: req.params.id
},function(err,user) {
if (err) throw err;
res.json(user);
});
});
注意，这里我们有一个路由参数，由冒号（:id）表示。你可以使用 req.params.id 访问此参数的值。
除此之外，这个路由配置的其余部分类似于你以前见过的。唯一的区别是，我们使用集合的 findOne 方法只返回一个对象。此方法的第一个参数是条件对象。因此，我们正在寻找一个 _id 等于 req.params.id 的文档。
现在，创建另一个路由：
router.put('/:id',res) {
var collection = db.get('users');
collection.update({
_id: req.params.id
},{
name: req.body.name,age: req.body.age,gender: req.body.gender
},user) {
if (err) throw err;
res.json(user);
});
});
注意，我们使用 router.put 定义了这个路由。只有当有到此端点的 HTTP PUT 请求时，才会调用此处理程序。
我们使用集合对象的 update 方法来更新文档。第一个参数是条件对象。我们正在尝试仅更新 _id 等于 req.params.id 的文档。第二个参数表示要更新的值。
其余的很简单。
2. 创建一个编辑页
首先，我们需要在首页上为每个用户添加一个链接。打开 partials->home.html 并更改 li，如下所示：
<li ng-repeat="user in users"> <a href="/#!/user/{{user._id}}"> {{user.name}} </a> </li>
我们使用 Angular 绑定表达式根据用户的 ID 呈现动态网址。同样，请注意，为了与旧版本的浏览器兼容，URL 前面加上 /#!
现在我们需要一个视图和一个表单来编辑用户。但是，我们已经有一个带表单的视图。所以，最好重用它。
在 forusers.js 中，添加此新路由：
.when('/user/:id',{
templateUrl: 'partials/user-form.html'
})
因为我们还没有创建控制器，也没有设置路由的控制器。我们只是回顾一下我们的工作到这一点。
返回浏览器，转到主页，并确保刷新页面。现在，每个用户都应该使用超链接来表示。点击任一用户。应该看到一个空表单，但是 URL 发生了变化
在下一步中，我们将向此表单添加行为。我们将在加载时填充表单，并添加单击保存按钮的处理操作。
3. 实现编辑控制器
现在我们有两个选择。我们可以创建一个新的控制器，如 EditUserCtrl，或重用现有的控制器（AddUserCtrl）。你认为最好的解决方案是什么？ 答案是：没有最佳解决方案。这一切都取决于所处的环境中。如果两种情况（添加和编辑）有很多相似之处，只有很少的差别，那么创建一个处理这两种情况的控制器是有意义的。您需要一些条件语句来区分添加和编辑方案。另一方面，如果这两个场景中的行为相当不同，那么在一个控制器中最终会出现很多丑陋的条件语句。在这种情况下，最好将它们分成两个不同的控制器。
在编写本教程的这一步之前，我开始重复使用相同的控制器，我不是很高兴其最终结果。所以，我决定把它们分成两个不同的控制器。
在 forusers.js 中，创建一个新的控制器如下：
app.controller('EditUserCtrl',['$scope','$resource','$location','$routeParams',function($scope,$resource,$location,$routeParams) {
var Users = $resource('/api/users/:id',{ id: '@_id' },{
update: { method: 'PUT' }
});
Users.get({ id: $routeParams.id },function(user) {
$scope.user = user;
});
$scope.save = function() {
Users.update($scope.user,function() {
$location.path('/');
});
}
}
]);
解释一下。
首先，这个控制器，与我们的 AddUserCtrl 不同，有四个依赖。我们在这里有一个额外的依赖：$routeParams，我们用来访问路由中的参数（URL）。在这种情况下，要编辑的用户 ID 将是我们的路由参数。
在这个控制器的主体中，首先我们使用 $resource 服务获取一个对象来使用我们的 API 端点。但这一次，我们以不同的方式使用 $resource 服务。
var Users = $resource('/api/users/:id',{
update: { method: 'PUT' }
});
第一个参数是到我们的端点的 URL。但是，这里我们有一个由冒号（:id）指示的路由参数。我们使用参数化路由，因为我们在本节前面创建的两个 API 端点包括路由参数。
GET /api/users/:id
PUT /api/users/:id
此方法的第二个参数是一个对象，它为路由中的：id参数提供默认值。
{ id: '@_id' }
这里，“@_id”告诉 Angular 在请求的对象中查找名为 _id 的属性。因此，当我们向 PUT /api/users/:id 发送请求时，Angular 将使用请求用户对象的 _id 属性，在路由中设置 :id 参数。
$resource 方法的第三个参数用于扩展 $resource 服务。
{ update: { method: 'PUT' } }
由于某些原因只有 Angular 的开发人员知道，默认情况下您不能使用 $resource 服务发送 HTTP PUT 请求。您需要通过添加使用 HTTP PUT 的更新方法来扩展它。
接下来，我们使用 Users.get 获取具有给定 ID 的用户。
Users.get({ id: $routeParams.id },function(user) {
$scope.user = user;
});
这是在页面加载时填充表单。Users.get 的第一个参数提供了路由中的 :id 参数的值。我们使用 $routeParams.id，它允许我们访问浏览器地址栏中的参数。还记得编辑页面的路由声明？
.when('/user/:id',{
templateUrl: 'partials/user-form.html'
})
在那里，我们使用了一个路由参数（:id）。所以，我们可以访问它与 $routeParams。
在 Users.get 的回调方法。我们获取从服务器返回的用户并将其存储在 $scope 中。这样，使用 Angular 的双向绑定在后台运行，表单将自动填充我们的用户对象。还记得 ng-model？ 我们将输入字段绑定到 $scope 上的用户对象的属性。输入字段中的任何更改都将反映在 $scope 中，反之亦然。
最后，在控制器的主体中，我们定义了一个保存方法，当用户单击保存按钮时将调用该方法。
$scope.save = function() {
Users.update($scope.user,function() {
$location.path('/');
});
}
注意，在这里，我们使用 Users.update 而不是Users.save。这是我们在扩展 $resource 服务时定义的新方法。因此，这将向我们的 API 端点发出 HTTP PUT 请求。
我们差不多完成了。新的控制器准备就绪。我们只需要在路由配置中引用它。更改路由配置如下：
.when('/user/:id',{
templateUrl: 'partials/user-form.html',controller: 'EditUserCtrl'
})
让我们来测试这个新功能。返回浏览器，然后刷新主页。选择其中一个用户。进行一些更改，然后单击保存按钮。一切都应该工作。
在下一节中，我们将向用户管理应用添加删除功能，以构建完整的 CRUD 功能。