Angular Introduction Tutorial #1

Angular Framework – Complete Step-by-Step Tutorial

---

1. What is Angular Framework?

Angular is a TypeScript-based front-end web application framework developed and maintained by Google. It is used to build single-page applications (SPA) with structured, scalable, and maintainable code.

Angular follows a component-based architecture and provides built-in features like routing, forms, HTTP services, dependency injection, and state management.

---

2. Short History of Angular

• 2010: AngularJS (version 1.x) released by Google
• 2016: Angular 2 introduced (complete rewrite)
• Angular 4–8: Performance and tooling improvements
• Angular 9: Ivy rendering engine introduced
• Angular 14: Standalone components introduced
• Angular 17+: Signals, improved performance, modern tooling

Note: AngularJS and Angular (2+) are completely different.

---

3. Why Use Angular?

• Developed and supported by Google
• Full-featured framework
• Strong TypeScript support
• Two-way data binding
• Dependency Injection
• Excellent for large enterprise applications

---

4. Difference Between Angular and React

Angular	React
Complete framework	Library
Uses TypeScript by default	Uses JavaScript (TypeScript optional)
Two-way data binding	One-way data binding
Uses HTML templates	Uses JSX
Steep learning curve	Easy to learn

---

5. Prerequisites for Angular

• Basic HTML
• Basic CSS
• Basic JavaScript
• Basic TypeScript (recommended)

---

6. Installing Angular on Windows

Step 1: Install Node.js

Download and install Node.js (LTS version).

Step 2: Verify Installation

node -v
npm -v

Step 3: Install Angular CLI

npm install -g @angular/cli

Step 4: Verify Angular Installation

ng version

---

7. Installing Angular on Linux

Step 1: Install Node.js

sudo apt update
sudo apt install nodejs npm

Step 2: Install Angular CLI

sudo npm install -g @angular/cli

Step 3: Verify

ng version

---

8. Create New Angular Project

ng new my-angular-app
cd my-angular-app
ng serve

Open browser and visit: http://localhost:4200

---

9. Angular Project Structure

my-angular-app/
│
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │
│   ├── main.ts
│   ├── index.html
│
├── angular.json
├── package.json

• app.component.ts: Component logic
• app.component.html: View (UI)
• main.ts: Application bootstrap

---

10. Hello World Program in Angular

app.component.ts

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: '<h1>Hello World from Angular</h1>'
})
export class AppComponent {
}

Output

Hello World from Angular

---

11. Data Binding in Angular

• Interpolation: {{ }}
• Property Binding
• Event Binding
• Two-way Binding

---

12. Addition Program in Angular

app.component.ts

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './app.component.html'
})
export class AppComponent {
  num1: number = 0;
  num2: number = 0;
  result: number = 0;

  add() {
    this.result = this.num1 + this.num2;
  }
}

app.component.html

<h2>Addition Program</h2>

<input type="number" [(ngModel)]="num1" placeholder="Enter first number">
<br><br>

<input type="number" [(ngModel)]="num2" placeholder="Enter second number">
<br><br>

<button (click)="add()">Add</button>

<h3>Result: {{ result }}</h3>

---

13. Key Angular Concepts to Teach Students

• Components
• Modules
• Templates
• Directives
• Services
• Routing
• Forms
• HTTP Client

---

14. Conclusion

Angular is a powerful enterprise-level framework suitable for building large-scale web applications. With strong structure, TypeScript support, and built-in tools, Angular is an excellent choice for professional developers.

---

Happy Learning Angular 🚀