admin

Please wait...

App Folder Structure

You can see following folder structure of app folder in starter template.



main/
├── .angular
├── node_modules
├── src/
|   ├── app/
|   |   ├── admin/
|   |   ├── authentication/
|   |   ├── config/
|   |   ├── core/
|   |   ├── doctor/
|   |   ├── layout/
|   |   ├── patient/
|   |   ├── shared/
|   |   ├── app.component.html
|   |   ├── app.componentscss
|   |   ├── app.component.spec.ts
|   |   ├── app.component.ts
|   |   ├── app.config.ts
|   |   └── app.routes.ts
|   ├── assets/
|   |   └── .gitkeep
|   ├── environments/
|   |   ├── environment.development.ts
|   |   └── environment.ts
|   ├── index.html
|   ├── main.ts
|   ├── styles.scss
├── .eslintrc.json
├── angular.json
├── package.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
Folder Description
admin All admin pages are placed here. Seperate admin module in project.
authentication All authentication pages are placed here like signin, signup etc.
config Template theme Configurations file config.service.ts in this folder. You can change theme settings like light or dark template from here. For more details please scroll down.
core The Core Module is a module we create to define common services, models, interceptor and guard. The services defined in the core module are instantiated once. For more details please scroll down.
layout You can find layout related modules here like header, sidebar, setting sidebar etc.
shared We create it to define common components and other modules that we need to import inside every other module of our application, so you do not need to import them again and again (like the Material Components). We only need to add the Shared module to each module to access to common components.
doctor All doctor pages are placed here. Seperate doctor module in project.
patient All patient pages are placed here. Seperate patient module in project.

Config Folder

For theme related configurations changes, you have to just change in one file config.service.ts. You can find config file in config folder.

Note: we store theme related data in localstorage in browser, so whenever you chagne in config file please clear your browser data first. 
                                    
    this.configData = {
        layout: {
            rtl: false, // options:  true & false
            variant: 'dark', // options:  light & dark
            theme_color: 'black', // options:  white, black, purple, blue, cyan, green, orange
            logo_bg_color: 'black', // options:  white, black, purple, blue, cyan, green, orange
            sidebar: {
                collapsed: false, // options:  true & false
                backgroundColor: 'dark', // options:  light & dark
            }
        }
    }
Options Description
rtl For RTL layout set it to true, for LTR layout set it to false.
varient For use light template layout value is light & for dark template use darkin value.
theme_color You have multiple theme options, you can chose any theme color from white, black, purple, blue, cyan, green, orange.
logo_bg_color You have multiple logo background options, you can chose any theme color from white, black, purple, blue, cyan, green, orange.
collapsed Set true for collapsed sidebar and false for regular sidebar.
backgroundColor You can set sidebar background color light for white sidebar background and dark for dark sidebar background.

Core Folder


core/
├── guard/
├── interceptor/
├── models/
├── service/
├── 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


layout/
├── app-layout/
├── header/
├── page-loader/
├── right-sidebar/
├── sidebar/
├── 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


src/
├── app/
|   ├── app.component.html
|   ├── app.componentscss
|   ├── app.component.spec.ts
|   ├── app.component.ts
|   └── app.config.ts
|   └── app.routes.ts
├── assets/
|   └── .gitkeep
├── environments/
|   ├── environment.development.ts
|   └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── styles.scss

root Folder Structure


main/
├── .angular
├── node_modules
├── src/...
├── .editorconfig
├── .eslintrc.json
├── angular.json
├── package.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json

Scss Folder Structure


scss/
├── apps/
├── browser/
├── common/
├── components/
├── fonts/
├── pages/
├── plugins/
├── theme/
├── ui/
├── style.scss

Admin Folder Structure


admin/
├── ambulance/
├── appointment/
├── billing/
├── dashboard/
├── departments/
├── doctors/
├── inventory/
├── patients/
├── pharmacy/
├── records/
├── room/
├── staff/
├── admin-routing.module.ts
├── admin.module.ts

Doctor Folder Structure


doctor/
├── appointments/
├── dashboard/
├── doctors/
├── patients/
├── payments/
├── settings/
├── doctor-routing.module.ts
├── doctor.module.ts

Patient Folder Structure


patient/
├── appointments/
├── billing/
├── dashboard/
├── medical-records/
├── prescriptions/
├── settings/
├── patient-routing.module.ts
├── patient.module.ts