2023年1月|每日Angular时事通讯 - 必威平台怎么注册不了

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

2023年1月31日2023年1月31日 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应用中使用模拟数据?

2023年1月30日2023年1月27日 betway必威滚球

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

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

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

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

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

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

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

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

现在，我们AppComponent相信它在使用一个真实的UserService，但实际上得到了一个FakeUserServiceAngular注入器:

这种方法的优点是不需要更改任何组件。要更改以启用/禁用模拟数据的惟一代码行是供应商配置在AppModule．就是这样!您可以访问Stackblitz这个例子的完整代码．

在单元测试中使用相同的硬编码数据

一旦您遵循上述方法，在单元测试中使用这些数据将非常相似。我们可以重复使用FakeUserService通过配置Angular试验台在我们的单元测试中如下:

如何为我的应用程序生成模拟数据?

2023年1月27日2023年1月27日 betway必威滚球

测试Angular应用程序可能很困难，因为我们的前端代码几乎完全依赖于后端数据，而且设置不同的数据库场景需要花费大量的时间和精力。有时候，我们甚至一开始就没有足够的数据进行测试。

这就是为什么我要介绍Mockaroo．在Mockaroo这个网站上，您可以生成尽可能多的数据用于测试目的。例如，如果你需要1000个带有随机电子邮件地址、国家和电话号码的假用户，Mockaroo可以生成所有这些。您甚至可以决定每个属性的空白百分比。

在下面的例子中，我决定将10%的电子邮件地址设置为空白:

下面是我在几秒钟内生成的一个JSON示例:

Mockaroo非常强大，因为它支持很多不同的数据类型，比如:

电话号码、年龄、信用卡号码、支付卡类型、比特币地址……
街道名称、城市名称、国家、纬度、经度、机场代码……
名字、颜色、职位、性别、ssn、ein、大学名……

如果需要Mockaroo没有的数据类型，则可以提供正则表达式Mockaroo将使用它来为您创建与regexp匹配的数据。是的，就是这么好吃!

你可以生成多种格式的数据(JSON、CSV、SQL、Firebase等)，然后在你的Angular应用程序中使用它作为模拟(硬编码对象)，或者将数据存储在测试数据库中，用于集成测试。

对于最多1,000行的导出，可以免费使用Mockaroo。不过，每天运行的导出数量没有限制，因此如果需要超过1,000个项，可以反复导出更多随机数据您可以使用付费计划来增加或取消所有限制．

带有latestfrom操作符的RxJs

2023年1月26日2023年1月24日 betway必威滚球

我们的每周RxJs操作符是withLatestFrom它是一个名字能说明一切的操作符的罕见例子。

这是大理石图为withLatestFrom：

这个运算符取两个或多个可观察对象然后把它们变成一个可观察对象的时候，就会产生一个新值source Observable会释放一些新的东西．

这里需要注意的重要一点是，只有一个Observable在输出Observable中触发更新。结果，withLatestFrom当您希望用户操作触发用户界面中的更新时(考虑数据表过滤器、相互连接的下拉列表等)，是一个很好的选择。

