使用 MEAN 进行全栈开发基础篇——5、接着前面玩儿编辑

修改一个用户的信息

??在本节中，你将看到另一个 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 功能。