O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

2.371 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

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 开发者大会

×