Skip to content

arch.md

Latest commit

Β 

History

History
59 lines (48 loc) Β· 3.03 KB

arch.md

File metadata and controls

59 lines (48 loc) Β· 3.03 KB

πŸ“‚ Folder Structure

Project based on principle Feature-based Architecture, this approach provides reusable and consistant features across the application.

πŸ“¦ src/
 β”œβ”€β”€ πŸ“‚ features/            # ΠšΠ°Ρ‚Π°Π»ΠΎΠ³ Ρ–Π· Ρ„ΡƒΠ½ΠΊΡ†Ρ–ΠΎΠ½Π°Π»ΡŒΠ½ΠΈΠΌΠΈ модулями
 β”‚   β”œβ”€β”€ πŸ“‚ feature-name/
 β”‚   β”‚   β”œβ”€β”€ πŸ“‚ feature.component.ts/html/scss  # Component with template and styles, and base logic file
 β”‚   β”‚   β”œβ”€β”€ πŸ“‚ feature-service.ts              # Service or Facade to provide data for NGXS
 β”‚   β”‚   β”œβ”€β”€ πŸ“‚ feature.store.ts                # NGXS Store for feature
 β”‚   β”‚   β”œβ”€β”€ πŸ“‚ feature.entitity.ts             # Feature Interface for data, Types, Enums
 β”‚   β”‚   β”œβ”€β”€ πŸ“‚ feature.guards.ts               # Guard's for feature routing and permissions
 β”‚   β”‚   β”œβ”€β”€ πŸ“‚ feature.resolvers.ts            # Resolvers for data fetching and preloading
 β”‚   β”‚   β”œβ”€β”€ πŸ“‚ feature.utils.ts                # Additinal utils for feature (formBuilders, converters, mappers)
 β”‚   β”‚   β”œβ”€β”€ feature.module.ts                  # Optional, if standalone
 β”‚   β”‚   β”œβ”€β”€ feature.routing.ts                 # Export of standalone components by path
 β”‚
 β”œβ”€β”€ πŸ“‚ core/                # Base module for global services, components, and state
 β”‚   β”œβ”€β”€ πŸ“‚ services/        # Global services (API, Auth, LocalStorage)
 β”‚   β”œβ”€β”€ πŸ“‚ components/      # Global components (Header, Footer, Sidebar)
 β”‚   β”œβ”€β”€ πŸ“‚ store/           # Core state management (Auth, Settings, Router)
 β”‚   β”œβ”€β”€ core.module.ts      # Optional, but must have a provider for core.
 β”‚
 β”œβ”€β”€ πŸ“‚ shared/              # Shared module for common components, directives, pipes, and services
 β”‚   β”œβ”€β”€ πŸ“‚ ui/              # Shared UI components (Button, Input, Modal), or wrappers for 3rd party
 β”‚   β”œβ”€β”€ πŸ“‚ directives/      # Shared Directives (ClickOutside, Draggable)
 β”‚   β”œβ”€β”€ πŸ“‚ pipes/           # Shared Pipes (Filter, Sort, Format)
 β”‚   β”œβ”€β”€ πŸ“‚ services/        # Services, Facades for shared logic (Http, LocalStorage)
 β”‚   β”œβ”€β”€ πŸ“‚ store/           # Shared State management (Settings, Theme, Language)
 β”‚
 β”œβ”€β”€ app.routes.ts           # General Entry point for routing
 β”œβ”€β”€ main.ts                 # Providers Setup and Bootstrap
 β”œβ”€β”€ package.json            # Dependencies and Scripts


---

πŸš€ Dynamic File Generation (Schematics)

Use Angular CLI to generate new feature components, services, and modules.

ng generate component feature-name/components/new-component

### πŸ“Œ Other Schematics:

| **Entity**  | **Command** |
|--------------|----------------------------------------------|
| πŸ“Œ **Service**  | `ng g s feature-name/services/new-service` |
| πŸ“¦ **Module**  | `ng g m feature-name` |
| πŸ” **Guard**   | `ng g g feature-name/guards/auth-guard` |
| πŸ”„ **Pipe**    | `ng g p shared/pipes/currency-format` |
| ✨ **Directive** | `ng g d shared/directives/highlight` |