admin

Please wait...

App Folder Structure

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


src/
├── app/
|   ├── authentication/
|   ├── config/
|   ├── core/
|   ├── layout/
|   ├── shared/
|   ├── app.component.html
|   ├── app.componentscss
|   ├── app.component.spec.ts
|   ├── app.component.ts
|   ├── app.config.ts
|   └── app.routes.ts
├── assets/
|   └── .gitkeep
├── environments/
|   ├── environment.prod.ts
|   └── environment.ts
Folder Description
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.

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: {
        variant: 'light', // options:  light & dark
        theme_color: 'white', // options:  white, cyan, black, purple, orange, green, red
        sidebar: {
            collapsed: false, // options:  true & false
            backgroundColor: 'light', // options:  light & dark
        },
    },
};
Options Description
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.
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/
├── index.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/
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.prod.ts
|   └── environment.ts
├── favicon.ico
├── index.html
├── karma.conf.js
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
└── tslint.json

root Folder Structure


main/
├── e2e/
|   ├── src
|   ├── app.e2e-spec.ts
|   ├── app.po.ts
|   ├── protractor.conf.js
|   └── tsconfig.e2e.json
├── node_modules/...
├── src/...
├── .editorconfig
├── angular.json
├── browserlist
├── package.json
├── package-lock.json
├── README.md
├── tsconfig.json
└── tslint.json

Scss Folder Structure


scss/
├── components/
├── fonts/
├── layouts/
├── override/
├── skins/
├── _components.scss
├── _custom.scss
├── _helpers.scss
├── _mixin.scss
├── _variable.scss
├── style.scss