转载

【译】基于MEAN的全栈开发实例教程5：实现编辑功能

原文地址 https://blog.udemy.com/node-js-tutorial

感谢来自Udemy的Samantha来信分享

编辑一个视频

在这一节中，你将看见另一个API端点，Angular视图，控制器和路由。

我们将以类似的方式从这一部分到最后一个部分。首先，我们将建立两个API端点：一个用于通过ID获取视频，另一个用于更新视频。然后，我们将添加一个链接到主页中的每个视频。当用户点击这个链接，他们将被重定向到一个由视频详情填充的表单。当他们点击保存，更改将被保存然后返回到主页。

第1步：创建API端点

下面这一步很熟悉，创建两个新的路由：

GET /api/videos/{id} PUT /api/videos/{id}

然后打开 routes>videos.js 添加以下路由信息：

router.get('/:id', function(req, res) {  var collection = db.get('videos');  collection.findOne({ _id: req.params.id }, function(err, video){   if (err) throw err;   res.json(video);  }); });

注意这里有一个路由参数，在一个冒号后面声明(:id)。你可以访问这个参数值通过 req.params.id 。

除此之外，其余的这条路由配置是类似于你以前见过的。唯一的区别是，我们使用集合中的findOne方法来返回一个对象。对该方法的第一个参数是标准对象。因此，我们通过_id等于req.params.id来寻找一个文档。

创建另一个路由：

router.put('/:id', function(req, res){  var collection = db.get('videos');  collection.update({   _id: req.params.id  },  {   title: req.body.title,   description: req.body.description  }, function(err, video){   if (err) throw err;   res.json(video);  }); });

注意我们通过 router.put 来定义这个路由。当这个端点上有HTTP PUT请求时这个处理器将会被调用。

通过集合中的 update 方法来更新一个文档。第一个参数是一个标准对象。只更新 _id 和 req.params.id

匹配的文档。第二个参数代表了需要更新的值。

这种rest接口其实非常简单。

第2步：创建一个编辑页面

首先我们需要为主页上的每个视频添加一个链接。打开 partials>home.html 如下改变LI标签。

<li ng-repeat='video in videos'>     <a href="/#/video/">              </a> </li>

Angular绑定表达式通过视频ID来渲染动态URL。注意这个URL带有前缀 /# 来兼容老的浏览器。

现在我们需要通过一个带有表单的视图来编辑一个视频。现在我们已经有了一个带有表单的视图。所以我们我考虑重用它。

在 vidzy.js 中添加一个新的路由：

.when('/video/:id', {     templateUrl: 'partials/video-form.html' })

由于我们还没有创建控制器，所以在路由中还不能设置控制器。让我们来回顾一下我们的工作。

回到浏览器主页然后刷新页面。每个视频现在都由一个超链接替代。点击一个视频。你将看见一个空的表单。

下一步我们为表单添加行为：填充表单数据和处理点击保存按钮事件。

第3步：实现控制器

现在我们有了2个选择。我们可以创建一个新的控制器，如editvideoctrl，或使用现有的控制器（addvideoctrl）。你认为最好的解决办法是什么？答案是：没有最好的解决办法。需要看情况而定。如果2个案例（添加和编辑）有很多相似之处，则创建一个控制器来处理这两种情况。另一方面，如果两个场景有很大的不同，你会写很多丑陋的条件语句在一个控制器中。这种情况下，最好把它们分为2个不同的控制器。

在写这一步的教程之前，我开始重复使用相同的控制器但是我对最终结果感到不满意。所以，我决定把它们拆分成2个不同的控制器。

在 vidzy.js 中，如下创建一个新的控制器：

app.controller('EditVideoCtrl', ['$scope', '$resource', '$location', '$routeParams', function($scope, $resource, $location, $routeParams){     var Videos = $resource('/api/videos/:id', { id: '@_id' }, {   update: { method: 'PUT' }  });  Videos.get({ id: $routeParams.id }, function(video){   $scope.video = video;  });  $scope.save = function(){   Videos.update($scope.video, function(){    $location.path('/');   });  }; }]);

