Angular中使用forroot和forchild

在本文中我们将深入探讨一些您可能已经见过的 Angular 模式和方法。我将讨论 Angular 管理依赖项辑器配置信息中经常会使用到的 forRoot 和 forChild 方法。

阅读更多

Angular独立组件介绍

Angular 14 引入了独立组件——该组件不属于任何 ngModule 的一部分,可以与其他独立或基于模块的组件一起使用。

从 Angular 14 开始,您可以创建整个应用程序,而无需制作任何自定义 Angular 模块,这可以通过使用独立组件来实现,这些组件提供了创建 Angular 应用程序的简化方法。

阅读更多

在Angular中使用async-await特性

Promise 和回调函数是在 JavaScript 中编写异步代码的构建块。

在 Angular 应用程序中,我们可以使用 Rx.js 来利用 Observables、Subject、BehaviorSubject 等的强大功能,以优雅的方式编写异步代码。

随着最新版本的 ECMA Script 草案,JavaScript 开始支持“异步等待”功能。

ECMAScript 最新草案 (ECMA-262)

阅读更多

Angular Async Pipe详解

Async Pipe可以对 Angular 应用程序的更改检测策略产生巨大影响。如果到目前为止您还感到困惑,请详解读完全文。我们一起来了解一下吧!

在 Angular 中,Async Pipe本质上是执行以下三个任务的管道:

  • 它订阅一个observable或一个Promise并返回最后发出的值。
  • 每当发出新值时,它都会标记组件为需要要检查的。这意味着Angular将在下一个周期中为该组件运行Change Detector。
  • 当组件被销毁时,它会取消订阅可观察的内容。

此外,作为最佳实践,建议尝试使用 onPush 更改检测策略上的组件和异步管道来订阅可观察对象。

如果您是Angular的初学者,也许上面对异步管道的解释让人不知所措。因此,在本文中,我们将尝试使用代码示例逐步理解异步管道。只需创建一个新的Angular 项目并继续操作即可;在文章的最后,您应该对异步管道有一些深刻的了解。

阅读更多

Angular整合strapi CMS

1. 前言

对于我们这些开发人员来说,启动一个新的web项目可能是一项乏味的工作。一些普通的增删改查都要自己亲自动手去写,那效率着实是大打折扣的。

一些技术选型工作要一次一次地被重复考虑.

  • 前端应该使用什么技术?
  • 我应该在后端使用什么技术?
  • 什么数据库是最好的?

因为现在所有的Javascript技术,如React、Angular和Vue,在构建Web应用程序时都非常流行,所以我们可以很快得到第一个问题的答案。
但是后端呢?我应该使用NodeJS还是.NET Core?
使用关系数据库还是非关系数据库更好?
后端解决方案Strapi已经找到了所有这些问题的答案。

在本文中,我们将使用Strapi和Angular构建一个简单的web应用程序。

阅读更多

strapi的安装和使用

strapi一款基于Node.js开发的headless, 接口优先(API-first)的内容管理系统.

Strapi 应用程序可以本地安装在计算机上,也可以安装在远程服务器上。以下安装指南提供了有关如何在本地计算机上安装和创建新Strapi项目的分步说明。

Strapi CLI(命令行界面)安装脚本是让 Strapi 在本地运行的最快方法, 也是官方推荐的安装方式。

阅读更多

strapi 项目结构介绍

1. 项目结构

如果 Strapi 项目是使用starter CLI创建的,则其结构包括frontend和backend文件夹,其中backend文件夹具有默认结构。

阅读更多

如何在Strapi v4中创建Slug系统

在为客户或您自己构建网站时,您通常希望通过 URL 中的人类可读的 slug 来访问您的公共内容。这将有助于搜索引擎优化 (SEO),并且更容易让用户理解。值得庆幸的是,借助Strapi,您可以轻松地以这种方式访问​​您的内容。

阅读更多

Chart.js教程

1. chart.js 介绍

Chart.js是一个流行的由社区维护的开源数据可视化框架。它使我们能够生成响应式条形图、饼图、线图、甜甜圈图、散点图等。我们所要做的就是简单地指出你想在页面的什么地方显示图表,你想绘制什么样的图表,然后向 Chart.js 提供数据、标签和其他设置。在这之后,这个库就完成了所有繁重的工作。

阅读更多

如何在Angular应用中使用Ng2-charts

1. 前言

图表帮助我们以易于理解和交互的方式可视化大量数据。

在 Angular 中,我们有各种图表库来创建图表。

在本文中,我们将使用 Ng2-Charts 在 Angular 中开发出色的图表。

在本文中我们将会讲述

  • ng2-charts 介绍
  • 在 Angular 中安装 ng2-charts 的两种不同方法。
  • 创建条形图
  • 创建折线图
阅读更多

Angular图表库介绍

1. 前言

如今,数据分析是任何业务应用程序的重要组成部分。这有助于企业做出重要决策。以易于理解和交互的方式表示大量数据非常重要。
图表对于美观、易于理解和交互式的数据可视化非常有用。

JavaScript 中有不同的开源和付费图表库,可以实现漂亮的数据表示。

在本文中,我们将研究几款美观的, 易于交互的 Angular 图表库。

首先,我们将看到开源 Angular 图表库,稍后我们将研究其他付费 Angular 图表库.

阅读更多

将ngx-datatable替换为Angular material table

1. 前言

从 Angular 1.x 到 Angular 13 一直是用的 angular-data-table(for angularjs 1.x)和它的姊妹项目 ngx-datatable(for angular 2+), 但是最近需要将 Angular 项目从 Angular 14 升级到 Angular 16 的过程中发现了一些兼容性问题, 另外 ngx-datatable 也不支持 dark mode. 再次关注 ngx-datatable 以及网上的评论都有同感, ngx-datatable 的更新速度严重放缓了, 有些跟不上 Angular 更新的节奏了. 参考 reddit 上的一篇帖子Any better alternatives to ngx-datatable?, 也谈到了 ngx-datatable 更新放缓.

于是考虑将 ngx-datatable 组件替换掉, 这里有一些付费的项目, 在功能上可以完全替换, 比如ag-grid, Ignite UI for Angular Data Grid, Syncfusion Angular UI Components - Data Grid等等.

最后考察了 angular material table 在功能上完全服务我们的要求, sorting, pagination, server side pagination 之类的功能都有. 另外项目刚好使用的是 Material Design 设计风格, 那些付费方案的高级功能也用不上, 还要花时间学习, 另外考虑到 bundle 文件的大小, 最后坚定的选择了 Angular material table. 于是才有了这篇文章

阅读更多

从Angular 13升级到Angular 15

1. 前言

升级应用程序或者框架是软件生命周期中非常重要的一项活动. 因为其有风险性, 很多人不愿意去做, 久而久之随着技术债务的积累变成了一件不能去做的事情.

在我的职业生涯中见到过很大这样逐渐失去生命活力的系统, 这里就不具体举例了, 以免引起不必要的争论, 明白的人自然明白.

阅读更多