作者:betway必威滚球

Alain是谷歌开发专家，擅长Web技术、Angular和谷歌地图。他的日常任务是帮助开发团队采用Angular，并使用该框架进行大规模构建。他在六大洲都教授过Angular !阿兰是一名世界旅行家和摄影师，也是国际会议的演讲者，并出版了几门视频课程。

容器与表示组件

betway必威滚球

的基本概念之一Angular应用中的组件架构是在容器和表示组件之间找到正确的平衡。

让我们来定义它们是什么:

  • 表示组件都是可重用的简单UI。比如按钮、对话框、卡片、导航栏等。
  • 容器组件恰恰相反:它们不可重复使用。它们被绑定到一个特定的用例。这些通常是整个屏幕或子屏幕，应用组件等。

从代码的角度来看，容器组件使用服务与后端交互。这样的组件知道使用这些服务从哪里获取数据，然后使用输入将数据提供给它们的子组件，这些子组件是表示组件:

识别这些组件的一个简单方法是演讲组件只有输入和输出，没有依赖注入。容器组件具有依赖注入而且很可能没有输入和输出。

什么时候使用容器组件和表示组件?

假设您的组件很适合成为表示组件，但正在使用服务。在这种情况下，您很可能将该服务注入到它的父容器中，然后使用输入将数据传递给该组件。这样，您的表示组件就可以在其他地方重用，而不必绑定到特定的用例。

当然，就像任何最佳实践一样，也有例外情况需要考虑。有些时候可重用性是有意义的，而有些时候则不然。如果没有意义，不要强迫你的组件归入这些类别，但如果能快速取得成功，可以尝试一下。您的应用程序体系结构(可能还有性能——请继续关注这方面的更多内容)以后会感谢您的。

如何模拟您的整个后端服务器?

betway必威滚球

这是关于为测试目的模拟数据系列的最后一篇文章。到目前为止，我们已经看到了如何使用Mockaroo生成模拟数据然后如何将这些虚假数据整合到Angular应用中呢．

今天，让我们更进一步，使用相同的JSON数据模拟整个后端服务器，包括CRUD (CReate Update Delete)操作，因此还可以测试数据更新。

输入JSON服务器

JSON服务器是一个小的npm库，读取JSON文件，并自动将其转换为RESTful web服务器．是的，你没有看错:我们所需要的输入就是文件中的JSON数据!

JSON的格式是一个单独的对象，其中每个属性都将转换为后端端点。例如，你需要支持两种类型的数据:用户而且团队．

然后你的JSON数据库将是这样的:

              
              

               ｛“用户”:【//所有用户数据的数组),“团队”:【//所有团队数据的数组]}
              
代码语言:JSON /带有注释的JSON（json）

你可以用Mockaroo生成的模拟数据替换这些数组，然后运行JSON服务器会给你以下RESTful API:

  • HTTP GET /users=>返回所有用户的列表
  • HTTP GET /users/21=>返回用户Id = 21
  • HTTP POST /user=>创建新用户
  • HTTP DELETE /user/21=>删除用户Id = 21
  • HTTP PUT /user/21=>更新用户Id = 21

JSON服务器也支持分页，全文搜索,定制的路线如果您希望向测试后端添加更多端点。对数据所做的任何更改也会保留在JSON文件中。这意味着您有一个用于测试的单一文件数据库，这非常棒!

如果你想试试，这里有一个完整的关于如何在Angular应用中使用JSON服务器的教程．的开始NPM包的一部分也有很好的文档记录。

如何在你的Angular应用中使用模拟数据?

betway必威滚球

我们上一期的时事通讯如何为Angular应用生成模拟数据Mockaroo。

今天，我们将介绍如何在我们的应用程序中使用这些数据，以便:

  • 作为一个临时的后端实现，这样你就可以在后端API准备好之前构建你的Angular组件。
  • 使用该数据作为单元测试的模拟。

在Angular应用中使用硬编码数据

假设我们需要在组件中显示用户列表，但后端还没有准备好该数据，或者我们想尝试使用假数据。我们转向Mockaroo，生成一个包含100个用户的JSON文件，然后复制粘贴该JSON字符串并将其分配给代码中的一个常量(例子-这篇文章剩下的所有链接都指向提到的文件的源代码):

然后，我们希望使用服务访问这些数据。我们已经有了UserService这是使用我们的后端，但我们想用我们的假数据替换那个调用:

所以我们生成了一个新的FakeUserService它的形状和UserService，但返回一个自定义的Observable的模拟数据，而不是发出HTTP请求:

最后，我们改变了依赖注入配置AppModule以便应用程序使用FakeUserService而不是UserService：