3 steps to understanding Angular

Angular is a big and complicated framework. Like any complex tool, you can’t learn it for 2 days. You have to work hard and practice for several years to begin to feel comfortable using it.

I have identified 3 main steps that let me understand Angular.

Stage 1. 🧑‍💻 NgMan Begins.

The first stage began for me when I created an Angular project the first time. It was a payment page and a result page. I generated the project with ng new and learned tutorials from the official documentation. I have supported and developed this app for one year.

Here’s what I’ve learned this year:

1. Learned to use directives, components, and modules correctly.
2. Researched a base routing configuration, including lazy routing.
3. Learned to use template-driven and reactive forms.
4. Used built-in pipes. Wrote new pipes myself.
5. Used HttpClient for messaging with a server and wrote interceptors.
6. Used base CLI features: build, serve, test, lint, new, generate
7. Learned to understand the angular.json format.
8. Used external schematic collections for code generation.
9. Learned the injector hierarchy. Used InjectionToken and providers (ClassProvider, ValueProvider, FactoryProvider). Read about resolution modifiers, but used only Optional.
10. Learned the Change Detection strategies. Optimized performance with ChangeDetectorRef
11. Read about zone.js. Learned how to run async tasks outside the Angular zone.

I think I had the right start. I learned basic Angular features and builded the app for production! I was so happy and excited. This stage prepared me well for the next one.

Stage 2. 🥷 CDK Ninja.

After application development, I started to develop a proprietary library of reusable components using @angular/cdk.

Result:

1. Created new structure directives myself.
2. Deep learned lifecycle hooks of components, directives, and services.
3. Learned ng-packagr and Angular Package Format.
4. Learned how to write schematics for code generation.
5. Wrote simple migrations.
6. Learned and used all providers.
7. Used tree-shakable providers and services.
8. Used all DI resolution modifiers, including the Host decorator.
9. Learned the inject function and its using context.
10. Learned a difference between providers and viewProviders.
11. Started learning Angular source code.

The development of the UI Kit boosted my understanding of all the processes in Angular. I was able to deep dive into the features of the framework like DI and Change Detection. The third stage opened the last part unknown to me.

Stage 3. 🅰️ Angular FrontOps

A year ago, I was invited to an interview at Tinkoff.ru. The guys painted everything so colorfully that I accepted a job offer. I started working in the platform team. It was the start of Stage 3.

Result:

1. Learn to write CLI builders and webpack plugins.
2. Started to write hard migrations. Created a high-level library for source code mutations.
3. Learned to extend and create platforms for Angular running.
4. Created a framework for microfrontends (WIP)
5. Learned to customize ng-packagr and write typescript transformers.
6. Learned Angular Universal.

This stage is not finished yet, but it showed me Angular from the other side. Usually, developers don’t customize or extend Angular CLI. They use standard platforms. But I have learned to solve problems and tasks in different ways.

Summary

I very shortly talked about the stages that I went through when learning Angular. Each stage opened many new framework features for me, but I cannot say that I know everything about it even now. And I hope this is just the beginning!