Front-end File Structure¶
Web dashboard file structure¶
gulpfile.js
- this contains all the info on how to compile typescript, how to run the app etc.tsconfig.json
- this is the config file for gulpprocess/typescript
- this contains all the typescript files for Angularmain-dash.module.ts
- this is the root module which tells Angular how to assemble the application. Refer - https://angular.io/guide/bootstrappingmain-dash.component.ts
- this is the root component of what will become a tree of nested components.main-routing.module.ts
- this module takes care of navigating from one view to another. This is the main routing module for the entire application. Refer https://angular.io/guide/router#milestone-2-routing-module
Parent and Child Hierarchy¶
main-dash.module.ts
main-routing.module.ts
main-dash.component.ts
modal.component.ts
andmodal-http.service
hem-list.component.ts
andhem-list.service
hem-single.component.ts
How does it work?¶
- As soon as the user logins in,
dash.html
is called which in-turn calls<main-dash></main-dash>
. This triggers the creation ofmain-dash.component.ts
module. - This module is then created and calls
modal.component.ts
which then brings up the modal if the user has not been validated through a MEMID. It checks if the user has validated throughpreModalCheck()
. If not, it brings up a form(modal) throughmodal.html
inmem/public/dash/partials
. The validation and submission of the form happens throughpreModalCheck()
andvalidateForm()
. It uses the servicemodal-http.service
to communicate with the REST server. If the ID is valid and everything is okay, it brings up<hem-list></hem-list>
which is in the<div>
with the idshow
. If things dont work out, all the html belonging to that<div
is hidden. - Calling
<hem-list></hem-list>
created a new componenthem-list.component.ts
. The HTML associated with this isdash/partials/hemlist.html
. The service associated with this ishem-list.service.ts
. This service is used to get all the information for all HEMs. The component gets the data from HEM every few seconds using the service and then displays that data. It tells you the HEM ID, active status and online status of each HEM`` - When you click on one of the HEMs,
navigateHem()
fromhem-list.component
is called which then passes that info to the router. hem-viewControl.service
- how does that work? Refer tohem-list.component.ts
andhem-list.service.ts
.- The
main-routing.module.ts
then matches this route and in this case, creates a new componenthem-single.component
. The router matches that URL to the route path s and displays the component after a RouterOutlet that you’ve placed in the host view’s HTML. In this case that ishem-list.html
.Refer https://angular.io/guide/router#router-outlet, https://stackoverflow.com/questions/40476814/angular2-target-specific-router-outlet/40477582#40477582 - For this particular route,
hem-single.component.ts
is created.
Angular Resources¶
- Angular quickstart - https://angular.io/guide/quickstart