A Curated List of Angular Resources

Having worked with Angular since mid-2017, I have collected many resources that I have found useful. I will keep this list up to date.

Updated Oct 21, 2021 - fixed broken links.

Angular Resources

General Documentation

• Angular.io Includes good tutorials, detailed documentation, and API references along with interactive code snippets. This should be the default destination for Angular questions. Note: There are multiple versions of the “Tour of Heroes” tutorial demonstrating different concepts.
• Angular.io Resources The official and hopefully maintained list of resources from the Angular team.
• John Papa style guide The de facto style guide for Angular has been officially adopted by the Angular team and is now hosted on the official website. It is highly opinionated, but makes good cases for its suggestions. I follow most of it and do not disagree strongly with any of its suggestions.
• Netanel Basal Another skilled Angular developer with useful tutorials and deep dive articles.
• Angular University Has multiple tutorials and deep dives for all things Angular.
• inDepth.dev community Formerly Angular In Depth. Covers RxJS, NgRX and Angular in depth – has articles explaining how and why Angular is architected.
• Todd Motto A Google Developer Expert who writes detailed articles explaining Angular functionality and convention. His writing and explanation style differ sufficiently from the official documentation that it is a good supplemental resource.
• Strong Brew Technical high level articles for Angular, RxJS, and coding practices.

Essential articles

• Angular Dependency Injection Infographic A visual explanation of how Dependency Injection works (and used to work) in Angular, and the different strategies available.
• The 7-step process of Angular router navigation Helps demystify the Angular routing lifecycle.
• Angular Architecture – Smart Components vs Presentational Components This explains the thought process behind the container/presenter pattern (also referred to as smart/dumb components) very well.
• Container components with Angular
• Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error Here is an explanation of how to prevent an error that learning Angular developers run into a lot.
• How to architect epic Angular app in less than 10 minutes! Explanation of the project organization that I prefer.
• Choosing The Right File Structure for Angular in 2020 and Beyond !

Angular Best Practices

• Clean Code Checklist in Angular
• Angular Best Practices
• 2 years of Angular: lessons learned – Craftsmen

Performance

• 10 Tricks to Optimize Your Angular App – Bits and Pieces
• Angular – Lazy-loading feature modules Lazy loading splits the app into chunks that are only loaded on demand. This both reduces bundle size, and helps separate discrete features (e.g. the admin dashboard from the user dashboard).
• Reduce Change Detection Cycles with Event Coalescing in Angular
• Angular OnPush Change Detection and Component Design – Avoid Common Pitfalls
• Everything you need to know about change detection in Angular A deep dive into how Angular’s change detection works.
• The Last Guide For Angular Change Detection You’ll Ever Need – Mokkapps (Michael Hoffmann) – Freelance Angular Software Engineer This is a wonderful article that explains change detection and provides a lot of visual examples and a working sandbox to test different change detection strategies.
• Angular Change Detection Demos Code demo that goes with the above article.
• Angular ngFor – Learn All Features, Not Only For Arrays Angular’s template looping directive *ngFor has a lot of neat features, and one of them, trackBy, can help a lot with performance.

Unit Testing

• Angular University – Testing Course
• GitHub – angular-university/angular-testing-course: Angular Testing Course – A complete guide to Angular Unit Testing and E2E Testing
• Angular University – Spies
• The Complete Guide to Angular Testing and a Weird Trick for Faster Unit Tests (2019) – Christian Lüdemann
• Unit Testing Overview • Angular
• Testing with Mocks & Spies • Angular
• Angular Testing: A Developer’s Introduction — SitePoint
• Testing Angular with Jasmine and Karma (Part 1) ― Scotch.io
• Angular Unit Testing Code-Coverage Lies – ngconf – Medium
• Unit Testing in Angular: Stubs vs Spies vs Mocks
• Create a component harness for your tests with Angular CDK
• Lars Gyrup Brink Nielsen – WebDev inDepth
• angular – Can’t seem to catch error when using Jasmine toThrowError – Stack Overflow
• Simplified example to demonstrate how to Mock a FileList for unit testing purposes. · GitHub
• jasmine – Testing file upload in Angular with HttpClient. Unable to get hold of HTTP POST body – Stack Overflow

Testing Tools

• GitHub – ike18t/ng-mocks: Angular 5+ component, directive, and pipe mocking library
• Towards Better Testing In Angular. Part 1 — Mocking Child Components | by Abdul Wahab Rafehi | Medium

Error Handling

• Expecting the Unexpected — Best practices for Error handling in Angular – Angular inDepth

Security

• Angular.io Security This is the official documentation on security in Angular, best practices, and how to avoid creating vulnerabilities.
• 6 Angular Security Best Practices – Snyk
• Angular Security Best Practices – Ordina JWorks Tech Blog

RxJS

Getting Started

• Official documentation The official guide for Observables. Easier to read than the API reference on the same site.
• Angular.io Observables Angular documentation of Observables and RxJS. All examples are within Angular, and the guide explains how Angular uses RxJS beyond http calls.
• RxJS Best Practices

Understanding Higher Order Observable Operators

• Comprehensive Guide to Higher-Order RxJs Mapping Operators: switchMap, mergeMap, concatMap (and exhaustMap)
• A Super Ninja Trick To Learn RxJS’s “switchMap”, “mergeMap”, “concatMap” and “exhaustMap”, FOREVER!
• Building a safe autocomplete operator in RxJS

Pitfalls

• 3 Common Rxjs Pitfalls that you might find while building Angular Applications
• RxJS Antipatterns
• Angular pitfall: Multiple HTTP requests with RxJS and observable$ | async
• 3 Common Mistakes I see people use in Rx and the Observable Pattern

Subscriptions

• Handling Observables with NgIf and the Async Pipe
• The Ultimate Answer To The Very Common Angular Question: subscribe() vs | async Pipe

Understanding Hot and Cold Observables

• Cold vs Hot Observables
• My favorite metaphor for hot vs cold observables
• Visualizing Reactive Streams: Hot and Cold Observables
• Multicasting operators in RxJS
• Getting Started With RxJS – Part 3: Hot And Cold Observables

RxJS Error Handling

• RxJs Error Handling: Complete Practical Guide

Advanced RxJS

• Rx Book This is out of date but it is still one of the best deep dives into how ReactiveX works.
• What are schedulers in RxJS

TypeScript

Introduction

• Documentation · TypeScript Official documentation resource for TypeScript. Regularly updated.

Advanced Types

• Advanced Types · TypeScript
• When to use never and unknown in TypeScript – LogRocket Blog

Generics

• Generics · TypeScript Generics are a great way of avoiding having to use any because they enact ‘generic’ behavior on the type passed in.

All of my posts on Angular are tagged and collected here.

The post A Curated List of Angular Resources appeared first on Hapax Legomenon.

Comments

[Raj Sekhar]

Thanks. it's really helpful.

[Swastik Upadhye]

Would lyk to connect wit u on twitter