Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular 开发技巧 (2018 ngChina 开发者大会)

2,423 views

Published on

要将 Angular 写好,必须搭配观念与开发技巧,观念让你头脑清楚,知道下一步要做什么。开发技巧则帮助你更容易进入编程的心流模式。本次演说将分享多个 Angular 实战现场常见的开发技巧,搭配 Angular CLI 与 Schematics,以及 Visual Studio Code 与 Angular Extension Pack 扩充套件,通过演示让大家看见极速开发的可能性。

Published in: Technology
  • Be the first to comment

Angular 开发技巧 (2018 ngChina 开发者大会)

  1. 1. Angular 开发技巧 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) http://blog.miniasp.com/
  2. 2. Will 保哥 (黃保翕) • 现任多奇數位創意有限公司技术总监 • 台湾 Angular 社群核心成员 (Angular Taiwan) • 2018 年荣获 Angular/Web GDE (谷歌开发者专家) • 2008 至今连续 11 度获选 Microsoft MVP • 每年在台湾约有十几场演讲与数十场培训课程 • 出版著作有 ASP.NET MVC 2 开发实战、Windows Phone 开发实战、ASP.NET MVC 4 开发实战等书籍。
  3. 3. Angular 开发心法 先拥有观念,再培养速度
  4. 4. 拥有观念 • Angular 启动生命周期 • Angular 执行生命周期 • Angular 窗体开发技巧 • Angular 状态管理技巧 • Angular 组件开发观念 • 熟悉常用第三方组件 • 多页面路由开发观念 • 效能调校与变更侦测 • 单元测试与整合测试 • 模块封装与发行
  5. 5. 培养速度 • 培养盲打能力 • 先求准度再谈速度 • 务必熟悉开发工具 • 编程的心流模式 (Flow)
  6. 6. Angular CLI 改善前端开发环境的终极武器
  7. 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. 8. ng new / ng add / ng generate 交互式界面 ng new demo1 --routing --style css
  9. 9. ng add @angular/material
  10. 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. 11. 善用 Angular CLI v7 的 Bundle Budgets 功能 angular.json
  12. 12. 包的预算警示 200kB / 错误 500kB
  13. 13. 包的预算警示 200kB / 错误 250kB
  14. 14. Visual Studio Code 最贴心的 Angular 开发工具
  15. 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. 16. Angular Extension Pack • 请安装 Angular Extension Pack 扩充套件
  17. 17. Angular Language Service • 提供组件模板中所有必要的 IntelliSense 支援 • 提供 AOT 诊断讯息 • 提供 Directives 相关信息 • 转到定义 (Go to definition)
  18. 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. 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. 20. 使用 TSLint 优化代码品质 • 内建命令 • TSLint: Fix all auto-fixable problems ( 命令: tslint.fixAllProblems ) • 用户设置 • "tslint.autoFixOnSave": true • TSLint core rules ( tslint.json ) • import-blacklist • prefer-const
  21. 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. 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. 23. • Document This • 连按 Ctrl+Alt+D 两次就会自动产生批注模板! 自动产生代码文档
  24. 24. • https://angular.io/guide/styleguide • 每个档案只放一个组件 • 每个档案不超过 400 行,每个函式不超过 75 行 • 命名不要用 dash 也不要偷懒用缩写 • …… • 有空就认真看一遍 • 没空就用 Angular CLI • ng generate 产生程序代码骨架 • ng lint 检查程序代码撰写风格 ( codelyzer ) • 搭配 TSLint 自动进行风格检查 遵循 Angular Style Guide 指引方针
  25. 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. 26. THANK YOU 2018 ngChina 开发者大会

×