让我解释一下这里发生了什么。

首先，这个控制器，并不像我们的 AddVideoCtrl 有4个依赖。这里我们有一个额外的依赖： $routeParams 用来访问路由参数。这种情况下，编辑中使用的视频ID将成为路由参数。

在这个控制器内，首先我们使用 $resource 服务来获取一个对象通过和API端点交互。但这一次，我们通过另一种方式来使用 $resource 。

var Videos = $resource('/api/videos/:id', { id: '@_id' }, {      update: { method: 'PUT' } });

传输给端点的第一个参数是URL。这里我们有一个冒号声明的参数(:id)。因为我们在这一节中之前创建的端点都是带有路由参数的，所以我们使用参数化的路由。

GET /api/videos/:id PUT /api/videos/:id

这个方法的第2个参数是1个对象，为路由参数 :id 提供默认值。

{ id: '@_id' }

这里 ‘@_id’ 告诉Angular在请求对象中查找一个叫做 _id 的属性。所以当我们发送一个PUT请求 /api/videos/:id ，Angular将使用视频对象的_id属性来设置路由中的:id参数。

$resource方法第3个参数用来扩展 $resource 服务。

{ update: { method: 'PUT' } }

只有Angular的开发者才知道，在某些情况下，默认你不能用$resource服务发送HTTP PUT请求，你需要扩展它通过一个使用HTTP UPT的 update 方法。

下面我们通过给定的ID使用 Videos.get 来获取这个视频。

Videos.get({ id: $routeParams.id }, function(video){     $scope.video = video; });

现在实现在页面加载的时候填充表单。 Videos.get 方法的第一个参数为路由提供了第一个参数 :id 。我们使用 $routeParams.id 来获取浏览器地址栏中的这个参数。还记得我们为编辑页面定义的路由吗？

.when('/video/:id', {     templateUrl: 'partials/video-form.html', })

这里我们使用一个路由参数（:id）。然后我们通过 $routeParams 来访问它。

在 Videos.get 的回调方法中，我们从服务端获得返回的视频然后将它存储在 $scope 中。同时通过Angular的双向数据绑定在后台运行，这个表格将会被我们的视屏对象自动填充。还记得 ng-model 吗？我们将输入域绑定到$scope对象的属性上。任何在输入域上发生的改变将会反射到$scope，反之亦然。

最后在控制器中，我们定义一个 save 方法，当保存按钮被点击时调用。

$scope.save = function(){     Videos.update($scope.video, function(){         $location.path('/');     }); }

注意这里，我们用 Videos.update 来替代 Videos.save 。这是我们早在扩展 $resource 服务的时候就定义的新方法。这里将发送一个HTTP PUT请求给我们的API端点。

到这里差不多完成了。新控制器已经写好了。我们只需要添加引用到路由配置中。如下改变路由配置：

.when('/video/:id', {     templateUrl: 'partials/video-form.html',     controller: 'EditVideoCtrl' })

让我们测试这个新功能。返回到浏览器，刷新主页。选择一个视频。做一些修改，点击保存按钮。一切都应该工作。

在下一节中，我们将添加一个功能，来使我们的视频租赁商店的应用程序具有完整的增删改查功能。

如果觉得阅读这篇文章有收获，不妨点个赞吧^_^

博客： http://yalishizhude.github.io

作者：亚里士朱德

正文到此结束

所属分类：编程技术

本文标签： 博客测试 find GitHub http update API js IDE 开发 https 数据参数 git 开发者 REST ip 配置 json db cat HTML 文章 node description App
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

【译】基于MEAN的全栈开发实例教程5：实现编辑功能

编辑一个视频

第1步：创建API端点

第2步：创建一个编辑页面

第3步：实现控制器

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流