Folder Structure
Folder structure
Finding what you need is made simpler by a clear and organized folder structure. The folder structure can be found in the Egret Angular project directory.
- src/ : Contains all source code for the application.
- src/app/ : Main application code including components, modules, and routing.
- src/app/shared/ : Contains reusable components, services, directives, and other shared resources used throughout the application.
- src/app/views/ : Feature modules and components organized by functionality (dashboard, sessions, forms, etc.).
- src/assets/ : Static assets like images, fonts, and global styles.
- src/environments/ : Environment-specific configuration files for development and production.
Detailed Folder Structure
Below is a more detailed breakdown of the Egret Angular project structure:
egret-angular/
├─ dist/ # Compiled output
├─ egret-doc/ # Documentation files
├─ node_modules/ # Dependencies
├─ src/ # Source files
│ ├─ app/ # Application code
│ │ ├─ shared/ # Shared resources
│ │ │ ├─ animations/ # Custom animations
│ │ │ ├─ components/ # Reusable components
│ │ │ ├─ config/ # Configuration files
│ │ │ ├─ directives/ # Custom directives
│ │ │ ├─ guards/ # Route guards
│ │ │ ├─ helpers/ # Helper functions
│ │ │ ├─ inmemory-db/ # Mock data
│ │ │ ├─ interceptors/ # HTTP interceptors
│ │ │ ├─ models/ # Data models/interfaces
│ │ │ ├─ pipes/ # Custom pipes
│ │ │ ├─ search/ # Search functionality
│ │ │ ├─ services/ # Shared services
│ │ │ └─ utils/ # Utility functions
│ │ │
│ │ ├─ views/ # Feature modules
│ │ │ ├─ dashboard/ # Dashboard components
│ │ │ ├─ sessions/ # Auth-related components
│ │ │ ├─ forms/ # Form examples
│ │ │ ├─ tables/ # Table examples
│ │ │ ├─ charts/ # Chart examples
│ │ │ ├─ app-calendar/ # Calendar feature
│ │ │ ├─ app-chats/ # Chat feature
│ │ │ ├─ app-inbox/ # Inbox feature
│ │ │ ├─ cruds/ # CRUD examples
│ │ │ ├─ invoice/ # Invoice feature
│ │ │ ├─ profile/ # User profile
│ │ │ ├─ shop/ # E-commerce components
│ │ │ └─ others/ # Other components
│ │ │
│ │ ├─ app.component.ts # Root component
│ │ ├─ app.module.ts # Root module
│ │ └─ app.routing.ts # Root routing
│ │
│ ├─ assets/ # Static assets
│ │ ├─ images/ # Image files
│ │ ├─ fonts/ # Font files
│ │ ├─ styles/ # Global styles
│ │ │ └─ scss/ # SCSS style files
│ │ └─ data/ # Static data files
│ │
│ ├─ environments/ # Environment configurations
│ ├─ config.ts # App configuration
│ ├─ main.ts # Application entry point
│ ├─ index.html # Main HTML file
│ └─ styles.scss # Global styles
│
├─ angular.json # Angular CLI configuration
├─ package.json # Dependencies and scripts
├─ tailwind.config.js # Tailwind CSS configuration
├─ tsconfig.json # TypeScript configuration
└─ README.md # Project documentationKey Directories Explained
src/app/shared/
The shared directory contains reusable components and services that are used throughout the application:
- components/: Reusable UI components like buttons, cards, and dialogs
- services/: Common services for authentication, navigation, and data management
- directives/: Custom Angular directives
- pipes/: Custom Angular pipes for data transformation
- models/: TypeScript interfaces and classes for data models
src/app/views/
The views directory contains feature modules organized by functionality:
- dashboard/: Dashboard components and analytics
- sessions/: Authentication-related components (login, signup, forgot password)
- forms/: Form examples and implementations
- tables/: Table components and examples
- charts/: Chart components using various charting libraries
- app-calendar/: Calendar implementation
- app-inbox/: Email inbox implementation
src/assets/
The assets directory contains static files used throughout the application:
- images/: Image files used in the application
- fonts/: Custom font files
- styles/: Global SCSS files and variables
- data/: Static JSON data files