你可以看到现场直播代码示例(包括解释思维过程的注释)，两个相互依赖的下拉列表。第一个下拉列表中的选择会影响第二个下拉列表中显示的值(选择一个大洲会过滤掉第二个下拉列表中显示的国家:

如果你想深入了解，我有这个关于使用的完整教程withLatestFrom与其他操作符一起在组件中实现动态过滤．

更多的RxJs内容，我的2小时RxJS工作坊从ng-conf 2022现在可以在Youtube上免费观看!

如何更新我的Angular版本?

2023年1月25日2023年1月24日 betway必威滚球

昨天，我们提到了为什么它是必要的让你的Angular版本尽可能保持最新．

今天，我们来看看如何做到这一点。一个简明的答案是使用的说明https://update.angular.io因为所有的信息都在那里。您可以选择当前版本，即您想要升级到的版本，单击按钮，然后您将获得详细的TODO列表:

典型的升级包括:

升级当前版本的Angular CLI:安装-g @angular/cli@latest
将项目代码升级到最新版本:Ng更新@angular/core@latest @angular/cli@latest

的ng更新命令会更新Angular和它的依赖项，如果框架的新版本有一些破坏性的变化(意味着一些函数或类被重命名或替换为其他东西)，甚至会改变你的代码。是的，都是自动的!

在某些情况下，升级可能会更加困难:

例如，如果你有不再维护的依赖项，或者在几周/几个月后才升级-我会在本通讯的后续版本中解决这个问题。
如果Angular需要升级Node.js，这意味着升级你的开发环境和持续集成服务器。

同样，关键是要尽可能保持最新，每六个月升级一次5到10分钟的任务，而不是每隔几年就花2周的时间。

Angular发布时间表

2023年1月24日2023年1月23日 betway必威滚球

Angular在不断发展。快速浏览一下框架的发布说明，就会发现每周都有新的发布。例如，昨天，我们提到了最新的Angular 15.1的更新．

让我们来讨论一下Angular的发布频率。主要发布节奏如下:

主要版本每六个月发布一次(Angular 16在Angular 15发布六个月后发布)
如果需要的话，每个月发布一个次要版本，通常每个主要版本之间会有1到3个版本(Angular 15.2在15.1后一个月发布)
如果需要，每周更新版本(Angular 15.1.1在15.1.0之后的一周发布)

这很重要，因为你可以做到计划升级基于这种节奏。例如，我的一些咨询客户计划他们的应用程序的主要发布一年两次，在他们获得一个新版本的Angular后一个月。

知道这一点也很重要主要版本支持18个月．这只适用于关键修复和安全补丁。新特性和改进被添加到一个主要版本六个月寿命．

到今天为止，这里是积极支持的版本:

如果您使用的是13年以上的任何版本，那么您就脱离了支持窗口，并可能面临bug、漏洞和其他问题。因此，总是建议尽可能多地使用最新的主版本，或者作为B计划，保留一个或两个主版本，而不是更多。

你可以在这里阅读这种方法背后的全部原理，以及更多关于Angular发布计划的信息:https://angular.io/guide/releases

如何更多地了解RxJs操作符?

2023年1月20日2023年1月16日 betway必威滚球

在过去的几周里，我们报道了一些不同的RxJs运营商在这个时事通讯中。RxJs是Angular中最难学的东西，这是因为这项技术混合了很多概念，这些概念本身并不明显:异步数据和回调、函数式编程、流等等。

要了解更多关于RxJs的知识，我最喜欢的资源是使用一个名为rxmarbles.com．为什么?因为这个网站交互图RxJs操作符。

我们举个例子mergeMap．这是官方的定义mergeMap：

将每个源值投射到一个合并在输出Observable中的Observable中。
Rxjs.dev文档

这是一个交互图from RxJs marbles formergeMap-我只是记录了我的屏幕，同时通过拖动数据与图表进行交互:

人们说一幅画胜过千言万语。交互式图片就更好了，确实如此rxmarbles.com是多少。没有文本，只有交互式图表。

注意:并不是所有的操作符都记录在那个网站上，只是一些最有用的操作符。有时，操作符的签名或名称会略有不同，这取决于您使用的rxj版本。不过，总的来说，RxJS Marbles仍然是理解操作符的最佳工具之一。

RxJs的点击操作符

2023年1月19日2023年1月18日 betway必威滚球

的利用运算符是最简单的一种RxJs操作符，因为它不会改变进入你的可观察对象的数据:

为什么我们需要一个什么都不做的函数呢?我们看到了第一个非常重要的例子，使我们能够使用异步管早些时候。

至少有三个重要的用例是:

调试复杂的RxJs场景使用console.log(如上图所示)
注册副作用随着数据的变化(这就是我们在异步管道场景中所做的)
看用于完成内部可观察对象(当您将多个可观察对象组合到一个订阅时)

简而言之,利用是一种方法监视可观察流内部发生了什么。任何时候你想要提取一些数据/调试/看看Observable中发生了什么，利用是最简单的答案。

你可以在我的教程中找到这三个场景的例子:使用的3个原因利用操作符．

ngrxLet:异步管道的更好版本

2023年1月18日2023年1月18日 betway必威滚球

昨天，我们提到如何异步管材可配合使用* ngIf或* ngFor在我们的模板中声明一个局部变量，允许我们使用相同的数据有多个表达式:

              
               <div＊ngIf＝"user$ | async as user"><p>名字:{{用户。firstName}}p><p>姓:{{用户。lastName}}p>div>
              
代码语言:HTML、XML（xml）

虽然上面的代码运行得很好，但添加其他代码并不总是很方便* ngIf或* ngFor在我们的模板中。异步管道的另一个缺点是它不让我们知道是否可观测的发生错误或成功完成。

这就是ngrxLet指令可以解决问题，因为它用简单的语法解决了上述所有缺点。我们之前的例子变成:

              
               <div＊ngrxLet＝"user$ as user"><p>名字:{{用户。firstName}}p><p>姓:{{用户。lastName}}p>div>
              
代码语言:HTML、XML（xml）

如果我们想要获得任何错误或可观察对象的完成状态，我们可以通过暴露的更多局部变量来实现ngrxLet：

              
               <div＊ngrxLet＝“user$ as user;误差为e;完整为c">
              
代码语言:HTML、XML（xml）

你可以找到完整的工作示例．ngrxLet可以使用NPM作为依赖项安装(NPM install @ngrx/component)，重要的是要注意它不是全部ngrx状态管理库，只是它的一个很小的子集，所以使用该指令不需要使用其他任何东西ngrx．

如果你想深入了解，这里有一个稍微扩展版本的教程链接，其中有更多信息:ngrxLet -一个更好的异步管道版本．

异步管道语法技巧

2023年1月17日2023年1月16日 betway必威滚球

昨天，我们写过如何使用异步管道自动订阅和取消订阅从我们的观测数据。

当我教授这个话题时，人们通常至少有以下两种反对意见之一:

如果我还需要订阅的数据在我的Typescript代码?

首先，使用异步pipe似乎只允许您访问HTML模板中的数据。但事实并非如此，因为你仍然可以使用tap操作符来“监视”你的可观察对象，并从中获取数据。例如(完整例子)：

              
               这.name$ = nameService.getName()。管(丝锥(的名字= >这.name = name));
              
代码语言:打印稿（打印稿）

然后在HTML模板中:

              
               <p>async管道的名称:{{Name $ | async}}p>
              
代码语言:HTML、XML（xml）

如果我需要从订阅中的对象中读取多个属性怎么办?

另一种说法是，你不想以这样的方式结束:

              
               <p>名字:{{(用户$ | async)?。firstName}}p><p>姓氏:{{(用户$ | async)?。lastName}}p>
              
代码语言:HTML、XML（xml）

上面的代码很难阅读，每个属性都需要一个订阅。这本身就是一场灾难，因为每个订阅都可能触发来自服务器的相同数据的HTTP请求!

相反，您可以这样做，只使用一个订阅，将结果存储在一个局部变量中，然后在数据可用时呈现数据。此技术适用于任何结构指令，例如* ngIf或* ngFor：

              
               <div＊ngIf＝"user$ | async as user"><p>名字:{{用户。firstName}}p><p>姓:{{用户。lastName}}p>div>
              
代码语言:HTML、XML（xml）

如果通过添加元素来适应订阅来更改DOM结构让您感到困扰，那么您可以使用ng-template相反，尽管这里的语法也可能有点令人不安:

              
               <ng-template［ngIf] ="user$ | async"让用户><p>名字:{{用户。firstName}}p><p>姓:{{用户。lastName}}p>ng-template>
              
代码语言:HTML、XML（xml）

好了，今天就到这里吧。明天，我们将看到我们如何做得比现在更好。

map