Angular
Angular中台前端管理系统ng-matero快速上手教学
现有管理系统方案 我认为，Angular还在维护的中台前端框架，大多属于冷门型。热门的管理系统方案，我一直都是推荐Ant Design Pro的，毕竟一直在持续地维护更新。 我在做管理系统的时候，由于好奇Angular，索性就学习了Angular，因为之前都是用React写的，想换换框架体验体验，同 ......
关于 Angular 应用里 Rxjs filter 操作符内的双重感叹号的用法
看下列这段出现在 Angular Component 内的代码： protected userCostCenters$: Observable<CostCenter[]> = this.userCostCenterService .getActiveCostCenters() .pipe(filte ......
关于 Angular Component ChangeDetectionStrategy.OnPush 策略
ChangeDetectionStrategy.OnPush 是 Angular 中的一个重要概念，它用于控制组件的变更检测策略。这个策略的作用是优化应用程序的性能，减少不必要的变更检测操作，从而提高应用的响应速度。在这篇文章中，我将详细介绍 ChangeDetectionStrategy.OnPu ......
关于 Subscription 在 Angular 开发中的应用
在Angular应用中，Subscription 是 RxJS（Reactive Extensions for JavaScript）库的一部分，用于管理可观察对象（Observables）的订阅。订阅是一种用于响应式编程的机制，它允许我们在观察对象发出新值时执行操作。在Angular中，Subsc ......
关于 Angular 的 HostBinding 装饰器
看这段 Angular Component 的代码： @HostBinding('class.hidden') get disabled() { return !this.isAccountPayment; } @HostBinding('class.hidden') 这段代码是 Angular 中 ......
Git commit - Angular Convention
使用 Git 的开发者会使用 git commit 进行代码提交，也会使用 -m 提交commit message。对于一些个人开发者，也许他们会觉得“这是我个人的项目，不用太在意git commit message 的格式或者规范”。 但是对于一个团队或者在开源项目上工作的话，对于 commit ......
用 Visual Studio Code 开发 Angular 应用自动生成的 .angular 文件夹
在 Angular 开发中，项目根目录下的 .angular 文件夹是 Angular CLI 工具的一部分，它包含了一些配置和缓存文件，用于提高开发效率和构建性能。.angular 文件夹的作用主要包括： 缓存构建信息：.angular 文件夹中包含了一些缓存文件，用于存储先前构建的信息，以加速后 ......
关于 fakeAsync 在 Angular 应用单元测试开发领域的使用介绍
笔者最近三年一直在 SAP 中国研究院从事 SAP Commerce Cloud (电商云)这款产品的前端开发。电商云 Storefront 基于开源项目 Spartacus，其 Github 代码仓库地址可以通过这个链接访问。 我最近所在的团队一直在负责 Spartacus 服务器端渲染(SSR) ......
什么是 Angular 应用 angular.json 中的 assets 数组
在Angular项目中，angular.json是一个非常重要的配置文件，用于定义和管理项目的各种设置和构建选项。其中，assets数组是angular.json中的一个关键配置项，用于指定需要在构建后包含在应用程序中的静态资源文件和文件夹。在本文中，我将解释什么是assets数组，并提供详细示例来 ......
什么是 Angular Schematics
Angular Schematics是Angular框架中一个强大的工具，用于自动化和简化项目的创建、维护和扩展。它提供了一种可扩展的方式来生成、转换和管理Angular应用的代码和文件结构。在本文中，我将详细解释什么是Angular Schematics，并提供示例来说明如何使用它。 什么是Ang ......
关于 Angular eslint-disable-next-line 注释的使用
在 Angular 开发中，开发者经常会使用 Lint 工具来保持代码质量的一致性和规范性。其中，ESLint 是一个用于识别和修复 JavaScript 代码问题的流行 Lint 工具，而 @typescript-eslint 则是一个专为 TypeScript 设计的插件，它为 ESLint 提 ......
关于 Angular testing 开发包里 fakeAsync 测试工具的用法
@angular/core/testing 是 Angular 框架提供的一个测试模块，用于帮助开发者编写单元测试和集成测试。其中的 fakeAsync 是一个非常有用的测试工具，它允许我们编写异步代码的测试，同时在测试中模拟时间的前进，使得测试用例的执行更加可控和可预测。 fakeAsync 函数 ......
关于 TypeScript 展开运算符在 Angular 应用开发中的应用一例
笔者最近一直在 SAP 中国研究院从事 Angular 开发，我所在的团队负责使用 Angular 开发 SAP Commerce Cloud 这款产品的界面，项目代号为 Spartacus. 这是一个开源项目，我们项目的 Github 地址[如下](https://github.com/SAP/s ......
关于 Angular 应用开发里 Subject 和 BehaviorSubject 的用法一例
笔者一直在 SAP 中国研究院从事 Commerce Cloud 这款 Angular 应用的开发，最近工作中修复了一个 bug. 在 Spartacus UI 上点击 Create 按钮之后：  , 我根据这位博主代码做了修改, 增加了跳转和每页行数功能. 先看图: // 可配置项 // totalItem 数据总条数 // maxSize：最多显示几页 // ......
angular - Rxjs
# Rxjs ```typescript //Observable（可观察者）：表示未来（future）值或事件的可调用集合的概念。 const observable = new Observable((subscriber) => { setTimeout(() => { subscriber.n ......
【Angular】 在组件内使用生命周期钩子函数如 OnDestroy 时，必须先 implements 么？
不是必须，就算不`implements`，它也能被成功识别为生命周期钩子函数。但是最佳实践建议加入`implements`，可以增加钩子函数的数据类型检查，以及阻止某些因为未加入`implements`导致的错误。 **参考：** [Angular Lifecycle Interface OnCha ......
【Angular】Angular的Service什么时候被销毁？
1. 当`Service A`被声明在`Moudule`里时，模块里所有组件、管道、指令拥有同一个`Service A`的实例，当第一个需要注入该`Service A`的组件、管道、指令实例化`A`后，后面再需要注入`Service A`时，用的是同一个实例。当`Moudle`被销毁（通常是该模块的 ......
【Angular】如何将自定义组件绑定为FormControl？
##### 参考资料： - [简单Demo：Angular Formcontrolename Custom Component](https://stackblitz.com/edit/angular-formcontrolename-custom-component?file=src%2Fapp% ......
Angular：表单设置动态校验规则（ngZorro示例）
# 背景 有时我们需要根据不同的条件，决定表单控件是否是必填的。 # 代码示例 ## HTML文件 ```HTML Name Nickname Nickname is required Check ``` ## TS文件 ``` typeScript import { Component, OnIn ......
浅谈Angular模板指令：ng-template和ng-container的用法
本篇文章带大家简单了解一下Angular模板的ng-template和ng-container指令，介绍一下ng-template和ng-container指令使用方法。 ng-template指令简介 ng-template是一个 Angular 结构型指令，用来渲染 HTML。 它永远不会直接显 ......
angular初识
电脑环境 已安装node和npm，其中node是通过nvm管理的，参考：https://www.cnblogs.com/PrintY/p/16892116.html 1、安装脚手架 npm install -g angular-cli 测试安装结果 ng -v 运行项目 修改package.json ......
Angular 应用启用 PWA 特性的 Angular CLI 命令行
`ng add @angular/pwa --project ` 这条命令在 Angular CLI 中，是用于将一个标准的 Angular 应用程序转化为一个渐进式网页应用（PWA，Progressive Web App）的命令。 首先，我们需要理解 PWA 是什么。PWA 是一种可以提供类似于原 ......
在Angular项目中如何读取json文件呢？
直接进入主题，我们的最终目得是要读取文件，那么首先我们需要先创建文件， 第一步：创建我们今天所需要在assets创建需要读取的文件Message.json， 如下: [ { "id": "E0001", "msg": "{0}の取得に失敗しました。" }, { "id": "E0002", "msg ......
关于Angular路由中CanActivateChild钩子的用法
CanActivateChild 和CanActivate的用法如出一辙，使用对象可能有所不同，例如说CanActivate一般的使用对象要么是兄弟平级关系，要么就是嵌套在CanActivateChild父级下的子路由。 具体使用实例： const routes: Routes = [ { path ......
《angular 高级编程》学习集锦
# 引用bootstrap ``` npm install bootstrap ```  在 angular.json ......
Angular如何创建路由以及如何配置路由导航
废话不多说直接进入正题，首先要创建好项目。 第一步：安装Angular路由 输入以下指令 npm install @angular/router 第二部：通过指令创建Angular路由守卫 ng g guard guards/auth(自定义名字) 第二部：在module文件里面导入①路由导航组件② ......