admin

Please wait...

folder App Folder Structure

account_tree Project Structure Overview

Below is the folder structure of the app folder in the starter template. Each folder serves a specific purpose in organizing the application.

folder main/
folder src/
folder app/
folder admin/
folder authentication/
folder core/
folder layout/
folder shared/
folder employee/
folder client/
description app.component.ts
description app.config.ts
folder assets/
info
Tip: Each module is designed to be self-contained with its own routing and components.

info Module Descriptions

  • layers
    Core Module

    Common services, models, and guards. Services are instantiated once.

  • dashboard
    Layout Module

    Layout components like header, sidebar, and footer.

  • share
    Shared Module

    Reusable components, directives, and pipes shared across features.

  • person
    Admin Module

    Contains all components and services related to the administrator dashboard.

  • people
    Employee Module

    Features specifically for employees, such as task management, attendance, and payroll.

  • business_center
    Client Module

    Client-related functionality like project tracking, billing, and support tickets.

  • vpn_key
    Authentication Module

    Handles login, registration, password recovery, and session management.

  • perm_media
    Assets Folder

    Stores static resources such as images, fonts, and styles.

Core Folder

folder core/
folder guard/
folder interceptor/
folder models/
folder service/
description core.module.ts
Options Description
guard This folder is used for auth guard and import guard, you can find related files like auth.guard.ts & module-import.guard.ts here.
interceptor You can see interfeptor files here. You can see files for error and jwt interceptor, also find a file fake-backend.ts for dummy data.
models All enum and class files for USER, ROLE & CONFIG are install here.
service All singleton services are placed in service directory.

Layout Folder

folder layout/
folder app-layout/
folder header/
folder page-loader/
folder right-sidebar/
folder sidebar/
description layout.module.ts
Options Description
app-layout Used for Seperate authentication pages and main content pages. You can find two layout compent here auth-layout & main-layout.
header Header or navbar code is written here.
page-loader Loading spinner code is here, we used ngx-spinner for loading spinner.
right-sidebar Config sidebar code is written here.
sidebar You can find main sidebar menu code in this folder.

Folder Structure

Src Folder Structure

folder src/
folder app/
description app.component.html
description app.component.scss
description app.component.spec.ts
description app.component.ts
description app.config.ts
description app.routes.ts
folder assets/
description .gitkeep
folder environments/
description environment.development.ts
description environment.ts
description favicon.ico
description index.html
description main.ts
description styles.scss

root Folder Structure

folder main/
folder .angular
folder node_modules
folder src/...
description .editorconfig
description .eslintrc.json
description angular.json
description package.json
description tsconfig.app.json
description tsconfig.json
description tsconfig.spec.json

Scss Folder Structure

folder scss/
folder apps/
folder browser/
folder common/
folder components/
folder fonts/
folder pages/
folder plugins/
folder theme/
folder ui/
description style.scss

Admin Folder Structure

folder admin/
folder accounts/
folder attendance/
folder clients/
folder dashboard/
folder departments/
folder documents/
folder employees/
folder holidays/
folder jobs/
folder leads/
folder leaves/
folder payroll/
folder performance/
folder projects/
folder reports/
folder training/
description admin.routes.ts

Employee Folder Structure

folder employee/
folder attendance/
folder chat/
folder documents/
folder leaves/
folder my-tasks/
folder myteam/
folder payroll/
folder settings/
description employee.routes.ts

Client Folder Structure

folder client/
folder billing/
folder chat/
folder dashboard/
folder documents/
folder projects/
folder settings/
folder supports/
description client.routes.ts