Angular
文章平均质量分 66
Angular 开发技术分享
汪子熙
Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师,SAP 中国技术大使。在长达16年的 SAP 产品开发生涯里,Jerry 曾经先后参与 SAP Business ByDesign,SAP CRM,SAP Cloud for Customer,SAP S/4HANA,SAP Commerce Cloud(电商云)等标准产品的研发工作。
Jerry 工作中使用 ABAP, Java, JavaScript 和 TypeScript 进行开发, 对包括 SAP UI5 在内的多款 SAP 自研框架有深入的研究。
展开
-
Angular 视图数据模型变化导致重新计算模板中的表达式的技术原理
在深入探讨 Angular 中的数据绑定和视图更新机制之前,重要的是要理解 Angular 的核心功能之一:变更检测(Change Detection)。变更检测是 Angular 框架用来同步模型(数据)和视图(模板)的过程。当数据模型变化时,Angular 会重新计算模板中的表达式,并将任何变化反映到视图上。这个过程保证了应用的响应性和数据的一致性。原创 2024-04-17 18:58:10 · 813 阅读 · 0 评论 -
Angular 中的结构指令运行时的工作原理
结构指令通过在运行时编译和修改视图模板的方式,为 Angular 应用提供了极大的灵活性和效率。这种机制允许开发者编写声明式代码,由框架负责底层的 DOM 操作和优化。理解这一点对于高效使用 Angular 并构建动态交互的现代 web 应用至关重要。通过这种方式,Angular 不仅提高了开发效率,还确保了应用的性能和响应速度,使开发者能够专注于业务逻辑,而不是底层的 DOM 操作和性能问题。原创 2024-04-17 18:57:22 · 461 阅读 · 0 评论 -
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
在 Angular 中,当你遇到这样的 call stack 帧时,实际上是涉及到 Angular 的模板编译和视图更新机制。这种情况通常表明你的 Angular 应用正在处理与这个模板相关的某些操作,如数据绑定、事件处理等。让我们详细探讨这个问题,了解背后的机制和可能的应用场景。原创 2024-04-17 18:54:40 · 405 阅读 · 0 评论 -
什么是前端开发的 Critical Rendering Path
(关键渲染路径)是一个至关重要的概念,它影响着网页的加载速度和性能表现。这个路径的每一步都是优化的关键点,因为任何延迟都会延长页面的渲染时间。由于网页是响应式的,这个计算过程需要考虑不同设备的屏幕尺寸和分辨率。DOM 树的构建是逐步进行的:浏览器从上到下解析 HTML 文件,将标签转换成相应的 DOM 节点。在某些情况下,页面的部分内容会在单独的层上绘制,然后浏览器将这些层合并显示到屏幕上。这包括减少资源的大小、优化资源的加载顺序和减少浏览器的工作量。假设有一个简单的网页,包含大量的图片和动画效果。原创 2024-04-17 16:14:27 · 310 阅读 · 0 评论 -
什么是 Angular 项目的 code split?
在讨论 Angular 项目中的代码分割 (code splitting) 之前,我们先要了解其基本概念及重要性。代码分割是一种优化网页性能的技术,通过将应用程序的代码分成多个较小的块,这些块可以按需加载,而不是一开始就加载整个应用程序。在 Angular 中,代码分割通常与路由 (routing) 和懒加载 (lazy loading) 密切相关。原创 2024-04-17 16:12:36 · 271 阅读 · 0 评论 -
Angular ngOnChanges(changes SimpleChanges) 的作用和使用场景
在深入探讨的作用和使用场景之前,我们需要明白 Angular 框架的基础和响应式编程原则。Angular 是一个由 Google 维护的开源前端框架,旨在帮助开发者通过使用 TypeScript 构建动态的单页应用(SPA)。它为开发者提供了一整套工具和设计模式,用于构建高效和可维护的应用程序。原创 2024-04-14 20:02:52 · 383 阅读 · 0 评论 -
Angular UntypedFormControl markAsDirty 方法的用途介绍
在复杂的表单逻辑中,有时需要根据特定的业务规则来决定表单控件是否被视为已修改。例如,一个表单控件的值虽然被修改了,但只有当它满足特定条件(如达到特定的长度、符合特定的格式)时,我们才视其为有效修改。这时,可以结合使用和自定义验证逻辑来实现这一需求。原创 2024-04-14 19:59:02 · 324 阅读 · 0 评论 -
Angular UntypedFormControl 的使用场景介绍
在深入探讨的作用与使用场景之前,我们需要理解 Angular 表单的基础概念以及是如何在这个框架中扮演重要角色的。Angular 提供了两种不同的表单构建策略:响应式表单和模板驱动表单。是响应式表单策略中的一个关键概念。响应式表单允许我们以更声明式的方式来处理用户输入,使得表单处理逻辑更加清晰、可测试,并且易于扩展。在这种策略中,FormGroup和FormArray是核心构建块。这些 API 使得开发者能够以编程方式定义表单的结构、数据和验证逻辑,而不是将所有这些逻辑混杂在模板中。则是。原创 2024-04-11 15:43:07 · 303 阅读 · 0 评论 -
Angular 配置文件 tsconfig.lib.json 里的 strictTemplates 选型
是 Angular 编译器(Angular Compiler)中的一个设置项,当启用时,它会对 Angular 模板应用更加严格的类型检查。这意味着,编译器会检查模板中的表达式和绑定,并确保它们在 TypeScript 类型系统的约束下是有效的。这包括变量的类型、传递给组件或指令的输入属性(@Input)的类型、绑定的事件处理函数参数的类型等等。在新项目开始时启用它可以帮助团队形成良好的开发习惯,对于已经存在的项目,启用它可以逐步提高项目的类型安全性,尽管可能需要一定的迁移工作。,迫使你处理这种情况。原创 2024-04-09 18:43:18 · 222 阅读 · 0 评论 -
前端应用实现 image lazy loading 的原理介绍
在现代的 web 开发中,提升页面性能是一个重要的议题,其中一个常见的实践就是图片的懒加载(lazy loading)。懒加载是一种优化网页或应用加载时间的技术,它的核心思想在于延迟加载页面上的某些资源(如图片、视频等),直到这些资源即将出现在用户的视口(viewport)中时才开始加载。这样做不仅可以减少无谓的数据传输,降低服务器负担,还能显著提升用户体验。在 HTML5 中,引入了一个原生的懒加载特性,通过为标签添加loading属性并设置其值为lazy来实现。原创 2024-04-03 21:34:54 · 293 阅读 · 0 评论 -
TypeScript error TS7016 错误消息的含义
错误及其解决方案的过程中,我们不仅仅学会了如何应对一个具体的编译器错误,更重要的是,我们学会了如何利用 TypeScript 的强大特性来编写更安全、更可靠的代码。通过正确地使用类型定义文件和合理地配置项目,我们可以最大限度地发挥 TypeScript 的潜力,为我们的开发工作带来更多的便利和保障。在 TypeScript 开发过程中,遇到各种错误提示是家常便饭的事情,理解这些错误及其背后的原因对于编写更健壯、易于维护的代码至关重要。这个第三方库,但是没有安装相应的类型定义文件。原创 2024-04-03 19:58:58 · 428 阅读 · 0 评论 -
mime.js 工具库的使用场景
mime库还允许你定义自己的 MIME 类型映射。这在处理不常见的文件类型或需要覆盖默认映射时特别有用。// 定义一个新的 MIME 类型// 现在,可以获取自定义的 MIME 类型了通过define方法,可以添加或修改 MIME 类型映射。这个方法接受一个对象,键是要添加的 MIME 类型,值是一个数组,包含对应的文件扩展名。原创 2024-04-03 19:57:47 · 300 阅读 · 0 评论 -
Angular 应用 node_modules 子文件夹 @types 的作用介绍
子文件夹的多个作用后,我们可以看到,尽管 TypeScript 本身提供了强大的类型系统,但是通过社区贡献的类型定义文件,这一系统的潜力被进一步扩大了。这些类型定义文件不仅为开发人员提供了强大的工具来提高代码质量和开发效率,而且还促进了 TypeScript 生态系统的健康发展,让更多的 JavaScript 库可以在 TypeScript 项目中无缝使用。TypeScript,作为 JavaScript 的一个超集,为开发者提供了类型检查和更高级的编程特性,这使得开发大型应用变得更加容易和可靠。原创 2024-04-03 19:51:26 · 279 阅读 · 0 评论 -
生成 index.d.ts 文件的几种方式
手动创建index.d.ts文件通常涉及到对目标 JavaScript 库的深入理解,包括其公开的 API、数据结构、以及函数签名等。这种方法虽然耗时且可能需要频繁更新以跟上库的变化,但它允许创建者精确控制类型定义的质量和准确性。举个例子,假设有一个简单的 JavaScript 工具库myUtil,它包含一个add为这个库编写类型定义文件index.d.ts,你需要详细地描述add这个过程包括了定义一个模块,该模块导出一个add函数,函数接受两个参数a和b(都是number类型)并返回一个。原创 2024-04-03 19:49:54 · 708 阅读 · 0 评论 -
Angular 项目中一个 index.d.ts 文件的具体例子介绍
在探讨你提到的index.d.ts文件之前,理解其背景和作用至关重要。index.d.ts文件属于 TypeScript 类型定义文件的一部分,这类文件在 TypeScript 项目中扮演着不可或缺的角色。它们为 JavaScript 库提供了类型定义,使得 TypeScript 代码能够在编译时检查到类型错误,从而提高代码的健壮性和可维护性。接下来,我们将深入探讨该文件的内容和它如何作用于项目中,同时给出具体示例以便更好地理解其价值。原创 2024-04-03 19:48:21 · 288 阅读 · 0 评论 -
浅谈 Angular 应用前端消息显示机制的一个实际需求
本文通过一个实际需求的实现案例,详细介绍了 Angular Ngrx 里 Effect,Connector,Adapter,Reducer,Selector 和 Store 等概念的交互关系,希望对需要实现类似功能的同行有所帮助。原创 2024-03-28 00:45:00 · 892 阅读 · 0 评论 -
Angular 项目里 tsconfig.schematics.json 文件的作用
文件允许开发者为 Schematics 定义特定的编译选项。这包括指定 ECMAScript 目标版本、模块解析策略、以及是否允许使用来自 Node.js 的类型定义。例如,由于 Schematics 运行在 Node.js 环境中,通常会设置,以确保 TypeScript 能正确地解析 Node.js 模块。虽然文件可能在许多 Angular 项目中并不显眼,但它对于那些利用 Schematics 来自定义和扩展其应用功能的开发者而言,却是不可或缺的。原创 2024-03-21 08:30:22 · 278 阅读 · 0 评论 -
Angular module 的 forRoot 和 forChild 方法
在详细解析这段 Angular 代码之前,让我们首先理解几个关键的 Angular 概念,包括模块(Modules)、服务提供者(Providers)、工厂函数(Factory functions)、以及模块与服务初始化器(APP_INITIALIZER 和 MODULE_INITIALIZER)。理解这些概念对深入掌握 Angular 框架至关重要。通过这段代码,我们将深入探讨类如何利用 Angular 强大的依赖注入系统来配置和提供服务,特别是在应用程序初始化阶段如何动态注册路由出口(outlets)原创 2024-03-18 19:01:42 · 405 阅读 · 0 评论 -
Angular angular-oauth2-oidc 库的使用概述
是 Angular 应用中实现 OAuth 2.0 和 OpenID Connect 标准的强大工具。它简化了认证流程的实现,增强了应用的安全性,并提供了灵活的配置选项以适应不同的使用场景。无论是为了保护应用的安全,还是为了提供无缝的用户登录体验,都是一个值得考虑的选择。原创 2024-03-08 20:56:47 · 952 阅读 · 0 评论 -
Angular angular-oauth2-oidc 实战
下面是一个使用库的基础 Angular 示例,展示了如何配置和使用这个库来实现基于 OAuth 2.0 和 OpenID Connect 的用户认证。这个例子假设你已经有一个可用的认证服务器,并且已经在该服务器上注册了你的应用。原创 2024-03-08 20:55:47 · 366 阅读 · 0 评论 -
为什么 Angular 服务器端渲染只面向匿名用户,没有用户上下文
在深入探讨服务器端渲染(SSR)时,我们遇到的一个核心概念是:在 SSR 中渲染是面向匿名用户,没有用户上下文的。这句话涵盖了 SSR 的基本特性之一,即在服务器上生成的页面是针对所有用户通用的,不包含任何特定用户的个性化信息。这一概念对于理解 SSR 的工作机制和它与客户端渲染(CSR)的区别至关重要。原创 2024-03-07 21:10:28 · 397 阅读 · 0 评论 -
2024 年 3 月 1 日安装 Composable Storefront 2211 遇到 Angular 和 TypeScript 版本不匹配的错误
错误截图:我的解决方法:在 package.json 里,将 TypeScript 的依赖版本,直接修改成5.3.3即可。在遇到 Angular 编译初始化失败的问题时,错误信息提示了根本原因:Angular 编译器需要的 TypeScript 版本是大于等于 5.2.0 且小于 5.3.0,但是你的环境中安装的 TypeScript 版本是 5.3.3。这意味着你当前的 TypeScript 版本与 Angular 编译器兼容性存在问题。原创 2024-03-01 21:59:06 · 850 阅读 · 0 评论 -
Angular CLI 里打印出来的 TypeScript 版本号是从哪里来的
通过以上分析,我们了解到 Angular CLI 的ng version命令解析 TypeScript 版本的过程是相当精确和可靠的。它不仅考虑了项目配置文件中的定义,还会检查实际安装的依赖版本,以确保开发者能够获得准确的版本信息。这一机制对于维护项目的依赖关系、确保项目的稳定性以及避免版本冲突等方面都至关重要。通过理解这一过程,开发者可以更有效地管理和维护他们的 Angular 应用及其依赖。原创 2024-03-01 20:11:40 · 818 阅读 · 0 评论 -
浅谈 Angular 和 UI5 这两种前端框架里控件 ID 的设计思路差异
Angular 虽然和 UI5 一样,也是单页面应用,并且二者都允许并重度依赖自定义控件 (Angular 里称 Component),但二者在视图设计上一个较大的差异就是,Angular Component 的视图实现于原生的 HTML 文件 (或者于内联的 HTML 字符串) 里,而非像 UI5 那样,使用 XML 或者 JavaScript 视图来实现自己的页面布局。UI5 控件提供了一个工具方法,.ui.getCore().byId,能够根据控件 ID,返回对应的控件实例。原创 2024-02-06 04:00:00 · 1679 阅读 · 0 评论 -
什么是 Angular 应用里的 Custom provider
在组件或其他 Angular 元素中使用自定义提供者的方式是通过构造函数的参数进行依赖注入。// 假设在同一目录下存在providers文件`,})) {}通过以上示例,我们可以看到如何通过自定义提供者为 Angular 应用中的组件、服务等元素提供所需的依赖项。这样的设计使得应用的组织结构更加清晰,代码更易维护。原创 2024-01-05 12:54:59 · 323 阅读 · 0 评论 -
Angular Custom Providers 的一个具体例子讲解
我们现在想要创建一个 Custom Provider,使得在生产环境中,我们使用的是真实的 LoggerService 服务,而在测试环境中,我们使用的是一个模拟的 MockLoggerService 服务,但两种环境下都需要使用相同的接口。简而言之,Custom Provider 是 Angular 提供的一种高级特性,允许开发者更灵活地控制服务的创建和配置,达到代码解耦和优化性能的目的,对于任何开发大型 Angular 应用的开发者来说,都是一个非常有用的工具。原创 2024-01-05 12:54:14 · 311 阅读 · 0 评论 -
关于 PWA url 参数 ngsw-bypass=true
比如说,你的应用程序具有一个 HTTP GET 请求,URL 格式为 http://example.com/data,如果你想要在这个请求中绕过 Service Worker,那么你只需要将 URL 改为 http://example.com/data?当在 URL 中添加 ngsw-bypass-true 参数时,Angular Service Worker 会检测到这个参数,并在处理相应请求时绕过缓存,直接向服务器发起请求获取最新的资源。这种缓存策略可以提高应用的加载速度,减少对网络的依赖。原创 2024-01-02 19:40:29 · 360 阅读 · 0 评论 -
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
首先,让我们了解一下Service Worker的基本概念。如果缓存中不存在所需资源,Service Worker会发起网络请求,获取最新的资源,并在成功获取后将资源缓存起来,以备将来使用。这样,下次用户再次访问相同的页面时,Service Worker就可以直接从缓存中提供资源,而无需再次向服务器请求,从而实现了快速加载和离线访问的效果。总体而言,Service Worker在HTTP请求的处理中发挥着关键作用,通过拦截、处理请求以及管理缓存,它为Web应用提供了更好的性能、离线支持和用户体验。原创 2024-01-02 12:13:26 · 335 阅读 · 0 评论 -
Angular PWA 应用什么情况下会出现 504 error
根据迟延,带宽,请求类型等情况,Service Worker 可以直接查询缓存并返回结果,或者把请求发送到网络并等待成功的响应,甚至是预先读取并缓存某些资源。所以,我们在设计 PWA 的时候,不仅要考虑到如何利用 Service Worker 进行资源预加载和缓存,更要针对不同的内容和功能,设计出更合理的网络请求策略,并考虑到网络异常情况下的用户体验。对于一些涉及用户操作和结果的请求,例如表单提交,如果这个操作需要实时的服务器响应,即使在断网或者网络不稳定的情况下,我们也无法从缓存中获取到任何有用的内容。原创 2024-01-02 12:12:12 · 348 阅读 · 0 评论 -
Service Worker cache 与 HTTP cache 相比的优势所在
Service Worker 允许开发者缓存特定于应用的资源,而不仅仅是依赖于浏览器的默认缓存机制。这意味着你可以更灵活地管理应用所需的资源,并确保它们始终可用。原创 2024-01-02 12:11:29 · 384 阅读 · 0 评论 -
什么是 Angular 框架中的 Zone.js
是一个 JavaScript 库,它用于跟踪和管理异步操作,帮助开发者更容易地处理异步代码执行的流程控制。提供了一个透明的上下文,可以捕获异步操作的生命周期事件,例如任务的开始和结束。在前端开发中,特别是在复杂的单页面应用(SPA)中,异步操作是很常见的,包括事件处理、HTTP 请求、定时器等。是一个强大的工具,使开发者更容易处理和调试异步代码,特别是在复杂的前端应用中。举例来说,假设有一个简单的 Angular 组件,其中包含一个按钮,点击按钮时发起一个 HTTP 请求。在这个例子中,当按钮被点击时,原创 2023-12-27 08:50:02 · 461 阅读 · 0 评论 -
谈谈企业级应用的自定义 UI 创建和集成方法一览
本文以 SAP CRM,Cloud for Customer 和 Commerce Cloud 三款企业级 Web 应用为例,详细介绍了当客户发觉这些Web 应用的标准功能无法满足自己实际业务需要时,如何能够将自己二次开发的定制 UI 集成到原先标准的 Web 应用中去。原创 2023-12-14 14:31:10 · 954 阅读 · 0 评论 -
使用 jMeter 给 Spartacus SSR 发送 100 个并发的 SSR 请求,全部被 SSR 响应了
剩余的时间(900毫秒)主要用于数据传输,包括服务器处理和响应数据传输的时间。更关注于请求启动到响应开始的时间间隔,着重于网络延迟和服务器响应的性能。它主要关注的是请求的启动和响应的接收之间的时间间隔,不考虑数据的传输时间。这个值告诉我们,在这个特定的请求中,300毫秒是从请求发送到服务器响应开始的时间。提供了一个更专注于网络和服务器响应的视角,它反映了在真实网络环境中的性能表现。将更侧重于服务器处理请求和网络传输所花费的时间,而不受数据传输时间的影响。请求从客户端到服务器以及响应从服务器到客户端的时间。原创 2023-12-14 11:23:35 · 357 阅读 · 0 评论 -
谈谈企业级 Web 应用里各种不同的 UI 组件设计思路
本文概述了 SAP WebClient UI,SAP Cloud for Customer 和 SAP Commerce Cloud Spartacus UI 中容器组件的设计和运行原理。个人认为,学习 SAP 某个产品的 UI 开发,只要掌握了其普通 UI 组件和容器组件的概念和开发方式,就足以胜任大多数场合下的工作需求了。原创 2023-12-14 11:07:05 · 964 阅读 · 0 评论 -
Angular 服务器端渲染应用里重用 TCP 连接的示例代码
总的来说,这段代码的目的是配置全局的 HTTPS 代理,以确保在应用程序中使用的所有 HTTPS 请求都遵循相同的连接池和超时设置。这对于优化网络性能和资源利用是很有帮助的,尤其是在处理大量并发请求时。实例,并将其用于发起 HTTPS 请求。这使得我们可以在不同的请求之间使用不同的代理配置。模块创建了一个全局的代理对象,并对其进行了一些配置。这段代码是使用 Node.js 中的。上述代码中,由于设置了全局代理,通过。发送的请求将使用上述配置的代理参数。在这个例子中,我们创建了一个自定义的。原创 2023-12-09 13:35:31 · 322 阅读 · 0 评论 -
Angular 组件模版代码里使用 ngIf 进行条件渲染的例子
如果没有库存,那么这个添加到购物车的按钮就没有存在的必要,因为用户无法添加没有库存的商品到购物车。可能是一个组件的属性,代表当前的选项中是否要显示添加到购物车的按钮。在这个 Angular 项目中,这个按钮被用来提交一些数据。也可能是一个组件的属性,代表最大的数量。如果当前的数量小于等于 0,或者大于最大的数量,那么这个按钮就会被禁用。这是一个 Angular 组件的 HTML 模板代码,涉及到了一些 Angular 的核心特性,包括结构型指令。可能是一个组件的属性,代表当前的数量,这个类,否则就会使用。原创 2023-12-09 13:27:55 · 401 阅读 · 0 评论 -
如何在 Angular 应用中发起 HTTP 302 redirect
这段代码的主要作用是在Angular Universal应用中,通过依赖注入获取到服务端的HTTP响应对象,并在需要的时候对其进行操作。通常,这样的操作会在服务器端渲染期间,用于设置一些与HTTP响应相关的信息,例如状态码、头部信息等。在这段代码中,涉及到Angular框架中的依赖注入(Dependency Injection)以及Angular Universal的服务端渲染(Server-Side Rendering)相关的内容。然后,在类的构造函数中,使用了Angular的依赖注入机制来注入。原创 2023-12-07 08:41:48 · 319 阅读 · 0 评论 -
Angular 应用里异步打开对话框的技术实现
这段代码涉及到 Angular 中处理对话框(Dialog)的逻辑,其中openDialog方法返回一个 Observable 对象。我们将分两部分来详细解释这段代码。原创 2023-12-06 23:02:00 · 335 阅读 · 0 评论 -
什么是 ISR(Incremental Static Regeneration)
ISR(Incremental Static Regeneration)是一种Web前端开发中的静态网页生成技术。它是Next.js框架引入的一项功能,旨在改进静态站点的性能和用户体验。在了解ISR之前,我们需要先了解几个相关的概念。原创 2023-12-04 19:52:01 · 1140 阅读 · 0 评论 -
关于企业级 Web 应用搜索引擎优化(Search Engine Optimization)的一些工作经验分享
本文从 Web 应用客户端渲染和服务器端渲染的概念辨析出发,接着介绍了开源项目 Spartacus 这款 Angular Storefront 开发框架针对搜索引擎优化的详细技术实现,希望对有类似开发任务的同行有所启发。原创 2023-11-29 21:43:55 · 943 阅读 · 0 评论