基于 Angular 13 + Electron 的桌面应用培训-中科信软培训

培训内容：

Electron 实战必备：electron 依赖安装	• electron 版本选择（目前最新 18.2.0 ） • electron-builder 版本选择
客户端实战开发必备知识	• 进程和线程 • 主进程和渲染进程 • 进程间通信 • 跨进程访问 • 以及 electron 升级中遇到的常见问题
主进程	• 如何创建窗口的案例 - BrowserWindow • 如何加载网页的案例 - loadURL • 窗口关闭事件监听回收的案例 • app 事件监听的案例 * ready * window-all-closed * activate • 其他高阶模块的案例 * ipcMain 发送和监听消息案例 * autoUpdater 自动升级案例 * 部分原生 UI 模块案例： menu 案例 & dialog 案例
调试	• 主进程调试： * Node 进程基于 --inspect * 常见问题：端口冲突，增加命令参数指定端口 • 渲染进程调试： * Chromium 的一个窗口，和网页调试类似，基于 devtools * 代码启动窗口的时候设置 mainWindow.webContents.openDevTools() • 在 VSCode 调试（高级篇）： * 安装 Debugger for Chrome * 配置 .vscode/launch.json • 生产环境调试： * 基于 Debugtron * 常见问题解决
基于脚手架搭建 angular 13 应用	@angular/cli 13.* （比如 13.3.2 ）创建 angular 13 版本的项目 angular 脚手架的版本迭代历史
熟悉脚手架生成的目录和命令	• src/app • src/environments • ng serve 本地启动服务和参数 • ng build 构建和打包之后的文件介绍
v13 版本的核心变化	• rxjs 升级到 7 • 构建工具默认使用持久构建缓存 • 移除 IE11 铺平道路 • 新 API 移除了将 ComponentFactoryResolver 注入到构造函数的需要 • Angular Package Format (APF) 的更改 • View Engine 在 Angular 中将不再可用
Typescript 实战必备语法	• class • private • public • Partial • tsconfig 的配置 • tslint 的项目配置和代码规范
预编译样式	选择 less 作为主要预编译的原因以及对比 Sass 等
angular 实战核心模块	• 围绕核心模块进行组件化开发 1.@angular/core 2.@angular/router 3. @angular/forms 4.@angular/common 5.@angular/compiler 6.rxjs 7.zone.js • angular 基础文件： angular.json main.ts app.component.ts index.html • 案例所需指令详解： ngIf (ngSubmit) [ngClass] [disabled] [innerHTML] • 案例涉及路由 @angular/router 详解： routerLink navigate • 案例涉及与后端服务通信 @angular/common/http ： HttpClient 等 services 目录的拆分 post 与 get 的区分结合 localStorage 进行用户登录信息的本地缓存 • 案例涉及到 @angular/forms 详解 ReactiveFormsModule FormBuilder FormGroup Validators • 基于 karma 对案例项目进行自动化测试： karma.conf.js 的配置详解 karma 的依赖配置： karma-coverage-istanbul-reporter 、 karma-jasmine-html-reporter 等 • rxjs 的案例深度应用 rxjs/operators Subscription Observable of throwError
开源组件库使用	• ng-zorro-antd 部分表单组件使用案例 • element 部分表单组件使用案例 • 组件必备知识详解
调试 & 自动化测试 & 性能工具	• 基于 protractor 自动化测试实战： • 性能检测：基于 lighthouse 评分进行优化 • angular 工具使用： chrome 扩展 DevTools 实战必备使用案例解析
错误日志监听	整体基于 sentry 搭建错误日志上报的实时平台
案例实战	• 完成一个登陆、注册的表单 • electron + angular 13