ITPub博客

一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一：Hello World SAP UI5 初学者教程之二：SAP UI5 的引导过程 Bootstrap SAP UI5 初学者教程之三：开始接触第一个 SAP UI5 控件 SAP UI5 初学者教程之四：XML 视图初探 SAP UI5 初学者教程之五：视图

最后的效果： 请求的方法类型和 url 都被记录了下来，同响应一起。 设置断点来观察自定义 HTTP interceptor 运行时原理： 我们自定义的 intercept 也是通过依赖注入的方式被注入到 httpInterceptor 的调度器里。 首先把 method 和 urlWithParams 从 request 里提取出来： 返回的 Observable

在 page-slot.module.ts 里，定义一个配置对象 ConfigUIDebug. 这个配置对象定义在 cms-component-data.ts 的 ConfigUIDebug 对象里，包含一个 boolean 类型字段：switchOn 通过： providers: [provideDefaultConfigFactory(jerryConfigFactory)],

标准的 Spartacus repo：https://github.com/SAP/spartacus 我 fork 了一个自己的仓库： https://github.com/wangzixi-diablo/spartacus/ 当远端仓库有新的提交后，我在我自己的仓库里，使用如下命令，抓取最新的提交： git pull https://github.com/SAP/spartacus

检查一下都有哪几处使用到了这个字符串常量： (1) 定义 State 数据结构： (2) 用于创建 feature selector，传入 ROUTING_FEATURE 作为输入参数：feature name (3) 在 routing.module.ts 里，作为 StoreModule.forFeature 和 StoreRouterConnectingModule 的输入参数

state，effects，action，reducer 都在这个文件夹里： 在 routing-state.ts 里定义了 RouterState 接口： 继承自 ngrx router 里的 RouterReducerState 类型，类型参数为我们自定义的 ActivatedRouterStateSnapshot. export interface ActivatedRouterSta

CMS page API 负责确定 template 显示哪些 slots，slots 显示哪些 Component： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OtPqTaxm-1635227915586)(https://upload-images.jianshu.io/upload_images/2085791-10b538921bcb2566.pn

我们以前介绍过，经过 SAP Spartacus 路由配置后的 routes 数组，其 route 数据结构的 Component 属性，清一色指向 generic 的 PageLayoutComponent，那么后者怎么知道自己应该加载哪些 Angular Component 的数据呢？ 我们首先看看是哪些 template 调用了 PageLayoutComponent 的 select

这是 Jerry 2021 年的第 67 篇文章，也是汪子熙公众号总共第 344 篇原创文章。 Jerry 从 2007 年大学毕业加入 SAP 成都研究院至今，一直从事企业管理软件领域的开发工作。 企业管理软件面向的是企业级用户，如果软件出现故障(bug)，在某些极端情况下，可能会让企业蒙受巨大的经济损失，故而对软件开发人员在编程规范，软件测试和软件交付之前的验证等各方面都提出了更高的要求。

图一是 Chrome 开发者工具默认的 Light 风格。 在设置选项里，选择 Dark，即可加载如下图所示的风格： 还可以安装这个 Material DevTools Theme Collection： 在 Chrome 开发者工具的 Experiments 选项里，勾上“Allow extensions to load custom stylesheets”： 然后 The

使用 routing.selector.ts 里的 isNavigating: 设计原理：Spartacus route reducer 里针对 ROUTER_NAVIGATION 和 ROUTER_NAVIGATED 进行状态迁移： 当接收到 ROUTER_NAVIGATION(跳转正在进行) 事件时，将状态的 nextState 字段设置成 action payload： 当

标题：@ngrx/router-store 的作用 官网 用于将 Angular Router 与 Store 连接的绑定。 在每个路由器导航周期中，会分派多个动作，让您可以监听路由器状态的变化。 然后，您可以从路由器的状态中选择数据，为您的应用程序提供附加信息。 安装： npm install @ngrx/router-store —save 之后，在 package.json

看个具体的例子： InjectionToken 构造函数，需要传一个类型参数进去。 这个 ActionReducerMap 的定义很讲究： export declare type ActionReducerMap<T, V extends Action = Action> = { [p in keyof T]: ActionReducer<T[p], V&gt

准则 content page routes 来自后台，而 product，category 的配置位于 Spartacus 层。 无论如何，都允许在 Spartacus 层修改。 例如 product route 配置，位于 default-routing-config.ts: 以 myCompany 为例： http://localhost:4299/powertools-spa

调试入口：this.routingService.getNextPageContext() 这个 page context 直接从 store 里读取的，靠调试 selector 是拿不到的。 我们以前学习过，当 Angular router 框架成功将浏览器地址栏的 url，匹配到开发人员用 RouterModule.forChild 传入的 routes 数组时，会抛出 RoutesR

当访问如下 url 时，http://localhost:4200/powertools-spa/en/USD/jerryproduct/3755211/PSR%2010.8%20LI 我们能看到如下的 OCC API 调用： https://<host>:9002/occ/v2/powertools-spa/cms/pages?pageType=ProductPage&c

库地址 express-winston 为 express.js 应用程序的请求和错误记录提供中间件。 它使用“白名单”从请求和（0.2.x 中新增的）响应对象中选择属性。 要使用 express-winston，您需要将以下内容添加到您的应用程序中： 在 package.json 中： { "dependencies": { "...&quo

ts-node 是 Node.js 的 TypeScript 执行引擎和 REPL。 它 JIT 将 TypeScript 转换为 JavaScript，使您无需预编译即可直接在 Node.js 上执行 TypeScript。 这是通过挂钩 node 的模块加载 API 来实现的，使其能够与其他 Node.js 工具和库一起无缝使用。 注意，在 windows 操作系统里，直接运行 ts-no

How to Debug an Angular Schematic using Visual Studio Code 能够在代码执行时调试和遍历代码是我们开发工作流程的基础。这是一项必不可少的功能，使我们能够调试和确定代码在做什么。它可以是我们测试工作流程的一部分——附加调试器并在特定场景中执行测试。 调试还提供了一个机会来了解代码（我们没有实现的）是如何工作的。原理图当然就是这种情况。作为

Jerry 的前一篇文章Angular 原理图 Schematics 学习 - 动手开发一个实际的例子，已经开发好了一个可以运行的 Angular library Schematics. 本文介绍具体的运行步骤。 在工作区的根目录下，运行库的 ng build 命令。 ng build my-lib 确保 build 通过： 如果遇到错误，可以参考我的代码仓库的代码。 以及