diff --git a/Week-03/Day_03/README.md b/Week-03/Day_03/README.md new file mode 100644 index 0000000..02fd54d --- /dev/null +++ b/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 (``) +- [x] Attribute & Structural Directives +- [x] Reactive Form Validation +- [x] Async Data with Pipes +- [x] Signal-based Reactivity