kennana / blog-angular

Angular 笔记

目前版本:

Angular回忆录

一个关于Angular的学习和使用笔记。

希望可以帮到你，也希望有更多人使用Angular~

Author	deepthan
E-mail	[email protected]

概念理解

• Angular必知八大概念
• angularjs与angular概念区分
• 白话Angular词汇
• AOT 编译介绍

脚手架 Angular cli

• cli 用法
• proxy 配置

装饰器@

• class装饰器
• viewChild

路由 router

• RouterLink
• navigateByUrl vs navigate
• routerLink和routerLinkActive动态传参
• Routes介绍
• 路由高亮--长明灯RouterLinkActive
• 路由守卫，拦截懒加载，拦截预加载，离开验证
• 预加载
• Angular2+去除url中的#
• 获取当前路由

组件 Component

• 组件的生命周期
• 组件间通信
• 动态组件
• angular如何主动销毁组件
• 组件监听传过来值变化的若干姿势
• 如何将字符串的html渲染到dom元素中
• Angular 2+模板语法
• 如何重新渲染组件

指令 Directive

• ngIf
• ngFor
• ngSwitch
• ngClass
• ngStyle
• ng-template
• ng-content
• ng-container vs ngTemplateOutlet
• NgTemplateOutlet
• Angular如何自定义指令
• 如何根据条件决定是否添加指令
• 一个文件中同一段html被多次用到怎么抽离
• ngPreserveWhitespaces和NgNonBindable

管道 Pipe

• DecimalPipe
• AsyncPipe
• 如何写一个日期转换管道
• 如何自定义管道
• 如何让字符串的dom元素渲染到页面上

动画

• trigger
• state
• transition
• animate
• style
• keyframes
• query
• sequence
• group
• AnimationOptions
• Web Animations API ： Angular动画基准

DOM

• Angular如何操作DOM
• Angular如何获取dom节点
• Angular中其实你不需要直接操作DOM

事件

• html事件写法
• js添加事件监听
• 如何监听变量变化
• 拖动和点击同时触发解决办法

表单表格

• 获取表单的值
• 设置表单值 FormControl setValue
• 如何禁用表单
• 如何提取table中tr为组件
• Angular 2, NgModel and Custom Form Components
• How to create custom input component with ngModel working in angular?
• never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms

安全 Security

• Angular 安全管道使用方法

变化检测

• edu-angular-change-detection : 图形化地显示变化过程
• Angular：单向数据流
• Angular Change Detection：变化检测机制
• ngular Change Detection：变化检测策略
• Angular变化检测机制：改善的脏检查
• [译] 你真的知道 Angular 单向数据流吗
• Angular DOM 更新机制
• 10 Things Every Angular Developer Should Know About Zone.js
• Understanding Zones
• Angular Elements without Zone.Js
• How Angular uses NgZone/Zone.js for Dirty Checking

配置文件

• 环境配置
• Angular热替换（cli & webpack）
• package.json里‘’^ ~“符号的意思
• tsconfig.json编译选项

摇树优化 tree shaking

• Angular性能优化：Tree Shaking
• Webpack Tree shaking 深入探究
• Build a Tree-Shaking Utility in JavaScript

兼容性

• 如何兼容IE

打包优化

• 一招让Angular-cli速度增强
• How to speed up the Angular build process
• AOT build fails due to "JavaScript heap out of memory"

第三方库集成

• augury: : Angular调试和可视化工具
• 集成富文本编辑器 tinymce
• tinymce使用方法和踩坑指南
• 国际化集成ngx-translate
• 集成echart
• 集成font-awesome
• 集成ng-zorro-antd
• 集成push.js
• 集成提示框
• 集成预览表格内容js-xlsx

代码规范

• angular项目如何做代码格式规范
• tslint规则
• TSLint 和 Codelyzer 核心规则
• Prettier
• prettier-vscode

Angualr CDK

• Angular cdk如何做一个以父元素为基准的绝对定位
• 虚拟滚动例子
• 虚拟列表的一般实现
• ConnectionPositionPair
• 拖拽
• CDK系列教程

npm 包开发

• 使用 ng-packagr开发npm包
• 打包遇到的坑
• 安装system

开发中报错解决

