Angular 群控编程网

将Web推送通知添加到您的Ionic PWA

我自愿在Ionic和Angular开发的Progressive Web App中向Google IonicZürichMeetup社区展示了使用Google FCM的Web Push Notifications的实现。尽管Google提供的设置指南相对清晰，但我认为以循序渐进的方式写一篇有关该特定主题的新文章（最好是帮助我不要忘记something）是一个好主意。就本文而言，我假设您已经有一个 @ionic/angular 应用程序。如果没有，您可以在终端中运行以下命令来启动一个新项目：离子开始--type = angular 我还将假设您的应用程序已经是一个渐进式Web应用程序，如果不查看Angular 文档，以了解如何在您的项目中添加该支持或在新创建的Ionic项目中运行以下命令：…

Django和Angular =快速且可扩展的网站

Django是一个高级Python Web框架，鼓励快速开发和简洁实用的设计。它由经验丰富的开发人员构建，可以解决Web开发的大部分麻烦，因此您可以专注于编写应用程序而无需重新发明轮子。它是免费和开源的。荒谬的快：Django旨在帮助开发人员尽快将应用程序从概念到完成。令人放心的安全性：Django认真对待安全性并帮助开发人员避免许多常见的安全性错误。极具可扩展性：Web上一些最繁忙的网站都利用Django快速灵活地进行扩展的能力。由Google支持的项目，用于创建生产就绪的大型应用程序，只需很少的代码和工作量。跨所有平台进行开发：学习一种使用Angular构建应用程序并重用代码和功能来为任何部署目标构建应用程序的方法。对于Web，移动Web，本机移动和本机桌面。速度和性能：通过Web Workers和服务器端渲染，在当今的Web平台上实现最大的速度，并进一步提高速度。 Angular使您可以控制可伸缩性。通过在RxJS，Immutable.js或其他推模型上构建数据模型来满足庞大的数据需求。数以百万计的用户所喜爱：从原型到全球部署，Angular均可提供支持Google最大的应用程序的生产力和可扩展的基础架构。 Django是基于python的，并且在服务器端运行。对于每个请求，Django都会编译网页并将其发送回客户端。这给服务器增加了太多负担。…

使用Spring Boot 2.0和Angular构建一个反应式应用程序

我创建了一个帖子来描述Spring 5及其子项目中的Reactive编程支持，本文的所有代码都更新为最新的Spring 5 RELEASE，请在我的Github帐户下检查spring-reactive-sample。在本文中，我将创建一个简单的博客系统，包括：用户可以登录和注销。经过身份验证的用户可以创建帖子。经过身份验证的用户可以更新帖子。只有具有ADMIN角色的用户才能删除帖子。所有用户（包括匿名用户）都可以查看帖子列表和帖子详细信息。经过身份验证的用户可以将他的评论添加到特定帖子。后端将使用最新的Spring 5反应堆构建，包括： Spring Boot 2.0，当前最新版本为2.0.0.M7 Spring Data…

用Angular杀死UI反图案

[2018年12月17日更新：检查新的 ngx-remotedata 库] 克里斯·詹金斯（Kris Jenkins）如何在加载远程数据时Elm撰写有关如何修复UI状态的UI反模式博客文章已经有将近两年了，它的流行已经超越了Elm生态系统。有几篇博客文章解释了如何在其他语言/框架下实现相同的结果，但是它们都不基于Angular2 +。在本文中，我将尝试解释如何使用Angular和TypeScript实现类似的功能。该示例是一个应用程序，可以根据世界上任何地方的经度和纬度为您提供当天的日出和日落时间。 UI会在加载数据时显示“正在加载”消息，并且还支持在发生错误的情况下显示错误。在提供最终解决方案之前，让我们看一下应用程序的中间工作版本，在该版本中，我们使用布尔值处理远程数据UI状态。在此示例中，说明布尔方法的是sunriseSunset.service.ts文件中的sunriseSunset.service.ts ，我们用它来表示所有可能的UI状态。（实际上它应该被称为SunriseSunsetService¯ __（ツ）_ /¯ ）让我们看看每个属性的含义：…

逐步进行自动质量检查设置

我们使用AngularJS构建了FASHION CLOUD，因此e2e测试的选择非常明确……量角器。我们大多数人对Selenium或任何类似工具都没有太多的自动化测试经验（POSTMAN可以算吗？）。因此，我们开始了研究之路，在行业中使用了哪种模式，良好实践以及如何构建测试。我们发现了这个惊人的量角器样式指南视频，它变成了官方样式指南，并为我们提供了许多有关如何以及为什么构造测试的见解。对于任何想编写e2e测试（无论技术选择如何）的人来说，诸如“不要e2e测试已经过单元测试的东西”，“除非需要就不要嘲笑”和“ 从不使用xpath ”之类的东西都是不错的起点。他们还讨论了页面对象模式，这是Selenium中的一种很常见的做法，它主要包括将应用程序的每个页面包装到一个对象中，定义一个与DOM交互的清晰接口，并将页面彼此隔离。也不要在您的对象上写断言，不要指望等待或睡眠。请尝试不要使用这些！我们需要另一篇文章来讨论使用睡眠的弊端，但是如果您对如何避免睡眠感到好奇，请查看另一篇文章。所有与测试相关的行为都破坏了每个页面的封装，并将抽象紧密地耦合到使用它的位置。这种模式真的很酷，因为它使您的测试真正可读，如果我们需要构建工作流，只需对页面对象API进行一些调用即可，就是这样，没有复杂的等待，没有“如果”，没有“ forEach” ”。在查看了指南并确定了对我们的项目有意义的内容之后，我们想到了这种文件夹结构 /…

