Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/deepthan/blog-angular

Angular 笔记
https://github.com/deepthan/blog-angular
angular-cli angular2 angular8 blog rxjs typescript
Last synced: 6 days ago
JSON representation
Angular 笔记
Host: GitHub
URL: https://github.com/deepthan/blog-angular
Owner: deepthan
Created: 2017-11-07T08:12:08.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2022-12-09T00:00:29.000Z (almost 2 years ago)
Last Synced: 2024-09-19T12:07:18.515Z (14 days ago)
Topics: angular-cli, angular2, angular8, blog, rxjs, typescript
Language: SCSS
Homepage:
Size: 10.1 MB
Stars: 280
Watchers: 11
Forks: 58
Open Issues: 158
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

README

        

##### 目前版本:

![version](https://img.shields.io/npm/v/@angular/core.svg?maxAge=2592000)

Angular回忆录

 ===========================

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

 

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

|Author|deepthan|

|---|---

|E-mail|[email protected]

### 概念理解

- [Angular必知八大概念](https://github.com/deepthan/blog-angular/issues/48)

- [angularjs与angular概念区分](https://github.com/deepthan/blog-angular/issues/1)

- [白话Angular词汇](https://github.com/deepthan/blog-angular/issues/7)

- [AOT 编译介绍](https://github.com/deepthan/blog-angular/issues/8)

### 脚手架 Angular cli 

- [cli 用法](https://github.com/deepthan/blog-angular/issues/49)

- [proxy 配置](https://github.com/deepthan/blog-angular/issues/50)

### 装饰器@

- [class装饰器](https://github.com/deepthan/blog-angular/issues/51)

- [viewChild](https://github.com/deepthan/blog-angular/issues/52)

### 路由 router

- [RouterLink](https://github.com/deepthan/blog-angular/issues/53)

- [navigateByUrl vs navigate](https://github.com/deepthan/blog-angular/issues/54)

- [routerLink和routerLinkActive动态传参](https://github.com/deepthan/blog-angular/issues/46)

- [Routes介绍](https://github.com/deepthan/blog-angular/issues/55)

- [路由高亮--长明灯RouterLinkActive](https://github.com/deepthan/blog-angular/issues/56)

- [路由守卫，拦截懒加载，拦截预加载，离开验证](https://github.com/deepthan/blog-angular/issues/57)

- [预加载](https://github.com/deepthan/blog-angular/issues/4)

- [Angular2+去除url中的#](https://github.com/deepthan/blog-angular/issues/5)

- [获取当前路由](https://github.com/deepthan/blog-angular/issues/58)

### 组件 Component

- [组件的生命周期](https://github.com/deepthan/blog-angular/issues/59)

- [组件间通信](https://github.com/deepthan/blog-angular/issues/60)

- [动态组件](https://github.com/deepthan/blog-angular/issues/61)

- [angular如何主动销毁组件](https://github.com/deepthan/blog-angular/issues/62)

- [组件监听传过来值变化的若干姿势](https://github.com/deepthan/blog-angular/issues/63)

- [如何将字符串的html渲染到dom元素中](https://github.com/deepthan/blog-angular/issues/64)

- [Angular 2+模板语法](https://github.com/kittencup/angular2-ama-cn/issues/64)

- [如何重新渲染组件](https://stackoverflow.com/a/35106069/10394361)

### 指令 Directive

- [ngIf](https://github.com/deepthan/blog-angular/issues/66)

- [ngFor](https://github.com/deepthan/blog-angular/issues/67)

- [ngSwitch](ngSwitch)

- [ngClass](https://github.com/deepthan/blog-angular/issues/69)

- [ngStyle](https://github.com/deepthan/blog-angular/issues/70)

- [ng-template](https://github.com/deepthan/blog-angular/issues/71)

- [ng-content](https://github.com/deepthan/blog-angular/issues/72)

- [ng-container vs ngTemplateOutlet](https://github.com/deepthan/blog-angular/issues/73)

- [NgTemplateOutlet](https://github.com/deepthan/blog-angular/issues/74)

- [Angular如何自定义指令](https://github.com/deepthan/blog-angular/issues/75)

- [如何根据条件决定是否添加指令](https://github.com/deepthan/blog-angular/issues/76)

- [一个文件中同一段html被多次用到怎么抽离](https://github.com/deepthan/blog-angular/issues/77)

- [ngPreserveWhitespaces和NgNonBindable](http://www.ngbeijing.cn/2018/08/27/2018-8-27-ngPreserveWhitespaces-NgNonbindable/)

### 管道 Pipe

- [DecimalPipe](https://github.com/deepthan/blog-angular/issues/80)

- [AsyncPipe](https://github.com/deepthan/blog-angular/issues/81)

- [如何写一个日期转换管道](https://github.com/deepthan/blog-angular/issues/82)

- [如何自定义管道](https://github.com/deepthan/blog-angular/issues/83)

- [如何让字符串的dom元素渲染到页面上](https://github.com/deepthan/blog-angular/issues/84)

### 动画

- [trigger](https://github.com/deepthan/blog-angular/issues/18)

- [state](https://github.com/deepthan/blog-angular/issues/19)

- [transition](https://github.com/deepthan/blog-angular/issues/20)

- [animate](https://github.com/deepthan/blog-angular/issues/21)

- [style](https://github.com/deepthan/blog-angular/issues/22)

- [keyframes](https://github.com/deepthan/blog-angular/issues/23)

- [query](https://github.com/deepthan/blog-angular/issues/24)

- [sequence](https://github.com/deepthan/blog-angular/issues/25)

- [group](https://github.com/deepthan/blog-angular/issues/27)

- [AnimationOptions](https://github.com/deepthan/blog-angular/issues/28)

- [Web Animations API](https://drafts.csswg.org/web-animations/) ： Angular动画基准

### DOM

- [Angular如何操作DOM](https://github.com/deepthan/blog-angular/issues/9)

- [Angular如何获取dom节点](https://github.com/deepthan/blog-angular/issues/85)

- [Angular中其实你不需要直接操作DOM](https://github.com/deepthan/blog-angular/issues/17)

### 事件

- [html事件写法](https://github.com/deepthan/blog-angular/issues/89)

- [js添加事件监听](https://github.com/deepthan/blog-angular/issues/90)

- [如何监听变量变化](https://github.com/deepthan/blog-angular/issues/91)

- [拖动和点击同时触发解决办法](https://github.com/deepthan/blog-angular/issues/92)

### 表单表格

- [获取表单的值](https://github.com/deepthan/blog-angular/issues/93)

- [设置表单值 FormControl setValue](https://github.com/deepthan/blog-angular/issues/94)

- [如何禁用表单](https://github.com/deepthan/blog-angular/issues/95)

- [如何提取table中tr为组件](https://github.com/deepthan/blog-angular/issues/96)

- [Angular 2, NgModel and Custom Form Components](https://rangle.io/blog/angular-2-ngmodel-and-custom-form-components/)

- [How to create custom input component with ngModel working in angular?](https://stackoverflow.com/questions/50618050/how-to-create-custom-input-component-with-ngmodel-working-in-angular-6)

- [never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms](https://indepth.dev/never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms/)

### 安全 Security 

- [Angular 安全管道使用方法](https://github.com/deepthan/blog-angular/issues/97)

### 变化检测

- [edu-angular-change-detection](https://danielwiehl.github.io/edu-angular-change-detection/) : 图形化地显示变化过程

- [Angular：单向数据流](https://limeii.github.io/2019/06/angular-unidirectional-data-flow/)

- [Angular Change Detection：变化检测机制](https://limeii.github.io/2019/06/angular-changedetection/)

- [ngular Change Detection：变化检测策略](https://limeii.github.io/2019/06/angular-changeDetectionStrategy-OnPush/)

- [Angular变化检测机制：改善的脏检查](https://wufenfen.github.io/2017/07/15/Angular%E5%8F%98%E5%8C%96%E6%A3%80%E6%B5%8B%E6%9C%BA%E5%88%B6%EF%BC%9A%E6%94%B9%E5%96%84%E7%9A%84%E8%84%8F%E6%A3%80%E6%9F%A5/)

- [[译] 你真的知道 Angular 单向数据流吗](https://segmentfault.com/a/1190000013965691)

- [Angular DOM 更新机制](https://zhuanlan.zhihu.com/p/96640047)

- [10 Things Every Angular Developer Should Know About Zone.js](https://medium.com/better-programming/zone-js-for-angular-devs-573d89bbb890)

- [Understanding Zones](https://blog.thoughtram.io/angular/2016/01/22/understanding-zones.html)

- [Angular Elements without Zone.Js](https://www.angulararchitects.io/aktuelles/angular-elements-part-iii/)

- [How Angular uses NgZone/Zone.js for Dirty Checking](https://blog.bitsrc.io/how-angular-uses-ngzone-zone-js-for-dirty-checking-faa12f98cd49)

### 配置文件

- [环境配置](https://github.com/deepthan/blog-angular/issues/2)

- [Angular热替换（cli & webpack）](https://github.com/deepthan/blog-angular/issues/43)

- [package.json里‘’^ ~“符号的意思](https://github.com/deepthan/blog-angular/issues/29)

- [tsconfig.json编译选项](https://github.com/deepthan/blog-angular/issues/98)

### 摇树优化 tree shaking

- [Angular性能优化：Tree Shaking](https://limeii.github.io/2019/08/angular-tree-shaking/)

- [Webpack Tree shaking 深入探究](https://juejin.im/post/5bb8ef58f265da0a972e3434)

- [Build a Tree-Shaking Utility in JavaScript](https://blog.bitsrc.io/build-a-tree-shaking-utility-in-javascript-c6b13e469121)

### 兼容性

- [如何兼容IE](https://github.com/jiayisheji/blog/issues/22)

### 打包优化

- [一招让Angular-cli速度增强](https://github.com/jiayisheji/blog/issues/22)

- [How to speed up the Angular build process](https://stackoverflow.com/a/45245580/10394361)

- [AOT build fails due to "JavaScript heap out of memory"](https://github.com/angular/angular-cli/issues/5618#issuecomment-431653364)

### 第三方库集成

- [augury: ](https://github.com/deepthan/blog-angular/issues/99): Angular调试和可视化工具

- [集成富文本编辑器 tinymce](https://github.com/deepthan/blog-angular/issues/100)

- [tinymce使用方法和踩坑指南](https://github.com/deepthan/blog-angular/issues/101)

- [国际化集成ngx-translate](https://github.com/deepthan/blog-angular/issues/102)

- [集成echart](https://github.com/deepthan/blog-angular/issues/103)

- [集成font-awesome](https://github.com/deepthan/blog-angular/issues/104)

- [集成ng-zorro-antd](https://github.com/deepthan/blog-angular/issues/105)

- [集成push.js](https://github.com/deepthan/blog-angular/issues/106)

- [集成提示框](https://github.com/deepthan/blog-angular/issues/107)

- [集成预览表格内容js-xlsx](https://github.com/deepthan/blog-angular/issues/108)

### 代码规范

- [angular项目如何做代码格式规范](https://github.com/deepthan/blog-angular/issues/113)

- [tslint规则](https://github.com/deepthan/blog-angular/issues/110)

- [TSLint 和 Codelyzer 核心规则](https://github.com/deepthan/blog-angular/issues/109)

- [Prettier](https://github.com/deepthan/blog-angular/issues/111)

- [prettier-vscode](https://github.com/deepthan/blog-angular/issues/112)

### Angualr CDK

- [Angular cdk如何做一个以父元素为基准的绝对定位](https://github.com/deepthan/blog-angular/issues/114)

- [虚拟滚动例子](https://github.com/deepthan/blog-angular/issues/115)

- [虚拟列表的一般实现](https://github.com/deepthan/blog-angular/issues/116)

- [ConnectionPositionPair](https://github.com/deepthan/blog-angular/issues/117)

- [拖拽](https://material.angular.io/cdk/drag-drop/examples)

- [CDK系列教程](https://www.jianshu.com/p/4885b1a4c0c9)

### npm 包开发

- [使用 ng-packagr开发npm包](https://github.com/ng-packagr/ng-packagr)

- [打包遇到的坑](https://github.com/deepthan/blog-angular/issues/121)

- [安装system](https://github.com/deepthan/blog-angular/issues/122)

### 开发中报错解决

- [ No NgModule metadata found for 'AppModule'.](https://github.com/deepthan/blog-angular/issues/123)

- [ No value accessor for form control with name xxx](https://github.com/deepthan/blog-angular/issues/124)

- [Can't bind to 'ngModel' since it isn't a known property of 'input'.](https://github.com/deepthan/blog-angular/issues/125)

- [No provider for ChildrenOutletContexts (injectionError)](https://github.com/deepthan/blog-angular/issues/126)

- [RangeError Maximum call stack size exceeded 最大调用堆栈大小超出](https://github.com/deepthan/blog-angular/issues/127)

- [ngIf的时候报No provider for TemplateRef!](https://github.com/deepthan/blog-angular/issues/128)

- [ngular TypeError “remove”TypeError 无法获取未定义或 null 引用的属性“remove”](https://github.com/deepthan/blog-angular/issues/129)

- [sockjs-node请求报 400](https://github.com/deepthan/blog-angular/issues/130)

- [typescript getting error TS2304 cannot find name ' require'](https://github.com/deepthan/blog-angular/issues/131)

- [本地运行不报错但是打包到服务器报不知名错误](https://github.com/deepthan/blog-angular/issues/132)

- [打包报错,内存不够或溢出](https://github.com/deepthan/blog-angular/issues/133)

- [关于npm的错误](https://github.com/deepthan/blog-angular/issues/134)

- [关于function 、lambda、not supported等](https://github.com/deepthan/blog-angular/issues/30)

- [关于polyfills.ts、'es5-shim'、'es6-shim'](https://github.com/deepthan/blog-angular/issues/31)

- [关于Observable、map的问题](https://github.com/deepthan/blog-angular/issues/32)

- [关于'Http' is not assignable to parameter of type 'Http' ](https://github.com/deepthan/blog-angular/issues/33)

- [关于找不到模块](https://github.com/deepthan/blog-angular/issues/34)

- [Can't bind to 'formGroup' since it isn't a known property of 'form'](https://github.com/deepthan/blog-angular/issues/35)

- [ERROR in Error: Debug Failure. False expression.](https://github.com/deepthan/blog-angular/issues/36)

- [关于node-sass里面 vendor 缺失](https://github.com/deepthan/blog-angular/issues/38)

- [关于phantormjs](https://github.com/deepthan/blog-angular/issues/39)

- [关于找不到 require或者module](https://github.com/deepthan/blog-angular/issues/40)

### 单元测试 Unit Test

- [单元测试方法](https://github.com/deepthan/blog-angular/issues/142)

- [单元测试案例](https://github.com/deepthan/blog-angular/issues/143)

###  端到端测试 E2E

- [Angular e2e 介绍](https://github.com/deepthan/blog-angular/issues/144)

- [E2E测试](https://github.com/deepthan/blog-angular/issues/145)

- [E2E报错](https://github.com/deepthan/blog-angular/issues/146)

- [protractor-styleguide](https://github.com/CarmenPopoviciu/protractor-styleguide) : 编码风格指南

- [protractortest 官网](http://www.protractortest.org/#/)

- [tutorial](http://www.protractortest.org/#/tutorial) : E2E教学

- [Protractor API ](http://www.protractortest.org/#/api?view=webdriver.By.className)

- [introduction-to-e2e-testing-with-the-angular-cli-and-protractor](https://coryrylan.com/blog/introduction-to-e2e-testing-with-the-angular-cli-and-protractor)：Cory Rylan写的E2E指导

- [ng-pokedex](https://github.com/coryrylan/ng-pokedex): Cory Rylan写的E2E配套案例项目

- [End to End(E2E) Tests in Angular Application Using Protractor](https://medium.com/medialesson/end-to-end-e2e-tests-in-angular-application-using-protractor-3fd2501bb3c0)

- [Automate End to end (e2e) testing for Angular 7 using Protractor & Jasmine](https://medium.com/@dhormale/automate-end-to-end-e2e-testing-for-angular-7-using-protractor-jasmine-4ce171aaeedc)

### Angular 升级

- [Angular 8新增了哪些功能](https://github.com/deepthan/blog-angular/issues/147)

- [升级angualr8项目需要做的更改](https://github.com/deepthan/blog-angular/issues/148)

- [A版本到B版本需要修改哪些](https://angular-update-guide.firebaseapp.com/)

- [Angular更新日志](https://github.com/angular/angular/blob/master/CHANGELOG.md)

- [弃用的 API 和特性](https://angular.cn/guide/deprecations)

- [ng-zorro-antd更新日志](https://ng.ant.design/docs/changelog/zh)

### 服务端渲染

- [官网universal](https://angular.cn/guide/universal)

- [Server Side Rendering with Angular Universal](https://www.digitalocean.com/community/tutorials/angular-angular-universal)

### 实用技巧

- [hidden属性](https://github.com/deepthan/blog-angular/issues/149)

- [获取document、window](https://github.com/deepthan/blog-angular/issues/150)

- [包的加载速度优化](https://github.com/deepthan/blog-angular/issues/151)

- [如何覆盖第三方库css](https://github.com/deepthan/blog-angular/issues/152)

- [如何换个端口启动项目？](https://github.com/deepthan/blog-angular/issues/153)

- [如何让别人可以访问自己本地启动的服务](https://github.com/deepthan/blog-angular/issues/154)

- [项目中引入图片之类静态资源文件方法](https://github.com/deepthan/blog-angular/issues/155)

- [在页面打印出json对象](https://github.com/deepthan/blog-angular/issues/156)

- [github上搜索angular的正确姿势](https://github.com/search?utf8=%E2%9C%93&q=topic:angular&type=Repositories&ref=searchresults)

- [how-to-use-angular-console](https://auth0.com/blog/how-to-use-angular-console/)

- [48-answers-on-stack-overflow-to-the-most-popular-angular-questions](https://www.freecodecamp.org/news/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0/)

### 好用的vscode 插件

- [vscode插件](https://github.com/deepthan/blog-angular/issues/47)

### 好用的工具

- [网页性能分析](https://sq.163yun.com/blog/article/188103475918028800)

- [caniuse.com](https://caniuse.com/#feat=css-transitions) ： 查询兼容性

- [abbreviations](https://www.abbreviations.com/abbreviation/emergency) ： 查询单词缩写，妈妈再也不担心我写出魔鬼缩写了。

- [代码示例网站 stackblitz](https://stackblitz.com/edit/ngx-validate?file=src%2Fapp%2Fcomponents%2Fapp.component.html)

- [代码示例网站 jshare](https://jshare.com.cn/hcharts.cn/epC8wG)

- [json转换](https://www.json.cn/#)

- [axure](https://www.axure.com/) : 原型工具

- [在线加密解密](https://tool.oschina.net/encrypt?type=3)

## Angular及相关技术网站

### Angular

- Angular 官网：[中文文档](https://www.angular.cn/)  | [英文文档](https://angular.io/) | [github](https://github.com/angular/angular)

- Angular 脚手架：[中文官网](https://angular.cn/cli) | [github](https://github.com/angular/angular-cli)

- Angular cdk：[中文](https://material.angular.cn/cdk/categories) | [英文](https://material.angular.cn/cdk/drag-drop/overview) 

- [ngrx](https://ngrx.io/) : Angular状态管理

- [手把手教你用ngrx管理Angular状态](https://github.com/fezaoduke/TranslationInstitute/blob/master/%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E7%94%A8ngrx%E7%AE%A1%E7%90%86Angular%E7%8A%B6%E6%80%81.md)

- [Angular Console — The UI for the Angular CLI](https://blog.nrwl.io/angular-console-the-ui-for-the-angular-cli-a5d0924240b7) : Angular界面化操作

- [bit](https://github.com/teambit/bit)

### Typescript

- [官网](https://www.typescriptlang.org/index.html)

- [Typescript入门教程](https://ts.xcatliu.com/advanced/tuple) : 较为系统，推荐学习下

### rxjs

- rxjs5 基本原理 : [中文官网](https://rxjs-cn.github.io/rxjs5-ultimate-cn) | [英文官网](https://www.gitbook.com/book/chrisnoring/rxjs-5-ultimate/details)

- [rxjs实战](https://github.com/lizhonghui/blog/issues/6)

- [rxjs 优质翻译文章](https://github.com/RxJS-CN/rxjs-articles-translation)

- 官方中文文档操作符篇 : [中文](http://cn.rx.js.org/class/es6/Observable.js~Observable.html) | [英文](http://reactivex.io/rxjs/)

- [学习 rxjs 操作符](https://rxjs-cn.github.io/learn-rxjs-operators/)

- [词汇表](https://github.com/RxJS-CN/RxJS-Docs-CN/wiki/RxJS-%E8%AF%8D%E6%B1%87%E8%A1%A8)

- [构建流式应用—RxJS详解](http://www.alloyteam.com/2016/12/learn-rxjs/)

- [官方出品--rxjs视频教学（英）](https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises)

### Angular 教程

- [ Angular 2 之一 系统架构](http://www.angularjs.cn/A2uA) : 偏基础 

- [angular-university](https://angular-university.io/home)

- [Angular 2 Training 中文版](https://zhangchen915.gitbooks.io/angular2-training/content/content/vs_react.html)

- [Angular 4.x 修仙之路](https://segmentfault.com/a/1190000008754631?t=1232145435) : 质量较高的系列教程

-  [Angular 2.x 从0到1](https://github.com/wpcfan/awesome-tutorials/blob/master/angular2/ng2-tut/README.md) : 现已成书

- [limeii Angular 博客](https://limeii.github.io/#blog)： 国内女性Angular开发者，写的内容挺好

-  [Angular 2入门](http://www.hubwiz.com/course/5599d367a164dd0d75929c76/) : 汇智网的视频教学

-  [angular-education](https://github.com/timjacobi/angular-education) : 学习资源汇总

- [Angular 大師之路](https://ithelp.ithome.com.tw/users/20020617/ironman/1630)

- [ultimatecourses.com](https://ultimatecourses.com/blog/category/angular/)

- [appdividend.com](https://appdividend.com/category/angular/)

- [medium.com](https://medium.com/search?q=angular) : 里面很多高质量博客

- [learnangularjs.net](http://www.learnangularjs.net/)

### Angular案例项目

-  [angular-starter](https://github.com/gdi2290/angular-starter) ： 用webpack配置的angular项目，带有很多功能

-  [ng-alain](https://github.com/cipchk/ng-alain) :ng-zorro的维护者开源的一个后台管理系统

-  [ngx-admin](https://github.com/akveo/ngx-admin)

### UI库

-  [ng-zorro-antd]()：阿里开源的 ant design风格的UI库，功能较全。

-  [ngx-bootstrap](https://github.com/valor-software/ngx-bootstrap)：angular版本bootsrap库

-  [Angular Material](https://material.angular.io/components/categories)：Angular团队开源的组件库，功能不够强大，需要二次封装

-  [PrimeNG](https://www.primefaces.org/primeng/#/)

-  [FreeNG](https://github.com/valor-software/ngx-bootstrap) 

- [angular-grid](https://angular-grid.ag-grid.com/?utm_source=medium&utm_medium=blog&utm_campaign=angularcustom) : Angular 表格

- [ng-devui](https://github.com/DevCloudFE/ng-devui) : 华为云DevCloud，基于Angular的企业级前端组件库

### Angular 开发者大会

- [2019 ngChina 开发者大会](https://ng-china.org/)