• No NgModule metadata found for 'AppModule'.
• No value accessor for form control with name xxx
• Can't bind to 'ngModel' since it isn't a known property of 'input'.
• No provider for ChildrenOutletContexts (injectionError)
• RangeError Maximum call stack size exceeded 最大调用堆栈大小超出
• ngIf的时候报No provider for TemplateRef!
• ngular TypeError “remove”TypeError 无法获取未定义或 null 引用的属性“remove”
• sockjs-node请求报 400
• typescript getting error TS2304 cannot find name ' require'
• 本地运行不报错但是打包到服务器报不知名错误
• 打包报错,内存不够或溢出
• 关于npm的错误
• 关于function 、lambda、not supported等
• 关于polyfills.ts、'es5-shim'、'es6-shim'
• 关于Observable、map的问题
• 关于'Http' is not assignable to parameter of type 'Http'
• 关于找不到模块
• Can't bind to 'formGroup' since it isn't a known property of 'form'
• ERROR in Error: Debug Failure. False expression.
• 关于node-sass里面 vendor 缺失
• 关于phantormjs
• 关于找不到 require或者module

单元测试 Unit Test

• 单元测试方法
• 单元测试案例

端到端测试 E2E

• Angular e2e 介绍
• E2E测试
• E2E报错
• protractor-styleguide : 编码风格指南
• protractortest 官网
• tutorial : E2E教学
• Protractor API
• introduction-to-e2e-testing-with-the-angular-cli-and-protractor：Cory Rylan写的E2E指导
• ng-pokedex: Cory Rylan写的E2E配套案例项目
• End to End(E2E) Tests in Angular Application Using Protractor
• Automate End to end (e2e) testing for Angular 7 using Protractor & Jasmine

Angular 升级

• Angular 8新增了哪些功能
• 升级angualr8项目需要做的更改
• A版本到B版本需要修改哪些
• Angular更新日志
• 弃用的 API 和特性
• ng-zorro-antd更新日志

服务端渲染

• 官网universal
• Server Side Rendering with Angular Universal

实用技巧

• hidden属性
• 获取document、window
• 包的加载速度优化
• 如何覆盖第三方库css
• 如何换个端口启动项目？
• 如何让别人可以访问自己本地启动的服务
• 项目中引入图片之类静态资源文件方法
• 在页面打印出json对象
• github上搜索angular的正确姿势
• how-to-use-angular-console
• 48-answers-on-stack-overflow-to-the-most-popular-angular-questions

好用的vscode 插件

• vscode插件

好用的工具

• 网页性能分析
• caniuse.com ： 查询兼容性
• abbreviations ： 查询单词缩写，妈妈再也不担心我写出魔鬼缩写了。
• 代码示例网站 stackblitz
• 代码示例网站 jshare
• json转换
• axure : 原型工具
• 在线加密解密

Angular及相关技术网站

Angular

• Angular 官网：中文文档 | 英文文档 | github
• Angular 脚手架：中文官网 | github
• Angular cdk：中文 | 英文
• ngrx : Angular状态管理
• 手把手教你用ngrx管理Angular状态
• Angular Console — The UI for the Angular CLI : Angular界面化操作
• bit

Typescript

• 官网
• Typescript入门教程 : 较为系统，推荐学习下

rxjs

• rxjs5 基本原理 : 中文官网 | 英文官网
• rxjs实战
• rxjs 优质翻译文章
• 官方中文文档操作符篇 : 中文 | 英文
• 学习 rxjs 操作符
• 词汇表
• 构建流式应用—RxJS详解
• 官方出品--rxjs视频教学（英）

Angular 教程

• Angular 2 之一 系统架构 : 偏基础
• angular-university
• Angular 2 Training 中文版
• Angular 4.x 修仙之路 : 质量较高的系列教程
• Angular 2.x 从0到1 : 现已成书
• limeii Angular 博客： 国内女性Angular开发者，写的内容挺好
• Angular 2入门 : 汇智网的视频教学
• angular-education : 学习资源汇总
• Angular 大師之路
• ultimatecourses.com
• appdividend.com
• medium.com : 里面很多高质量博客
• learnangularjs.net

Angular案例项目

• angular-starter ： 用webpack配置的angular项目，带有很多功能
• ng-alain :ng-zorro的维护者开源的一个后台管理系统
• ngx-admin

UI库

• ng-zorro-antd：阿里开源的 ant design风格的UI库，功能较全。
• ngx-bootstrap：angular版本bootsrap库
• Angular Material：Angular团队开源的组件库，功能不够强大，需要二次封装
• PrimeNG
• FreeNG
• angular-grid : Angular 表格
• ng-devui : 华为云DevCloud，基于Angular的企业级前端组件库

Angular 开发者大会

• 2019 ngChina 开发者大会