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.

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

Component Interaction (@Input / @Output)
Content Projection (<ng-content>)
Attribute & Structural Directives
Reactive Form Validation
Async Data with Pipes
Signal-based Reactivity

3.0 KiB Raw Blame History