求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Model Center   Code  
会员   
 
 
 
开班计划 | 技术学院 | 管理学院 | 嵌入式学院 | 机械 | 军工学院 | 定向培养 | 专家指导  
 电话 English
成功案例   品质保证
 
成功案例
航天信息 Java EE 5
中科院研 J2EE高级开发
赛迪时代 “J2EE设计模式
福富软件 J2EE设计模式和
上海盛趣 J2EE架构设计
信城通 J2EE体系架构设
北大方正 Java中级&J2

相关课程  
Struts+Spring+Hibernate
基于J2EE的Web 2.0应用开发
J2EE设计模式和性能调优
Java EE 5企业级架构设计
Java单元测试方法与技术
Java编程方法与技术
 
全部课程 >web开发  
基于 Angular 13 + Electron 的桌面应用实战
741 次浏览  35 次
张老师
国内早期angular深入实践者
 
时间地点: 在线、北京、上海、深圳根据报名开班
课程费用: 5000元/人
企业内训:可以根据企业需求,定制内训,详见 内训学习手册
报公开课  


认证方式:
培训前了解能力模型。
培训后进行能力评测:
  • 在线考试
  • 能力分析,给出学习建议
  • 合格者颁发证书,作为职业技能资格证明


            本次课程为期 2 天,相比传统的 web 开发,特殊之处选择了 Electron 作为桌面端开发。 安排了 Electron 的开发搭建和核心知识的实战补充, UI 绘制选择angular 13。课程案例将完整地搭建一个基于 Electron + angular(13 版本为主) 搭建的桌面应用(双端开发调试 + 打包自动升级等)。
    课程目标:
    依赖环境安装
    通过培训,了解并掌握以下内容:
  • Electron 实战必备:
  • electron 依赖安装
  • 客户端实战开发必备知识
  • 主进程
  • 调试
  • 客户端打包
  • 基于脚手架搭建 angular 13 应用:
  • 熟悉脚手架生成的目录和命令
  • v13 版本的核心变化
  • Typescript 实战必备语法
  • 预编译样式
  • angular 实战核心模块
  • 开源组件库使用
  • 调试 & 自动化测试 & 性能工具
  • 错误日志监听
  • 案例实战
    培训对象:web前端应用开发工程师
    学员基础:对web开发基础知识有一定了解
    授课方式: 定制课程 + 案例讲解 + 小组讨论,60%案例讲解,40%实践演练

    培训内容:2天
    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
     
           
     
    定制内训


    最新活动计划
    UAF架构体系与实践 5-17[北京]
    用户体验与界面设计 5-22[北京]
    MBSE(基于模型的系统工程)6-20[北京]
    大模型微调原理与实操 6-20[厦门]
    图数据库与知识图谱 6-27[北京]
    Linux内核编程及设备驱动 7-25[北京]