使用SSL证书进行本地开发不再是一件麻烦事– mkcert

我最近遇到了mkcert，作者正确地提到了从http（开发）到https（生产）的过渡期间我们面临的一些问题。 “……越来越多的浏览器功能仅可用于安全来源，并且使用HTTP进行的测试隐藏了可能破坏生产HTTPS网站的任何混合内容问题。” 当然，我们可以为本地开发创建SSL证书，并且可以在此处和此处找到一些示例。但是正如您所看到的，我们必须生成一个自签名证书，然后生成X步以使其生效。随着mkcert的到来，平凡的工作早已不复存在。一旦安装了mkcert ，您所要做的就是提及您要支持的域并且您已经完成了。进入您的项目仓库。举例来说，如果我的域名是www.undivided.com那么我将通过以下方式生成证书 mkcert www.undivided.com本地主机127.0.0.1 这将在同一文件夹中创建一个新证书和密钥。我正在使用角度并使用生成的证书以SSL模式运行开发服务器，我必须运行以下命令： ng serve --ssl \…

常春藤：看一下Angular的新渲染引擎

介绍随着Angular v6的发布，Angular团队引入了许多重要的功能和更改。其中，常春藤吸引了很多炒作和吸引力。什么是常春藤，什么是嗡嗡声？ Ivy是Angular即将推出的新渲染管道和视图引擎。现在出现问题了，视图引擎是做什么的？ Angular视图引擎采用我们编写的模板和组件，并将它们转换为浏览器可以读取和显示的常规HTML和JavaScript。 Ivy是下一代Angular Renderer。它在原始编译器（对于Angular 2）和Renderer2（对于Angular 4及更高版本）之后排在第三位。 Misko Hevery和Kara Erickson在ngConf-2018中为我们带来了Ivy的第一眼外观。在此提醒您-Ivy仍处于Beta中，功能尚不完善。因此，默认情况下它不会出现在Angular…

角度：单元测试：如何测试OnChanges

我喜欢哑巴组件，它只有Input和Output ，您还可以将changeDetection设置为OnPush 。但是，如果ngOnChanges中的哑组件具有某些逻辑，则单元测试可能不是您期望的。 – 在这里检查代码。 – 这是一个愚蠢的组件： @ 组件（{ 选择器：“ mst-on-changes-child”，模板：“ {{已更新}}”， changeDetection：ChangeDetectionStrategy.OnPush， }）导出类OnChangesChildComponent实现OnChanges…

前端框架流程：探索设计模式范式转换

Model View Controller：一种设计模式，在我的培训期间就深深扎根于我的大脑，以至于使用其他任何东西进行应用程序开发似乎都难以理解- 这是一种可怕的心态。由于这个缺点，本周我发现自己在应对新工作：Angular方面的心理准备不足。由Google作为前端框架开发的Angular.js绝对不仅仅是简单的旧式MVC框架。但是，这是什么意思？还有什么呢？还有其他可能性吗？输入MVVM MVVM是MVC设计模式和Martin Fowler的MVP（模型视图呈现器）的扩展，代表模型，视图，视图模型。前两个部分与我们的MVC中的“模型和视图”相同-那么这第三部分是什么？什么是ViewModel？很简单，ViewModel是专门为视图设计的特殊模型，几乎在数据/类对象（即Model）和呈现的页面（即View）之间创建了混合体。 ViewModel是一个类，其属性表示视图的状态以及表示视图的逻辑和功能。对于熟悉React的开发人员来说，这可能听起来有些熟悉。与具有单向数据流的React不同，MVVM是双向的-意味着我们需要一个中间人来确定从模型到视图的数据流（读取的内容）以及从视图推回到模型的数据（内容是什么）写入/更新）。…

编写具有Angular，Bootstrap和Angular材质设计的仪表板模板：第1部分-设置一切

在本教程中，我将教您使用Angular创建仪表板模板的基础知识。想法是：在仪表板上建立我们想要的结构并动态填充它。例如，带有或不带下拉菜单的侧边菜单链接，也带或不带下拉菜单的顶部导航栏链接，面包屑等都将被注册到Typescript类中，并且这些部分将通过自身*呈现。在开始之前，请允许我说：这可能不是做到这一点的最佳方法，但是它可以起作用，并且可以帮助很多刚起步的人。让我们说说我们将为此使用什么： *具有sass配置的Angular的最新版本（在我编写时为7.2）。 * Bootstrap CSS（以及最新版本）。 *角材料设计。