System Architecture

The Angular Template Website is composed of a modern Angular frontend and a modular Node.js backend. This page documents the real structure of the project, including all components, modules, services, guards, directives, interfaces, content components, and backend architecture.

1. High-Level Architecture

Browser
   │
   ▼
Angular Application (ui-dev)
   │
   ├── Components
   ├── Content Components
   ├── Pages & Modules
   ├── Services
   ├── Guards & Directives
   ├── Interfaces
   ├── Global Styles
   │
   ▼
Node API (api)
   │
   ├── index.js (Entry Point)
   ├── routes/
   ├── json/
   └── package.json
      

The application is structured for rapid development, clean separation of concerns, and scalable content delivery using nested components and JSON-driven page rendering.

2. Frontend Directory Structure

ui-dev/src/app/
  components/
    back-button/
    category-navigation/
    end-of-post/
    footer/
    header/
    loader/
    page-content/
    pagination/
    post-details/
    project-list/
    related-components/
    right-column/
    content/
      accurate-book-records/
      building-trust/
      charitable-solicitations/
      data-privacy-security/
      doing-business-globally/
      environmental-compliance/
      ethical-sales-practices/
      fair-competition/
      fair-housing/
      information-security/
      insider-trading/
      records-management/
      safety-security/
      unfair-labor-practices/
  directives/
    back-button-directive/
  guards/
    loading.interceptor.guard.ts
    redirect.guard.ts
  interfaces/
    categories.interface.ts
    localStorage.interface.ts
    navigation-date.interface.ts
    page-date-interface.ts
    pageDataInterface.ts
    projects-list.interface.ts
  modules/
    about/
    leadership/
    library/
    security/
    shared/
    standards/
  pages/
    about/
    leadership/
    library/
    security/
    shared/
    standards/
  services/
    config-service/
    global-features/
    loader/
    local-storage/
    navigation/
    project-list/
    sidebar/
  styles/
    cornerstone/
    page-style/
    reset/
    styles/
      

3. Backend Directory Structure

api/
  json/           # Static JSON content
  routes/         # Express route definitions
  index.js        # Main server entry point
  package.json    # Backend dependencies
      

The backend is intentionally simple, allowing easy expansion of new endpoints.

4. Angular Architecture

The Angular app follows a highly modular, component-first design:

• Components — UI elements and structural pieces
• Content Components — JSON-driven page sections
• Pages — Route-mapped Angular pages
• Modules — Logical grouping for pages/content
• Services — Core data logic, navigation, content loading
• Guards — Interceptor + Redirect guard
• Directives — Back-button behavioral logic
• Interfaces — Typed structures for cleaner data flow
• Styles — Global SCSS architecture

5. Component Layering

The application uses a layered UI strategy:

Page (e.g., About, Security)
  │
  ├── page-content
  │     ├── content component (e.g., fair-housing)
  │     ├── right-column
  │     └── related-components
  │
  ├── category-navigation
  └── footer / header / pagination
      

This creates a fully dynamic content system in which entire pages are assembled from component blocks — similar to a CMS but fully static and framework-driven.

6. Node API Architecture

The Node backend handles JSON file loading and serves lightweight content endpoints. It follows a simple Express routing pattern:

Request
  │
  ▼
Route → Controller (inside route file) → JSON Loader → Response
      

• index.js — Bootstraps Express, sets middleware
• routes/ — Defines each API endpoint
• json/ — Provides the content structure read by routes

7. Complete Application Flow

Browser
  ▼
Angular Page (via routing)
  ▼
page-content component
  ▼
Service loads page JSON via Node API
  ▼
Content component(s) rendered dynamically
  ▼
Right-column loads related items
  ▼
Pagination / navigation updates
      

This architecture is designed for scalability, allowing additional JSON-driven pages, components, and content sections to be added without architectural changes.

8. Styling Architecture

styles/
  reset/         # Base browser reset
  cornerstone/   # Shared layout structure
  page-style/    # Page-specific modifiers
  styles/        # Global stylesheet entry
      

All styles follow a layered SCSS pattern for readability and maintainability.