Angular Introduction

Angular is a complete framework for building web applications with TypeScript.

What is Angular?

• Angular is an open-source framework made and maintained by Google
• It is written in TypeScript
• It is a full platform: components, routing, forms, HTTP and testing are included
• A new major version comes out about every six months

React is a library that you combine with other tools. Angular is a framework that already includes most of what a large app needs. This means more to learn at the start, but fewer decisions later.

Angular vs AngularJS

The names are confusing, so let us be clear:

They are different frameworks. Code written for one does not run in the other. This tutorial teaches modern Angular.

Building Blocks of an Angular App

A Component Example

import { Component } from "@angular/core";

@Component({
  selector: "app-welcome",
  template: `<h2>Welcome to {{ institute }}</h2>
             <p>Location: {{ city }}</p>`,
})
export class Welcome {
  institute = "Workownix";
  city = "Karachi";
}

Welcome to Workownix
Location: Karachi

• @Component is a decorator. It tells Angular that this class is a component
• selector is the HTML tag name. You use it as <app-welcome />
• template is the HTML. {{ }} shows values from the class

What is New in Modern Angular

Angular has changed a lot in recent versions. If you read older tutorials, you will see differences:

• Standalone components are the default. Older apps put every component inside an NgModule
• Signals give simple, fine-grained reactivity
• Built-in control flow (@if, @for, @switch) replaces *ngIf and *ngFor
• `inject()` is a simple way to get services
• New projects do not need zone.js, so apps are lighter and faster

What You Should Know First

• HTML and CSS
• JavaScript: functions, arrays, objects, classes and modules
• Basic TypeScript: types like string, number and interfaces

TypeScript example:

interface Student {
  name: string;
  marks: number;
}

const ali: Student = { name: "Ali", marks: 88 };
console.log(`${ali.name} scored ${ali.marks}`);

Ali scored 88

Exercise