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!

Comments

[SavanaPoint]

Great content, I was an Angular Developer for 4 years in a row and I learned a lot in that time, and the advice I leave for anyone who wants to start with Angular is, to understand this powerful framework you must understand 4 things: Components, Templates, Directives and Dependency Injection. After that, you can dive deeper into Angular. There are a few concepts I could mention here, but the ones I've mentioned are enough for anyone looking to get started.

[reddgreen]

Thanks for the links and outline. Im in the 'getting started' phase, early in stage 1 now. Not sure this is the right place for a question, if not please disregard! :) In development phase, we use ng serve, which starts the webpack http server and pushes the compiled angular app to the server, so we can see what it looks like while in development process. As far as I can tell, when we run ng serve we can pass a proxy.conf.json file to the webpack server to route the calls. I have seen some comments about using proxy.conf.json in "production", but if we are in production, we won't host the control with ng serve, we'll copy the deploy directory to some production server, like e.g. Apache Tomcat. But how do we handle proxy.conf.json, since those production servers don't consume that file?

[Igor Katsuba]

Your production server must have its own proxy settings. More often than not, they are not the same as proxy.conf.json. Use proxy.conf.json only as a helper for local development.

[Angus Fungayi Chikowore]

I like how you approached the whole learning experience. I hope you don't mind if i copy your learning structure as a guide to really understanding Angular. Perhaps you may have any material you can reference for learning