Angular Tutorial — Learn Angular 21

Angular

Angular is an open-source framework and development platform for building web, desktop, and mobile applications. Angular is built on TypeScript and is developed and maintained by Google. It is a modern frontend framework for creating single-page applications (SPAs). Before starting Angular, you should be familiar with the following:

1. AngularJS to Angular
2. Introduction of TypeScript
3. Pre-requisite for Angular
4. Introduction of VS Code

AngularJS to Angular

AngularJS refers to the 1.x versions (launched in 2010). The newer Angular (sometimes called "Angular 2+") is a complete rewrite and modernization of the framework, starting from Angular 2 through the current releases (Angular 21). Compared with AngularJS, modern Angular is faster and supports web, desktop, and mobile application development.

Angular uses components instead of controllers in AngularJS. Also, Angular is installed using npm. AngularJS uses JavaScript, but Angular uses TypeScript, which is a JavaScript superset. Thus, Angular supports better class features. This is good for Java and C++ developers.

TypeScript

Angular applications are written in TypeScript. TypeScript is an object-oriented language developed by Microsoft and is a superset of JavaScript (ES6). TypeScript is transpiled to JavaScript before running in the browser. You can use modern JavaScript features, but knowing TypeScript is highly recommended for Angular development.

Read more about TypeScript in our tutorial.

Advantages of TypeScript

1. Types support like any, string, number etc.
2. Interface
3. Generics
4. Class Features
5. Better debugging

Angular Versions

Angular starts from Beta version 2 in 2016. This first stable version was Angular 4 launched in March 2017. The latest version of Angular is 21.

Angular gets a major version update every 6 months.

Current Supported Versions

Angular versions 2 through 18 are not supported.

Prerequisites for Angular

To start Angular, you must have knowledge of HTML, CSS and JavaScript ES6. Angular is helpful for both Frontend Developer and Backend Developers.

I strictly recommend learning JavaScript ES6 before starting Angular. All the latest JS ES6 features like, classes, modules are used in Angular.

Angular Structure

An Angular application has four major building blocks. They are:

1. Components
2. Templates
3. Directives
4. Dependency Injection

VS Code

VS Code is a popular code editor with built-in support for JavaScript (ES6) and TypeScript. This tutorial uses VS Code for examples and demos. VS Code is developed by Microsoft and provides a lightweight, fast development experience for Angular projects.

Extensions for Angular

I recommend installing the Angular Language Service extension for improved IntelliSense, diagnostics, and editor support while building Angular apps.

Angular Vs React

React.js is also a popular JavaScript library. In fact, React is more popular than Angular after 2019. React also supports features like single-page applications, components, etc. Here is the difference between Angular and React.