Angular 开发技巧 (2018 ngChina 开发者大会)
10 likes3,028 views
该文档由多奇数位创意有限公司的技术总监黄保翕撰写，提供了 Angular 开发的技巧与最佳实践，包括 Angular 生命周期、开发工具的使用、代码优化策略、Typescript 重构功能，以及维护代码质量的标准。文档还介绍了如何利用Angular CLI和Visual Studio Code来提高开发效率，并汇总了相关链接和资源以供参考。
Angular 开发技巧 (2018 ngChina 开发者大会)
- 1. Angular 开发技巧 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) http://blog.miniasp.com/
- 2. Will 保哥 (黃保翕) • 现任多奇數位創意有限公司技术总监 • 台湾 Angular 社群核心成员 (Angular Taiwan) • 2018 年荣获 Angular/Web GDE (谷歌开发者专家) • 2008 至今连续 11 度获选 Microsoft MVP • 每年在台湾约有十几场演讲与数十场培训课程 • 出版著作有 ASP.NET MVC 2 开发实战、Windows Phone 开发实战、ASP.NET MVC 4 开发实战等书籍。
- 4. 拥有观念 • Angular 启动生命周期 • Angular 执行生命周期 • Angular 窗体开发技巧 • Angular 状态管理技巧 • Angular 组件开发观念 • 熟悉常用第三方组件 • 多页面路由开发观念 • 效能调校与变更侦测 • 单元测试与整合测试 • 模块封装与发行
- 5. 培养速度 • 培养盲打能力 • 先求准度再谈速度 • 务必熟悉开发工具 • 编程的心流模式 (Flow)
- 7. 使用 Schematics 实现开发自动化 • ng new demo1 --routing --style css • ng generate component hello • ng update • 自定义代码产生器 • 以 Manfred Steyer 的 angular-crud 为例 • ng g angular-crud:crud-module hotel • ng add @angular/elements • ng add @angular/material • ng add @angular/pwa • ng add @clr/angular • ng add @nativescript/schematics • ng add ng-zorro-antd • ng add ngcli-wallaby
- 8. ng new / ng add / ng generate 交互式界面 ng new demo1 --routing --style css
- 10. 自动更新与升级 Angular 应用程序 • https://update.angular.io/ • 更新过时的 rxjs 写法 npm install -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json npm uninstall rxjs-compat • 升级到 Angular v7 最新版本 npm install @angular/cli ng update @angular/cli @angular/core ng update @angular/material
- 11. 善用 Angular CLI v7 的 Bundle Budgets 功能 angular.json
- 12. 包的预算警示 200kB / 错误 500kB
- 13. 包的预算警示 200kB / 错误 250kB
- 14. Visual Studio Code 最贴心的 Angular 开发工具
- 15. 导航程序代码的利器 • 不要使用 VSCode 资源管理器 (EXPLORER) • 一律使用 Ctrl+E 快捷键查找档案 ( 命令: workbench.action.quickOpen ) • 善加利用模糊比对机制 (Fuzzy matching) • 快速开启最近档案 • 后退：Alt+ ( 命令: workbench.action.navigateBack ) • 前进：Alt+ ( 命令: workbench.action.navigateForward ) • 编辑器上方的导航路径 (Breadcrumbs) • 启动导航：Ctrl+Shift+. ( 命令: breadcrumbs.toggleToOn ) • 向左移动：Ctrl+ ( 命令: breadcrumbs.focusPrevious ) • 向右移动：Ctrl+ ( 命令: breadcrumbs.focusNext )
- 16. Angular Extension Pack • 请安装 Angular Extension Pack 扩充套件
- 17. Angular Language Service • 提供组件模板中所有必要的 IntelliSense 支援 • 提供 AOT 诊断讯息 • 提供 Directives 相关信息 • 转到定义 (Go to definition)
- 18. • 快速切换至组件模板 ( *.html ) • 快捷键：alt+o (Windows) / shift+alt+o (macOS) • 快速切换至组件样式 ( *.css ) • 快捷键：alt+i (Windows) / shift+alt+i (macOS) • 快速切换至组件类 ( *.ts ) • 快捷键：alt+u (Windows) / shift+alt+u (macOS) • 快速切换至组件 Spec 檔 ( *.spec.ts ) • 快捷键：alt+p (Windows) / shift+alt+p (macOS) 快速切换组件内的不同档案
- 19. 养成使用代码片段的习惯 • 大量利用 Code Snippets 完成代码 • ng-import-* 导入常见的 Angular 模块与服务组件 • a-* Angular v7 Snippets • ng-* Angular Snippets • ngrx-* Angular NgRx Snippets • ngxs-* Angular Ngxs Snippets • m-* Angular Material Design Snippets • rx-* RxJS Snippets for both TypeScript and JavaScript
- 20. 使用 TSLint 优化代码品质 • 内建命令 • TSLint: Fix all auto-fixable problems ( 命令: tslint.fixAllProblems ) • 用户设置 • "tslint.autoFixOnSave": true • TSLint core rules ( tslint.json ) • import-blacklist • prefer-const
- 21. 多利用 TypeScript 重构功能 (Refactoring) • Code Actions = Quick Fixes • Ctrl+. • Rename symbol • F2 • Change All Occurrences • Ctrl+F2 / CMD+F2 • Move TS • Move TypeScript files and update relative imports • Refactoring actions • Extract Method • Extract Variable • Extract function • Extract constant • Suggestion Code Action ( ... ) • Generate 'get' and 'set' accessors • Move to new file • Convert to async function • Convert between named imports and namespace imports
- 22. 活用 TypeScript 类型声明 • JSON to TS • Ctrl+Alt+V 从剪贴簿中的 JSON 字符串转换为 TypeScript 界面 • Ctrl+Alt+S 从选取的 JSON 字符串转换为 TypeScript 界面 • Paste JSON as Code • 支持 TypeScript, Python, Go, Ruby, C#, Java, Swift, Rust, Kotlin, C++, Flow, Objective-C, JavaScript, Elm, and JSON Schema 等程序语言。 • 先选取语言模式，再执行 Paste JSON as Code/Type 命令 • Paste JSON as Code ( 命令: quicktype.pasteJSONAsTypesAndSerialization ) • Paste JSON as Type ( 命令: quicktype.pasteJSONAsTypes )
- 23. • Document This • 连按 Ctrl+Alt+D 两次就会自动产生批注模板！ 自动产生代码文档
- 24. • https://angular.io/guide/styleguide • 每个档案只放一个组件 • 每个档案不超过 400 行，每个函式不超过 75 行 • 命名不要用 dash 也不要偷懒用缩写 • …… • 有空就认真看一遍 • 没空就用 Angular CLI • ng generate 产生程序代码骨架 • ng lint 检查程序代码撰写风格 ( codelyzer ) • 搭配 TSLint 自动进行风格检查 遵循 Angular Style Guide 指引方针
- 25. 相关连结 • Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more • How Did Angular CLI Budgets Save My Day And How They Can Save Yours • Angular Extension Pack - Visual Studio Marketplace • Angular CLI Command Reference • Angular Update Guide • Angular Style Guide
- 26. THANK YOU 2018 ngChina 开发者大会
Editor's Notes
- #5: Try latest Angular CLI Beta / RC, with Angular v7 and the new Ivy compiler, no install required thanks to npm and npx https://www.gurustop.net/blog/2018/10/11/4258/npm-npx-angular-beta-rc-next-angular-cli-ivy-compiler
- #8: Try latest Angular CLI Beta / RC, with Angular v7 and the new Ivy compiler, no install required thanks to npm and npx https://www.gurustop.net/blog/2018/10/11/4258/npm-npx-angular-beta-rc-next-angular-cli-ivy-compiler
- #13: How Did Angular CLI Budgets Save My Day And How They Can Save Yours https://medium.com/dailyjs/how-did-angular-cli-budgets-save-my-day-and-how-they-can-save-yours-300d534aae7a
- #19: https://pixabay.com/zh/%E5%A5%B3%E5%AD%90-%E6%9E%84%E6%88%90-%E7%94%B5%E5%AD%90%E5%AD%A6%E4%B9%A0-%E5%A5%B3%E6%80%A7-%E5%A5%B3%E5%AD%A9-%E4%BA%BA-%E9%AB%98%E5%8A%A0%E7%B4%A2-%E5%85%B4%E5%A5%8B-1401616/
- #20: https://pixabay.com/zh/%E5%A5%B3%E5%AD%90-%E6%9E%84%E6%88%90-%E7%94%B5%E5%AD%90%E5%AD%A6%E4%B9%A0-%E5%A5%B3%E6%80%A7-%E5%A5%B3%E5%AD%A9-%E4%BA%BA-%E9%AB%98%E5%8A%A0%E7%B4%A2-%E5%85%B4%E5%A5%8B-1401616/
- #25: https://pixabay.com/zh/%E5%A5%B3%E5%AD%90-%E6%9E%84%E6%88%90-%E7%94%B5%E5%AD%90%E5%AD%A6%E4%B9%A0-%E5%A5%B3%E6%80%A7-%E5%A5%B3%E5%AD%A9-%E4%BA%BA-%E9%AB%98%E5%8A%A0%E7%B4%A2-%E5%85%B4%E5%A5%8B-1401616/