| 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 |
