SOLID Principles Tutorial - Angular Application

Read the companion article on the RuleCMS site: SOLID Principles Applied in Angular.

A professional Angular application demonstrating the SOLID principles of object-oriented design through interactive examples and explanations.

🌐 View Live Demo: https://learn-solid.org/

This application provides an educational, hands-on approach to understanding the five SOLID principles:

• S - Single Responsibility Principle
• O - Open/Closed Principle
• L - Liskov Substitution Principle
• I - Interface Segregation Principle
• D - Dependency Inversion Principle

• 🎨 Dark Professional Theme: Built with Angular Material's pink-bluegrey dark theme
• 💻 Interactive Code Examples: Side-by-side comparison of bad vs. good implementations
• 🔍 Syntax Highlighting: Code snippets with Prism.js highlighting and line numbers
• 📱 Responsive Design: Works seamlessly on desktop and mobile devices
• 🚀 Lazy Loading: Optimized performance with lazy-loaded feature modules
• 🧩 Modular Architecture: Clean separation of concerns with feature modules

• Angular 19: Latest Angular framework with standalone components
• Angular Material: UI component library for consistent design
• TypeScript: Type-safe development
• SCSS: Advanced styling with variables and mixins
• Prism.js: Syntax highlighting for code examples
• RxJS: Reactive programming for data flow

solid-tutorial/
├── src/
│   ├── app/
│   │   ├── core/
│   │   │   └── services/
│   │   │       └── principles-data.service.ts    # SOLID principles content
│   │   ├── features/
│   │   │   ├── home/
│   │   │   │   └── home.component.ts            # Landing page
│   │   │   └── principles/
│   │   │       ├── principles.module.ts         # Lazy-loaded module
│   │   │       └── components/
│   │   │           ├── principle-page/          # Container for each principle
│   │   │           ├── example-page/            # Generic example display
│   │   │           ├── bad-example.component.ts # Bad practice examples
│   │   │           └── good-example.component.ts # Good practice examples
│   │   └── shared/
│   │       ├── shared.module.ts
│   │       └── components/
│   │           ├── card/                        # Reusable card component
│   │           ├── code-snippet/                # Code display with highlighting
│   │           └── back-button/                 # Navigation component
│   └── styles.scss                              # Global styles

• Node.js (v18 or higher)
• npm or yarn package manager
• Angular CLI (optional, included as dev dependency)

1. Clone the repository:

git clone [repository-url]
cd solid-tutorial

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open your browser and navigate to:

http://localhost:4200

• npm start - Start development server
• npm run build - Build for production
• npm test - Run unit tests
• npm run lint - Lint the codebase

To add new content, modify the PrinciplesDataService in src/app/core/services/principles-data.service.ts. Each principle follows this structure:

{
  id: 's',
  name: 'S - Single Responsibility Principle',
  fullName: 'Single Responsibility Principle',
  description: 'Description of the principle',
  howToDemonstrate: 'How we demonstrate it',
  badExample: {
    title: 'Title for bad example',
    description: 'Why this is bad',
    codeSnippets: [{
      code: 'Code string',
      language: 'typescript',
      explanation: 'Explanation',
      highlight: 'Line numbers to highlight'
    }]
  },
  goodExample: {
    // Similar structure
  }
}

• Bad: Component handling both data fetching and display
• Good: Component delegating data operations to a service

• Bad: Payment processor with if/else chains for payment types
• Good: Strategy pattern with payment strategies

• Bad: Subclass throwing errors for base class methods
• Good: Subclass maintaining base class contracts

• Bad: Fat interface forcing unnecessary implementations
• Good: Segregated interfaces for specific capabilities

• Bad: High-level module depending on concrete implementations
• Good: Both depending on abstractions with dependency injection

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• Component Architecture: Standalone components with clear responsibilities
• Module Organization: Feature modules with lazy loading
• Service Layer: Centralized data management
• Type Safety: Full TypeScript typing throughout
• Reactive Patterns: RxJS for asynchronous operations
• CSS Architecture: SCSS with component encapsulation
• Accessibility: ARIA labels and semantic HTML

This project is licensed under the MIT License - see the LICENSE file for details.

• Angular team for the excellent framework
• Angular Material team for the UI components
• Prism.js for syntax highlighting
• The software engineering community for SOLID principles

Created with ❤️ by the RuleCMS Team