使用 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', function(req, res) {    var collection = db.get('users');    collection.update({        _id: req.params.id    }, {        name: req.body.name,        age: req.body.age,        gender: req.body.gender    }, function(err, 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', { id: '@_id' }, {    update: { method: 'PUT' }});

  第一个参数是到我们的端点的 URL。但是，这里我们有一个由冒号（:id）指示的路由参数。我们使用参数化路由，因为我们在本节前面创建的两个 API 端点包括路由参数。

GET /api/users/:idPUT /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 功能。