Introduction to Angular

Week-03/Day_03/README.md

@@ -0,0 +1,65 @@
+# Angular Fundamentals (Basics)
+
+## Overview
+This project is a comprehensive deep-dive into the **Angular Framework**. It covers everything from basic component architecture to advanced features like Signals, PWA, and Internationalization, following the official Angular "Getting Started" and "Tour of Heroes" roadmap.
+
+---
+
+### 1. Core Architecture
+Angular is built on a hierarchy of **Components** and **Services**.
+- **Components:** Manage the view and logic (HTML/CSS/TS).
+- **Standalone Components:** Modern Angular approach to reduce boilerplate code without needing `NgModules`.
+- **Lifecycle Hooks:** Managing the component from birth (`ngOnInit`) to death (`ngOnDestroy`).
+
+### 2. Templates & Data Binding
+How the logic (TS) and the view (HTML) communicate:
+- **Interpolation:** `{{ title }}` for text.
+- **Property Binding:** `[disabled]="isInvalid"` to control attributes.
+- **Event Binding:** `(click)="save()"` to handle user actions.
+- **Two-way Binding:** `[(ngModel)]="name"` for real-time form syncing.
+- **Pipes:** Transforming data in templates (e.g., `date`, `currency`, `json`).
+
+### 3. Directives & Control Flow
+- **Structural:** `*ngIf`, `*ngFor`, and the new **Built-in Control Flow** (`@if`, `@for`).
+- **Attribute:** Changing the appearance or behavior of an element (e.g., `ngClass`, `ngStyle`).
+
+### 4. Dependency Injection (DI) & Services
+- **Services:** Centralized logic for data fetching and business rules.
+- **Injectable:** Using the `@Injectable()` decorator to make services available project-wide.
+- **Providers:** Defining how the DI system creates the service.
+
+### 5. Navigation & Forms
+- **Routing:** Single Page Application (SPA) navigation using `RouterModule`. Includes lazy loading for performance.
+- **Reactive Forms:** Scalable, performant, and easy to test (Strictly Typed).
+- **Template-driven Forms:** Simple, easy-to-use forms for basic requirements.
+
+### 6. HTTP Client & Server Communication
+- **HttpClient:** Making REST API calls (GET, POST, PUT, DELETE).
+- **Interceptors:** Modifying requests (like adding Auth Tokens) globally.
+- **Observables (RxJS):** Handling asynchronous data streams.
+
+---
+
+### 7. Advanced Concepts
+- **Signals:** The future of Angular reactivity (fine-grained updates).
+- **Change Detection:** Optimization using `OnPush` strategy and `Zone.js`.
+- **Hydration:** Improving Server-Side Rendering (SSR) performance.
+- **PWA (Progressive Web Apps):** Service workers and offline support.
+- **Internationalization (i18n):** Translating the app for global users.
+
+---
+
+### Developer Workflow & Tools
+- **Angular CLI:** `ng serve`, `ng build`, `ng test`, `ng generate`.
+- **Testing:** Unit testing with Jasmine/Karma and code coverage analysis.
+- **DevTools:** Debugging component structures and change detection.
+
+---
+
+### Learning Checklist
+- [x] Component Interaction (@Input / @Output)
+- [x] Content Projection (`<ng-content>`)
+- [x] Attribute & Structural Directives
+- [x] Reactive Form Validation
+- [x] Async Data with Pipes
+- [x] Signal-based Reactivity