Angular is a TypeScript-based free and open-source web application framework. It is a platform and framework for building single-page client applications using HTML and TypeScript. This roadmap would help you as a developer to get started on learning about Angular.
To make your journey easier, pick a path
What is Typescript
Mark as done
Done
What is Typescript
TypeScript is a superset of JavaScript that adds optional static typing to the language. It is designed for the development of large applications and trans compiles to JavaScript. Learn more about this from the resources below.
What is Typescript?
TypeScript Tutorial
Understanding The Origin of Typescript
Why Use Typescript
Mark as done
Done
Why Use Typescript
TypeScript is compiled to JavaScript, which means as a superset of the latter, it can be used anywhere JavaScript could be used: both the frontend and the backend. Learn more about this from the resources below.
Why Should You Use Typescript?
Why You Should Choose Typescript over JavaScript optional
Modules
Mark as done
Done
Modules
In TypeScript, a module is a file containing values, functions, or classes. Learn more about this from the resources below.
Typescript Tutorial: Modules
Typescript Modules
Full Tutorial on Typescript Module
Union Types
Mark as done
Done
Union Types
In TypeScript, union types are variables that can store a value that can be one of the several types. Learn more about this from the resources below.
Union Types and Type Aliases in Typescript
Union Types
Union Type in Typescript Tutorial
Union Types Cheatsheet
Handbook - Union and Intersection Types optional
Classes
Mark as done
Done
Classes
Typescript supports object-oriented programming features like classes. Classes are a blueprint for creating objects in OOP. Learn more about this from the resources below.
Typescript Tutorial - Classes
How to use Classes in Typescript
Typescript Classes
Built-in Data Types
Mark as done
Done
Built-in Data Types
In this section, you will learn more about the built-in data types in Typescript and their functions. See the resources below.
Typescript Types
Learn Typescript Data Types
Types - Angular optional
Structural Typing
Mark as done
Done
Structural Typing
Structural typing does not care about the type name of an object but checks whether the object’s structure agrees with the pattern restrained by type definition. Learn more about this from the resources below.
Structural Typing in Typescript
Structural Typing Tutorial
Structural Typing in Typescript - How It Works
Interface
Mark as done
Done
Interface
An interface in TypeScript is an abstract type that tells the compiler which property names a given object can have. Learn more about this from the resources below.
A simple guide to Typescript interface: Declarations and Uses
How to use Interface in Typescript
Typescript Handbook: Interface
Typescript Tutorial: Interfaces optional
Type Inference
Mark as done
Done
Type Inference
Type inference describes where and how TypeScript infers types when you don’t explicitly annotate them. Learn more about this from the resources below.
Type Inference in Typescript
Understanding Infer in Typescript
Type Assignment and Type Inference optional
Type Guards
Mark as done
Done
Type Guards
In TypeScript, Type guards is a technique used to get information about the type of a variable and this often happens within a conditional block like if/else. Learn more about this from the resources below.
Typescript Type Guard
Narrowing Variable Types with Type Guard
Type Guards in Typescript
RxJS Subjects
Mark as done
Done
RxJS Subjects
An RxJS Subject is a special type of Observable that allows values to be multi-casted to many Observers. Learn more about this from the resources below.
What is RxJS Subject
RxJS - Working with Subjects
Learn RxJS - Subjects Tutorial
How to use RxJS Subjects, Behavior Subjects, and Replay Subjects optional
Observer Pattern
Mark as done
Done
Observer Pattern
Observer pattern can be described as the process when an object maintains a list of its dependents and automatically notifies them of any state changes by calling one of their functions. Learn more about this from the resources below.
Understanding Observer Software Pattern
Reactive Programming: Observer Pattern
Building your own Observable: The Observer Pattern
Observable Lifecycle
Mark as done
Done
Observable Lifecycle
An Observable Life Cycle represents the number stages that every observable instance passes throughout its lifetime. Learn more about this from the resources below.
Understanding RxJS Observable Lifecycle
Observable and RxJS Examples
A Simple Explanation: What is RxJS Observable?
Marble Diagrams
Mark as done
Done
Marble Diagrams
Marble Diagrams is a timeline where you can illustrate the state of your observable during its execution. Learn more about this from the resources below.
RxJS Marble Diagrams
How to read RxJS Marble Diagrams
Use Marble Diagrams to Understand RxJS Operators
Operators
Mark as done
Done
Operators
In RxJs, an operator is a pure function that takes an observable as input and the output is also an observable. Learn more about this from the resources below.
RxJS Operators
RxJS Operators Tutorial
Learn RxJS - Operators
Observables vs Promises
Mark as done
Done
Observables vs Promises
In this section, you will learn about the differences between “Observables” and “Promises” in RxJs. See the resources below.
RxJS vs Promises
The Ultimate Guide to Observables vs Promises
Promises vs Observables - Angular Tutorial
Angularjs vs Angular
Mark as done
Done
Angularjs vs Angular
In this section, you will learn about the difference between AngularJs and Angular. See the resources below.
What is the difference between AngularJS and Angular
Important Difference between Angular and Angular JS in 2022
Directives
Mark as done
Done
Directives
Directives are classes that add additional behavior to elements in your Angular applications. Learn more about this from the resources and find some specific directive tools in the subsection below.
What is Angular Directives?
Angular Directives Tutorial
Directives in Angular Applications
ngClass
Angular - NgClass
Angular NgClass Example
How to style component using NgClass
Angular NgClass Directive
ngStyle
Angular - NgStyle
Using NgStyle in Angular for Dynamic Styling
ngFor
Angular - NgFor
NgFor Directive in Angular
ngIf
Angular - NgIf
Angular ngIf: Complete Guide
Angular NgFor and NgIf Directives Explained
How to use NgIf Else in your Angular Application
Pipes
Pipes - Angular
Angular Pipes: Learn How to Create and Implement
Angular Pipe Tutorial
Http Client
Mark as done
Done
Http Client
HttpClient is a built-in service class available in Angular. Learn more about this from the resources below.
Angular Http Client: Quick Start
How to use HttpClient in Angular
Angular Http Client Quick Start Tutorial
Services
Mark as done
Done
Services
In Angular, services let you define code or functionalities that are accessible and reusable in many other components in your Angular project. Learn more about this from the resources below.
What is a Service in Angular and why you should use it
Introduction to Angular Services and Its Features
Understanding the Purpose of Services in Angular
Routing
Mark as done
Done
Routing
Routing in Angular is the process of navigating from one view to another as users perform tasks in web apps. Learn more about this from the resources below.
Angular Routing
A Complete Guide to Angular Routing
Routing and Navigation in Angular
Understanding the Purpose of Routing in Angular
Guards
Mark as done
Done
Guards
In Angular, Guards are interfaces which can tell the router whether or not it should allow navigation to a requested route. Learn more about this from the resources below.
Understanding Angular Guards
Angular Guards Tutorial
How to use Route Guards with Routers in Angular optional
Templates
Mark as done
Done
Templates
A template is a form of HTML that tells Angular how to render the component. Learn more about this from the resources below.
Angular Template Tutorial
Angular Templates and Views optional
Interpolation
Interpolation in Angular
Interpolation and Template Expressions
Property Binding
Angular Property Binding
Property Binding in Angular
Event Binding
How Event Binding Works
Event Binding in Angular
#ref variables
Angular Template Reference Variables
In Depth look at Angular Template Reference Variables
Architectural Overview
Mark as done
Done
Architectural Overview
Learn about the Architectural overview of Angular using the resources below.
Forms are used to handle user input data in Angular. Learn more about this from the resources below
Introduction to Forms in Angular
Angular Forms Guide: Template Driven and Reactive Forms
Angular Forms Tutorial
Lifecycle Hooks
Mark as done
Done
Lifecycle Hooks
Lifecycle Hooks are a special functionality in Angular. Learn more about this from the resources below.
Angular Lifecycle Hooks Explained
Lifecycle Hooks in Angular Explained with Examples
Complete Guide: Lifecycle Hooks
Understanding Angular Lifecycle Hooks optional
NGRX
Mark as done
Done
NGRX
NgRx is a framework and a state management system for building reactive applications in Angular. Learn more about this from the resources below.
Introduction to Angular NGRX State Management
Angular State Management with NgRx
Angular NgRx Store Tutorial
Ngrx Store Tutorial for Angular optional
NGXS
Mark as done
Done
NGXS
NGXS is a state management pattern + library for Angular. It is similar to NGRX. Learn more about this from the resources below.
Angular NGXS Tutorial
NGXS - Angular State Management
State Management in Angular with NGXS
NGXS Examples: A Complete Guide optional
Custom Directives and Pipes
Mark as done
Done
Custom Directives and Pipes
Custom Directives can be simply described as a component without a template. Pipes are simply functions to use in template expressions to accept an input value and return a transformed value. Learn more about these concepts from the resources below.
How to use and create custom directives
Step-by-step Custom Pipes in Angular
Creating Custom Pipes in Angular
How to Create Custom Pipes in Angular
Reactive Forms
Mark as done
Done
Reactive Forms
Reactive forms are a type of form in Angular. It uses explicit and immutable approaches to managing the state of a form at a given point in time. Learn more about this concept from the resources below.
Angular Reactive Forms
How to use Reactive Forms in Angular
Angular Reactive Forms Example
How to Validate Angular Reactive Forms
Dependency Injection
Mark as done
Done
Dependency Injection
Dependency injection is a design pattern in which a class requests dependencies from external sources rather than creating them. Learn more about this concept from the resources below.
A Complete Guide to Angular Dependency Injection
Angular Dependency Injection, Explained with Examples
Introduction to Angular Dependency Injection optional
How Dependency Injection Works in Angular
Module Lazy Loading
Mark as done
Done
Module Lazy Loading
Lazy loading can be described as an approach to limit the modules that are loaded to the ones that the user currently needs in an application. Learn more about this concept from the resources below.
A Beginners Guide to Lazy Loading in Angular
How to set up module lazy loading
Lazy Loading Angular Modules and Preloading Strategies
View Encapsulation
Mark as done
Done
View Encapsulation
In Angular, View Encapsulation is a concept that defines whether the template and styles defined within the component can affect the whole application or vice versa. Learn more about this concept from the resources below.
What is View Encapsulation?
Angular - View Encapsulation
Understanding View Encapsulation
Angular View Encapsulation - How It Works
Content Projection
Mark as done
Done
Content Projection
In Angular, Content Projection allows you to insert a shadow DOM in your component. Learn more about this concept from the resources below.
Simplifying Content Projection
Angular - Content Projection
Content Projection Tutorial
Testing Pipes
Mark as done
Done
Testing Pipes
Learn how to test applications in Angular using Testing Pipes. See the resources below.
Angular Testing Pipes
Testing Classes and Pipes
Testing Angular Applications
Testing Directives
Mark as done
Done
Testing Directives
Learn how to test applications in Angular with Testing Directives See the resources below.
Angular - Testing Attributes Directives
Testing Directives
Testing Angular Applications
Services with Dependencies
Mark as done
Done
Services with Dependencies
Service dependencies are an advanced feature that allow you to control the behavior of services based on the status of one or more other services. Learn more about this from the resources below.
Angular - Testing Services
Testing Components Depending on Services
Testing Services - Testing Angular Applications
Component testing
Mark as done
Done
Component testing
Angular component testing is the process of checking the quality and performance of your components. Learn more about this from the resources below.
Basics of Testing Components
Component Unit Testing
Angular Component Testing
Test Your Knowledge
Mark as done
Done
Test Your Knowledge
There is no better way to consolidate your knowledge besides testing yourself. So, if you have made it this far, well done! Here's a chance to see how much you have learned. Take an Angular test below.
