Angular Tutorial — Learn Angular 20

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 20). Compared with AngularJS, modern Angular is faster, and supports web, desktop, and mobile application development.

Angular use components instead of controllers in AngularJS. Also angular is installed using npm. Angular JS use JavaScript, but angular use typescript with 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 20.

Angular get a major version update every 6 months.

Current Supported Versions

Angular version 2 to 16 are not supported

Pre-requisite 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

Each 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 library of javascript used now. In-fact , react is more popular after 2019 then angular. React also support features like Single page application, components etc. Here is the difference between angular and react.