Angular 群控编程网

Angular —破碎图像的后备

如果您在网站上使用过图像，那么您一定会遇到由于某种原因而导致图像无法加载的常见问题。可能是链接断开，或者链接可能是空字符串/空/未定义。该图像无法加载，您会看到类似以下的内容：这对于用户来说是非常不愉快的景象。为了在Angular 2+中解决此问题，您有多种解决方案。我更喜欢的解决方案是为页面上的元素创建指令。如果图像无法加载，我将显示一个默认图像，该图像将作为参数传递给元素。因此，如果需要，我可以在网站的不同部分显示不同的默认图像。请注意，这适用于Angular 2+。 Angular 1.xx中的指令完全不同。通常，指令用于更改Angular 2+中元素的默认行为。回到主题，我创建了一个ImagePreload指令：从'@ angular…

使用Angular 6构建PWA

此刻，每个人都在谈论渐进式Web应用程序，我敢打赌，您可能已经听说了有关它们的内容。他们可以击败巨龙，骑独角兽或以声速被加载。本文重点介绍如何使用Angular 6创建简单的PWA应用程序，但在此之前，让我们看一下使PWA如此流行的主要好处。取消链接到商店。无需发布它们，有时这可能是一项艰巨而昂贵的任务（特别是在Apple的情况下）。无需下载。您可以直接从浏览器提示中安装它们。类似于应用。 PWA的行为和感觉就像是本机应用程序，可以访问某些设备功能，例如摄像头。离线模式和Web推送通知感谢服务人员。这些功能使开发人员和公司投入时间来创建PWA。特别是在电子商务的情况下。 Angular 6.是的，对您有很大帮助！ Angular团队知道PWA在未来几年中将变得多么重要，因此他们希望对我们而言变得容易。在该框架的最新版本中，有一个命令可以将您的项目转换为PWA。让我们一步一步走，所以我们要做的第一件事是安装或上传到最新版本的angular-cli。…

Ember CLI Windows优化使编写Angular更容易

我正在编写Angular组件。好吧，至少我正在尝试。它像这样。 VS代码中的Ctr + s，Alt + Tab，箭头指向Cmd，观看百分比刻度接近100，在完成之前感到无聊，Alt + Tab到Chrome，键入“ fa”和向下箭头（具有快速的肌肉记忆功能），滚动浏览一个有趣的折衷视频，持续5分钟，记住我正在尝试编写Angular组件，Alt + Tab，将箭头移到Cmd上，看到很多红色提醒我导入要注入的服务，向上箭头/输入并重复… 我喜欢Angular CLI。这是一件好事。它甚至现在使用Webpack。…

生产中的Angular —使用基本URL在IIS 8+中部署Angular应用程序

在IIS中设置Angular应用程序以供生产使用非常简单，但对于初学者而言并非完全简单。本文可以帮助您进行基本而有效的设置。 IIS的典型问题 Angular 2+应用程序无法在IIS上立即使用的原因是：您通常希望在IIS中设置应用程序或虚拟目录。这涉及到使用以便正确加载bundle.js文件。使用Angular Router软件包的应用程序可能无法在IIS上正常使用。直接访问http://your.domain.com/my-app/home/heros/get/1类的URL会引发404 not found错误。如果您的应用包含辅助路由，则访问诸如http://your.domain.com/my-app/home/(popup:edit-screen)类的URL会引发潜在的危险请求错误。这篇文章介绍了如何在Windows IIS 8及更高版本上设置Angular 2+应用程序。让我们将我们的应用程序称为：…

使用Angular创建DatoCMS插件

示例：DatoCMS Multiselect插件 EcoLogicAG / datocms-plugin-multiselect 一个将JSON字段转换为多选输入字段的插件– EcoLogicAG / datocms-plugin- multiselect github.com 起点 ng new datocms-plugin- npm install-保存datocms-plugins-sdk 您将不需要路由器作为插件。…

快速开始使用Angular Material和Flex-Layout

