Introduction to Angular for Beginners

📌 What is Angular?

Angular is a front-end framework developed and maintained by Google.
It is used to build dynamic, single-page web applications (SPAs).

Unlike plain HTML, CSS, and JavaScript, Angular provides powerful features like data binding, components, routing, and dependency injection to make web apps more structured and scalable.

📌 Why Use Angular?

Here are some reasons why developers choose Angular:

• Component-based architecture → Code is divided into reusable blocks.

• Two-way data binding → Syncs data between UI and business logic automatically.

• Built-in routing → Easy navigation between pages.

• Dependency injection → Manages services efficiently.

• Cross-platform support → Can be used to build web, mobile, and desktop apps.

📌 Key Features of Angular

1. Modules – Organize application into small parts.

2. Components – The building blocks of UI.

3. Templates – Define how the UI looks (HTML + Angular syntax).

4. Directives – Special markers in HTML (*ngIf, *ngFor) to add logic.

5. Services & Dependency Injection – For reusable logic like API calls.

6. Routing – For navigation between pages.

📌 Basic Angular Architecture

An Angular app is structured like this:

• app.module.ts → Root module (defines the app).

• app.component.ts → Root component (controls UI).

• app.component.html → Template for UI.

• app.component.css → Styling for UI.

📌 Example: Simple Angular Component

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

@Component({
  selector: 'app-hello',
  template: `<h1>Hello, {{name}}!</h1>`,
  styles: [`h1 { color: blue; }`]
})
export class HelloComponent {
  name: string = 'Angular Beginner';
}

👉 This creates a component that displays:
Hello, Angular Beginner!

📌 How to Get Started with Angular

1. Install Node.js (latest LTS version).

2. Install Angular CLI:

   npm install -g @angular/cli
   

3. Create a new project:

   ng new my-app
   

4. Run the app:

   ng serve
   

5. Open browser → http://localhost:4200