Project Structure

PreviousTechnologies NextInstallation Guide

Last updated 5 years ago

Was this helpful?

Project Structure

Downloaded Zip File Structure

Document: It will explain how to setup this project, configure and customize the application.
License: Terms and conditions for use, reproduction and distribution of this software piece.
web-app: Angular UI version is available in this directory. It has developed with the latest angular 5.X version with angular-cli. It has more than 100 components and page UI. All the product data render through JSON file. It's quite easy to integrate any Rest API and easy to customize to build any web applications.
React: React + Redux version coming very soon.

Angular Code Structure

Inside app folder we have all the project Files.

This project is created with angular-cli and follow modular approach. You can modify it according to your needs.

Layout: It has some common module that will be used throughout the app like header and footer components.
Pages: It contains all the page modules like Home, Shop, Account, UI Components, etc. You can go inside any of these modules, and you can notice it has several components that we import in our module.ts. All these submodules are imported to the main module, app.module.ts. You can remove or delete or add any elements inside any of these modules.
typeScript: We have added some MDB components like calendar, timepicker etc. You don't need to do anything inside this directory.
Components CSS: If you want to customize css of any components then we can add own css inside components.scss file. You can see each component directory has HTML, SCSS and TS file. You can add all the custom css inside scss file.

PreviousTechnologies NextInstallation Guide

Last updated 5 years ago

Was this helpful?

Downloaded Zip File Structure

Document: It will explain how to setup this project, configure and customize the application.

License: Terms and conditions for use, reproduction and distribution of this software piece.

web-app: Angular UI version is available in this directory. It has developed with the latest angular 5.X version with angular-cli. It has more than 100 components and page UI. All the product data render through JSON file. It's quite easy to integrate any Rest API and easy to customize to build any web applications.

React: React + Redux version coming very soon.

Angular Code Structure

Inside app folder we have all the project Files.

This project is created with angular-cli and follow modular approach. You can modify it according to your needs.

src > app: It is the main folder where you start your development work.

Layout: It has some common module that will be used throughout the app like header and footer components.

Pages: It contains all the page modules like Home, Shop, Account, UI Components, etc. You can go inside any of these modules, and you can notice it has several components that we import in our module.ts. All these submodules are imported to the main module, app.module.ts. You can remove or delete or add any elements inside any of these modules.

typeScript: We have added some MDB components like calendar, timepicker etc. You don't need to do anything inside this directory.

Components CSS: If you want to customize css of any components then we can add own css inside components.scss file. You can see each component directory has HTML, SCSS and TS file. You can add all the custom css inside scss file.

main.scss: You can see in the main.scss, we have imported each scss file: base, components, helpers, layout, modules, ng-bootstrap, etc. If you want to change any of these SCSS files, you can do as well. If you add any more modules, you can create SCSS file in this directory and include into your main.scss. It is always best practice to write inside components so in future if there are new releases, it will be easy for you to update the project.