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 gulp

  • process/typescript - this contains all the typescript files for Angular

Parent and Child Hierarchy

  • main-dash.module.ts

  • main-routing.module.ts

  • main-dash.component.ts

    • modal.component.ts and modal-http.service

      • hem-list.component.ts and hem-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 of main-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 through preModalCheck(). If not, it brings up a form(modal) through modal.html in mem/public/dash/partials. The validation and submission of the form happens through preModalCheck() and validateForm(). It uses the service modal-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 id show. If things dont work out, all the html belonging to that <div is hidden.
  • Calling <hem-list></hem-list> created a new component hem-list.component.ts. The HTML associated with this is dash/partials/hemlist.html. The service associated with this is hem-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() from hem-list.component is called which then passes that info to the router.
  • hem-viewControl.service - how does that work? Refer to hem-list.component.ts and hem-list.service.ts.
  • The main-routing.module.ts then matches this route and in this case, creates a new component hem-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 is hem-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