A comprehensive Angular application that demonstrates core concepts, best practices, and modern Angular development patterns.

📚 Table of Contents

🎯 Overview

This project is a complete Angular application designed to serve as both a learning resource and a reference implementation. It demonstrates all major Angular concepts with detailed comments and documentation throughout the codebase.

✨ Features

Core Angular Features

  • ✅ Components & Templates - Standalone components with templates and styles
  • ✅ Data Binding - Property binding, event binding, two-way binding
  • ✅ Directives - Built-in directives and custom attribute/structural directives
  • ✅ Services & Dependency Injection - Service architecture with DI
  • ✅ Routing & Lazy Loading - Feature-based routing with lazy-loaded modules
  • ✅ Forms - Both template-driven and reactive forms with validation
  • ✅ HTTP & REST API - HTTP client with interceptors and error handling
  • ✅ RxJS & Observables - Observable patterns, operators, Subjects
  • ✅ Guards & Interceptors - Route guards and HTTP interceptors
  • ✅ State Management - Basic state management with BehaviorSubject
  • ✅ Pipes - Built-in and custom pipes for data transformation
  • ✅ Environment Configuration - Environment-specific configuration

Storage Mechanisms

  • ✅ LocalStorage - Persistent browser storage
  • ✅ SessionStorage - Session-based storage
  • ✅ Cookies - Cookie management with options
  • ✅ IndexedDB - Large structured data storage

📁 Project Structure

comprehensive-demo/
├── src/
│   ├── app/
│   │   ├── core/                    # Core functionality
│   │   │   ├── guards/              # Route guards
│   │   │   ├── interceptors/         # HTTP interceptors
│   │   │   └── services/            # Core services
│   │   │       ├── auth/            # Authentication service
│   │   │       ├── http/            # HTTP service
│   │   │       └── storage/        # Storage services
│   │   ├── features/                # Feature modules
│   │   │   ├── auth/                # Authentication features
│   │   │   ├── dashboard/           # Dashboard features
│   │   │   ├── users/               # User management
│   │   │   └── products/            # Product management
│   │   ├── models/                  # TypeScript interfaces
│   │   ├── shared/                  # Shared components/directives/pipes
│   │   │   ├── directives/         # Custom directives
│   │   │   └── pipes/              # Custom pipes
│   │   ├── state/                   # State management
│   │   ├── app.component.ts        # Root component
│   │   ├── app.config.ts            # App configuration
│   │   └── app.routes.ts            # Route configuration
│   ├── environments/                # Environment configs
│   ├── index.html                   # Entry HTML
│   ├── main.ts                     # Bootstrap file
│   └── styles.scss                  # Global styles
├── angular.json                     # Angular CLI config
├── package.json                     # Dependencies
└── tsconfig.json                    # TypeScript config

🚀 Getting Started

Prerequisites

  • Node.js (v18 or higher)
  • npm or yarn
  • Angular CLI (v17 or higher)

Installation

  1. Install Angular dependencies: bash npm install

  2. Install and start backend server: ```bash # Navigate to server directory cd server

# Install backend dependencies npm install

# Start backend server (in a separate terminal) npm start ```

The backend server will run on http://localhost:3000

  1. Start Angular development server: bash # In the root directory npm start

  2. Open browser: Navigate to http://localhost:4200

Default Login Credentials

Admin User: - Email: jane@example.com - Password: password123

Regular User: - Email: john@example.com - Password: password123

Build for Production

npm run build

The build artifacts will be stored in the dist/ directory.

Running Without Backend (Demo Mode)

If you don't want to run the backend server, the application will automatically use mock data. The app is designed to work in both modes: - With Backend: Real API calls with authentication - Without Backend: Mock data with demo authentication

📖 Key Concepts Demonstrated

1. Components & Templates

  • Standalone Components: Modern Angular approach without NgModules
  • Template Syntax: Interpolation, property binding, event binding
  • Component Lifecycle: OnInit, OnDestroy, etc.
  • Component Communication: Services, Input/Output, Observables

Example Files: - app.component.ts - Root component - features/dashboard/dashboard/dashboard.component.ts - Feature component

2. Data Binding

  • Interpolation: {{ value }}
  • Property Binding: [property]="value"
  • Event Binding: (event)="handler()"
  • Two-way Binding: [(ngModel)]="value"

Example:

// Component
export class MyComponent {
  title = 'Hello World';
  onButtonClick() { console.log('Clicked!'); }
}

// Template
<h1>{{ title }}</h1>
<button (click)="onButtonClick()">Click Me</button>

3. Directives

Built-in Directives: - *ngIf - Conditional rendering - *ngFor - List rendering - [ngClass] - Dynamic CSS classes - [ngStyle] - Dynamic styles

Custom Directives: - HighlightDirective - Highlights elements on hover - ClickOutsideDirective - Detects clicks outside element - AutoFocusDirective - Auto-focuses elements

Example Files: - shared/directives/highlight.directive.ts - shared/directives/click-outside.directive.ts

4. Services & Dependency Injection

  • Service Creation: @Injectable({ providedIn: 'root' })
  • Dependency Injection: Constructor injection and inject() function
  • Singleton Pattern: Services are singletons by default
  • Service Communication: Shared state through services

