Here's a simplified version of the entire directory structure of the Espire:
\r\nconfigs folder basically contains app configuration related files, such as app, navigation, chart & i18n.
\r\nconfigs folder included all language retaled files such as translate key & language entry files.
\r\nThis directory contains all the template layouts & related component.
\r\nThis is the directory for display purpose mock data.
\r\nThis directory contains the main route tree for each layout.
\r\nShared directory included anything re-usable such as components, services and pipes. There is also SharedModule.ts which imports & exports modules that commonly use on develope.
We use ngxs to maintain our states, this directory contains all states related files.
This directory included all exmaple apps and ready to use pages that display oon demo.
\r\n\r\n Espire is a unique Angular web app template for admin and user dashboards with pixel perfect stylish design and tons of useful features, which able to choose the best dashboard solution to fit your project needs. It is easy to customize and coded in developer friendly.\r\n
\r\nCore framework of Espire
\r\nThe world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components.
\r\nngx-bootstrap contains all core Bootstrap components powered by Angular.
\r\nEspire required some prerequisite, you many need to install the following tools before starting the app.
\r\n\r\n Navigate to project root directory where package.json located and execute the code below to install all necessary dependencies. \r\n
Run the code below for a dev server. Navigate to http://localhost:4200/ to view the output.
To build your application for production, run the following command, the build artifacts will be stored in the /dist directory
\r\n \r\nYou can analyze your bundle size by running the following command, this will generate a bundle stats.json
\r\n \r\nGenerate a bundle report by running the following command, once 'npm run build-prod-state' was finished.
\r\n \r\nEspire support multi language, we use ngx-translate implement the translation.
You can config your supported & default language in src/app/configs/i18n.config.ts.
You can add your new language folder & translate key to directory src/app/i18n as the code below.
Import your translation to TranslateService at app.component.ts
Use translateService.use() to set your current language.
\r\n \r\nUsage in html
\r\n \r\nWe creating navigations from data dynamically, configuration can be found at src/app/configs/nav.config.ts here is our Navigation metadata looks like:
| path | \r\nThe route path navigate to. | \r\n
|---|---|
| title | \r\nTitle of the navigation item. | \r\n
| translateKey | \r\nTranslate key the navigation item. | \r\n
| type | \r\nNavigation item type. | \r\n
| iconType | \r\nIcon type of the navigation item. | \r\n
| icon | \r\nIcon name of the navigation item according to iconType. | \r\n
| submenu | \r\nArray of navigation items to create child items, value will be [] if there is no sub menu. | \r\n
| key | \r\nUnique id of the navigation item. | \r\n
Once have you unzip the .zip file you have downloaded & enter the directory angular, you will find 3 folder as below
This folder is the main preview project. It contains everything that can see in the live demo.
\r\nThis is a starter pack for developer, it initialize the basic of the template. You can create pages and write your own code here, we highly recommend you copy this folder to your workspace for development.
\r\nOffline documentation of Espire.
\r\nEspire comes with 2 types of main view, which is auth view & app view, each view has it own route tree located at src/app/routes
- along with Navigation, Header, Footer & etc, mainly serve for core application.
\r\n- did not comes with any template components, mainly serve for authentication such like login, register & or other pre login pages.
\r\nExample of routes
\r\n \r\nYou can pass data to the route to config the PageHeader, here is some metadata for route data:
\r\n \r\nFor example:
\r\n \r\nEmilus comes with a variety of different app & theme, you can try them from quick view panel in our demo & play around with.
\r\nYou can change the app setup at src/app/configs/app.config.js
Theme Colors & other variables can be modify in src/assets/scss/_variables.scss
\r\n Since there is no version control system provided by the platform, the update could be difficult.\r\n However, we provided some sugguestion here which might help you to keep the template updated easier.\r\n
\r\n