Angular Developer Roadmap 2022 (Things Every Budding Angular Developer Should Know)

5 min readAug 2, 2022

Introduction

Hi readers, This is my second blog of the Roadmap Series. Here I Listed all the Angular topics to learn level by level to master Angular.

This is not the Top to End Roadmap for Angular. This is part of My First Complete Front End Development Roadmap (blog). If you did not read that blog mean please read at the below link. In that, At Level 2 we need to pick one Javascript Framework. Now we chose Angular as the first JS Framework. So we should know what are things to learn to master Angular.

Link :- https://medium.com/@venkateshb-03/front-end-roadmap-things-every-frontend-developer-should-know-for-surviving-up-to-2050-b0051f4df8c8.

Let’s learn….

Introduction to Angular

Angular (formerly called Angular JS) is a typescript-based web application framework that supports full-stack development for building all types of web applications. It helps in creating the reactive single-page application (SPA) and is completely based on the concept of components.

AngularJs is MVVM not MVC and the MVVM stands for Model-View-View Model. It is just one of many JavaScript frameworks for developing SPA, but it is widely used.

Angular doesn’t have Virtual DOM, it uses its own mechanism for Change Detection combined with Zones, which helps Angular go through the Change Detection tree from its root to its leaves. Don’t be afraid of performance: they’re both fast enough!

Roadmap

I found the above image from https://roadmap.sh/angular. There we can see all the Roadmaps for FrontEnd, BackEnd, DevOps, Full Stack, etc.

Basic to advanced things Every Angular Developer should know are

Level 1

Learn HTML, CSS, and Javascript (very Important) with all things I mentioned in the Front End Development Roadmap up to the stage of picking the Javascript Framework.(Link- https://medium.com/@venkateshb-03/front-end-roadmap-things-every-frontend-developer-should-know-for-surviving-up-to-2050-b0051f4df8c8 ).

Then, Learn Typescript and its concepts like

Structural Typing
Type Interface
Union Types
Built-in Types
Type Guards
Generics
Typescript Decorators

Level 2 (Learn Angular Basics 1 — https://angular.io /)

Angular CLI — Using that how to create an angular application and creating modules, components, services, etc.Example For Creating Component:- ng g c ComponentName or ng generate c ComponentName
Angular File Structure-Like How the components are organized in like modules, and their components, services, etc.
Templates (Data Binding)

Interpolation
Property Binding
Event Binding
#ref variables

3. Two-way Data Binding.

4. Directives

Component Directives- 1.sample-page.component.css: contains all the CSS styles for the component.| 2.sample-page.component.html: contains all the HTML code used by the component to display itself.| 3.sample-page.component.ts: contains all the code used by the component to control its behavior.
Structural Directives- *ngFor ,*ngIf,*ngSwitch,etc (Rendering Topics)
Attribute Directives- like [ngClass],[ngStyle] ,etc

5. Forms- Reactive Forms and Template Driven Form, Inputs, and Validation

6. Services, Dependency Injection.

Types of token and How to implement it:

Type Token
String Token
Injection Token

Four ways can be used to create the dependency:

useClass : Class Provider
useValue: Value Provider
useFactory: Factory Provider
useExisting: Class as Alias Provider

7.HTTP Client and Interceptor.

8. Lifecycle Hooks

9. Routing & Guards

10. Pipes

Level 3 (Learn RxJS and state management libraries)

RxJS Basics(https://rxjs.dev/guide/overview)
Learn the Difference Between RxJS and Promise and Pull Method Vs Push Method.
Observable Pattern
Observable Lifecycle -Creation, Subscription, Execution, and Destruction
Marbles Diagram (https://rxmarbles.com/)
Operators- And Play with RxJS Operator https://www.rxjs-fruits.com/distinct
Observable & Operator and Subject - types like BehaviouralSubject, AsyncSubject, and ReplaySubject and the difference between Observable and SubJect.

State Management

State management by creating service with Singleton with the help of @injectable {providIn: ”root”}.
NgrRx — NgRx Store provides reactive state management for Angular apps inspired by Redux. Unify the events in your application and derive the state using RxJS.
NGXS —NGXS is a state management pattern and library for Angular. NGXS acts as a single source of truth for your application's state - providing simple rules for predictable state mutations. NGXS is modeled after the CQRS pattern - a pattern implemented in state management libraries such as NgRx and Redux.

Level 4 (Angular advance topics)

Creating Custom Directives
Creating Custom Pipes
Modules and Lazy Loading
Dependency Injection and Zones
Create Custom Decorators
Learn Angular Dev Tools and RxJS Watcher(Chrome Extenstion is available)
Change Detection Strategy- OnPush & Default
View Encapsulation

ViewEncapsulation.None
ViewEncapsulation.Emulated
ViewEncapsulation.ShadowDOM

9. Server Side Rendering using Angular Universal.

10. Just-in-Time (JiT) and Ahead-of-Time (AoT) compilation their difference.

Level 5 (Testing Angular App)

Testing Pipes
Services with Deps
Component Bindings
Testing Directives
Testing Component Templates

Types of testing and their libraries need to learn

Unit Testing- Jasmine, Karma, Jest
End-to-End Testing- Protractor, Cypress
Integration Testing- Karma

Tips

Study Plan- Create a Calculator APP, Do some CRUD APP like TODO APP with locally storing the data and updating Data using Reactive Form. Do some CRUD APP with API Integration(use Public APIs for that) using HTTP Client and RxJS and State Management libraries like NgRx. And Implement Interceptor, Guards, Custom Directive, and Custom Pipes in it. And start Testing the APP. And do some APP Clone with Angular and apply all the things you learned.

Conclusion

I hope this blog is very useful for beginners and fresher who are working or training as Angular developers or Front-End Developer or Full Stack Developer. Thanks for reading. Have a good day ✌️.

Don’t worry this is just the RoadMap, I will write the blog for all the topics and concepts which are present in the above Image.

If you think something is missing, have questions, or would like to give feedback, go ahead and leave a comment below. I’d appreciate the feedback.

🚀My Roadmap Blog Series

Full Front End Development Roadmap🚀- https://medium.com/@venkateshb-03/front-end-roadmap-things-every-frontend-developer-should-know-for-surviving-up-to-2050-b0051f4df8c8.

1a. Javascript Roadmap- Comming Soon

1b. Angular Developer Roadmap- **

1c. React Developer Roadmap🚀- https://medium.com/@venkateshb-03/react-developer-roadmap-2022-81750df3d3be

1d. VueJS Developer Roadmap- https://medium.com/@venkateshb-03/vuejs-developer-roadmap-things-every-budding-vuejs-developer-should-know-fc5a0f9c7d55

Please Share your feedbacks and topics on Command .Based on that I will enhance my Blog.
Thanks for reading….Stay tune Bye…