Example Files: - core/services/auth/auth.service.ts - core/services/http/api.service.ts

5. Routing & Lazy Loading

  • Route Configuration: Feature-based routing
  • Lazy Loading: loadComponent and loadChildren
  • Route Guards: canActivate, canActivateChild
  • Route Parameters: Dynamic routes with parameters

Example Files: - app.routes.ts - Main route configuration - features/users/users.routes.ts - Feature routes

6. Forms

Template-Driven Forms: - Simple forms with [(ngModel)] - Validation in template - Less programmatic control

Reactive Forms: - FormBuilder, FormGroup, FormControl - Programmatic validation - Better type safety

Example Files: - features/auth/login/login.component.ts - Template-driven - features/auth/register/register.component.ts - Reactive

7. HTTP & REST API

  • HttpClient: Angular's HTTP client
  • Observables: All HTTP methods return Observables
  • Interceptors: Request/response transformation
  • Error Handling: Global error handling

Example Files: - core/services/http/api.service.ts - core/interceptors/auth.interceptor.ts

8. RxJS & Observables

  • Observable Creation: of(), from(), interval(), timer()
  • Operators: map(), filter(), debounceTime(), etc.
  • Subjects: Subject, BehaviorSubject
  • Subscription Management: Unsubscribe to prevent memory leaks

Example Files: - features/dashboard/rxjs-demo/rxjs-demo.component.ts

9. Guards & Interceptors

Route Guards: - authGuard - Authentication check - roleGuard - Role-based access control

HTTP Interceptors: - authInterceptor - Adds auth token - errorInterceptor - Global error handling - loadingInterceptor - Loading state tracking

Example Files: - core/guards/auth.guard.ts - core/interceptors/auth.interceptor.ts

10. State Management

  • BehaviorSubject: Current state holder
  • Observable State: Reactive state updates
  • State Selectors: Select specific state slices
  • Immutable Updates: Create new state objects

Example Files: - state/app.state.ts

11. Pipes

Built-in Pipes: - DatePipe, CurrencyPipe, UpperCasePipe, etc.

Custom Pipes: - TruncatePipe - Truncates text - CurrencyFormatPipe - Custom currency formatting - FilterPipe - Array filtering

Example Files: - shared/pipes/truncate.pipe.ts

12. Storage APIs

LocalStorage: - Persistent storage across sessions - 5-10MB limit - String-based storage

SessionStorage: - Session-only storage - Cleared on tab close - 5-10MB limit

Cookies: - Sent with HTTP requests - ~4KB limit - Expiration support

IndexedDB: - Large structured data - Async API - Index support

Example Files: - core/services/storage/local-storage.service.ts - features/dashboard/storage-demo/storage-demo.component.ts

🏗️ Architecture

Standalone Components

This project uses Angular's standalone components (Angular 14+), which means: - No NgModules required - Direct imports of dependencies - Simpler, more modern approach - Better tree-shaking

Feature-Based Structure

  • Core: Shared services, guards, interceptors
  • Features: Feature-specific components and routes
  • Shared: Reusable components, directives, pipes
  • Models: TypeScript interfaces and types

Service Architecture

  • API Service: Centralized HTTP client
  • Auth Service: Authentication and authorization
  • Storage Services: Wrappers around browser storage APIs
  • State Service: Application state management

💡 Best Practices

1. Type Safety

  • Use TypeScript interfaces for all data structures
  • Avoid any type
  • Enable strict mode in tsconfig.json

2. Component Design

  • Keep components focused and single-purpose
  • Use OnPush change detection when possible
  • Unsubscribe from observables in ngOnDestroy

3. Service Design

  • Use providedIn: 'root' for singleton services
  • Keep services focused on specific responsibilities
  • Use dependency injection, not direct instantiation

4. Error Handling

  • Handle errors in HTTP requests
  • Provide user-friendly error messages
  • Log errors for debugging

5. Performance

  • Use lazy loading for feature modules
  • Implement OnPush change detection
  • Unsubscribe from observables
  • Use trackBy in *ngFor for large lists

6. Security

  • Never store sensitive data in localStorage
  • Use HttpOnly cookies for tokens (server-side)
  • Validate all user input
  • Sanitize data before display

📝 Documentation

Every file in this project includes: - File-level comments explaining the purpose - Function/method comments explaining behavior - Inline comments for complex logic - TypeScript types for type safety

🔧 Configuration

Environment Files

  • src/environments/environment.ts - Development config
  • src/environments/environment.prod.ts - Production config

Angular Configuration

  • angular.json - Build and serve configuration
  • tsconfig.json - TypeScript compiler options

🧪 Testing

While this project focuses on demonstrating concepts, in a production app you would:

  • Write unit tests for components and services
  • Write integration tests for features
  • Write e2e tests for critical user flows
  • Maintain high code coverage

📚 Learning Resources

This project demonstrates concepts from: - Angular Official Documentation - RxJS Documentation - TypeScript Handbook

🤝 Contributing

This is a demonstration project. Feel free to: - Study the code - Use it as a reference - Modify it for learning purposes - Share it with others learning Angular

📄 License

This project is for educational purposes.

🙏 Acknowledgments

Built with Angular and modern web technologies to demonstrate best practices and core concepts.

Happy Learning! 🚀