要设计Angular应用程序，可以使用多个CSS库，但是Angular Material是专门为Angular项目设计的，易于实现。使用mat元素，您可以在很短的时间内创建一个漂亮的界面。 Flex-layout是一个为Angular使用CSS flex-box功能而制作的软件包，您只需在html标签中添加指令即可使其具有灵活性和响应性。让我们看看如何从所有这一切开始！查看我们的Angular内部培训或公共Angular课程。试试我们的角度项目“ fossilo.com”，以存档完整的网站。有关详细说明，您可以查看我的视频。我们今天要做什么？创建一个新的Angular项目，安装Material和flex-layout 使用工具栏创建主布局创建一个简单的相册：2个示例为了创建简单的图库，让我们使用fxLayout（容器）和fxFlex（元素）指令以及mat-card-image元素：在这里您可以找到表格的示例。我使用元素和matInput。不要忘记在app.module.ts中导入MatFormFieldModule和MatInputModule…

Angular 2+如何通过SignalR连接到ASP.NET API

首先，让我们创建一个新的ASP.NET项目并选择Web API来生成我们的后端（ASP.NET RESTful API）然后安装SignalR库安装软件包Microsoft.AspNet.SignalR 在后端项目中，添加一个新项目并选择SignalR Hub 您将获得一个新的类，并记住您的图表中心名称，该名称用于从前端进行调用。 [HubName]是可选的，如果您不提及，则可以通过类名称进行访问，该类名称的作用类似于集线器名称。 [HubName（“ YourOtherHubName”）] 公共类YourHub：Microsoft.AspNet.SignalR.Hub 为您的集线器创建新方法公共字符串Hello（） { 返回“ Hello…

如何将Angular 2+应用程序部署到Microsoft IIS Server

要构建一个Angular应用程序，我们使用以下命令 ng build --env = prod --href-base Angular将在您的项目文件夹内自动生成一个dist文件夹。该文件夹将用于将您的Web应用程序发布到IIS服务器。在dist文件夹中，我们注意到一个资产文件夹，其中包含我们所有自定义文件，例如从项目中访问的css，image或js文件。首先，您需要在dist / index.html中更改href基数。标记为文档中所有相对URL指定基本URL /目标。为了通过相对URL访问资源文件夹内的文件，请使用./assests/…。其次，在IIS中创建一个新的Web应用程序在物理路径上，指向您的dist文件夹。…

Angular Universal何时拥有大量数据？

既然您在这里，我确定您使用的是通用角度的SEO支持，但是您是否正在网站上使用大量的数据以在页面上进行渲染？如果您的回答是“是”，那么您刚刚进入了右侧的Tab。 TL; DR〜传输状态很糟糕，但是您必须非常谨慎地使用它。什么是传输状态？从服务器端的应用程序传输到客户端端的应用程序的键值存储。 TransferState将作为可注射令牌提供。要使用它，请在服务器上导入ServerTransferStateModule ，并在客户端上导入BrowserTransferStateModule 。 app.browser.module.ts 从’@ angular / platform-browser’导入{BrowserTransferStateModule}; app.server.module.ts 从“ @…

Firebase存储+ Base64Url字符串。你会遇到麻烦…

在本文中，我想分享使用Firebase作为媒体内容存储的经验。提防，我将谈论Firebase 3 SDK。为混合移动应用程序功能实现两项临时功能时，我遇到很多麻烦-通过社交插件记录日志和存储媒体数据。今天，我想谈谈将数据存储在Firebase Storage中的问题。这次搜索这个问题并不是一个神奇的解决方案。在Stack Overflow的特定标签“ Firebase Storage”和“ Base64”中进行搜索可以为您提供零答案的问题。经过多次失败的尝试，我终于设法做到了。所以，让我们开始吧！ Firebase存储是一项相当新的功能。它使您可以上载和共享用户生成的内容，例如图像和视频。官方指南涵盖了实现上传和使用媒体内容的所有步骤。…