Web Development Unlimited

Data Flow

This page documents the complete data flow inside the Angular Template Website, from browser navigation to content rendering.

Because your application is JSON-driven, understanding the content pipeline is essential: 


Route → NavigationService → Node API → JSON → PageContentComponent → Content Components

1. Frontend Request Cycle

The primary data lifecycle follows this pattern:


User Clicks Navigation
        ▼
Angular Router
        ▼
NavigationService determines which JSON to load
        ▼
LoaderService activates (spinner)
        ▼
HTTP request sent to Node API
        ▼
API reads JSON files from /api/json
        ▼
Response returned to Angular
        ▼
page-content loads content components
        ▼
right-column + related-components use JSON metadata
        ▼
LoaderService hides loader

2. How Pages Load Content

Each major page (About, Leadership, Library, Security, Shared, Standards) uses the same fundamental loading pattern: 


// Example conceptual flow:
standards → navigation.service.loadPage('standards')
         → GET /api/content/standards
         → returns standards.json
         → page-content renders mapped components

Inside your /api/json directory, each JSON file defines the structure for a page.

Example JSON


{
  "title": "Data Privacy & Security",
  "components": [
    "information-security",
    "records-management"
  ],
  "rightColumn": [
    "fair-competition",
    "building-trust"
  ]
}

3. PageContentComponent Flow

page-content is the heart of the content pipeline.


page-content
      ▼
Loads JSON via NavigationService
      ▼
Iterates the "components" array
      ▼
Dynamically renders each content component
      ▼
Creates rightColumn and relatedComponents data

It functions similarly to a very lightweight CMS engine.

Conceptual Implementation


// page-content pseudo-code:

loadPageJson(section) {
  this.service.loadPage(section).subscribe(json => {
    this.components = json.components;
    this.rightColumn = json.rightColumn;
  });
}

4. Content Components

Each JSON item inside "components" corresponds directly to a folder inside: 

ui-dev/src/app/components/content/

For example: 

"unfair-labor-practices"

Renders:

<app-unfair-labor-practices></app-unfair-labor-practices>

5. Right Column Data Flow


page-content
      ▼
JSON.rightColumn array
      ▼
right-column component
      ▼
related-components (optional)

The right column uses JSON to render supplemental article suggestions, cross-module links, or document references.

6. Related Components Flow

Uses json.rightColumn or page-level metadata to determine which content components should be displayed as related topics. 


// related-components pseudo-code

this.related = json.rightColumn.map(item => {
  return this.lookupComponent(item);
});

7. Loader Flow (LoaderService)


navigation.service.startPageLoad()
      ▼
loaderService.setLoading(true)
      ▼
Node API request
      ▼
Response returns
      ▼
loaderService.setLoading(false)

This ensures the loader displays consistently during page transitions.

8. Guards

Your app includes two guards:

loading.interceptor.guard


canActivate() {
  loader.setLoading(true);
  return true;
}

redirect.guard


canActivate() {
  return router.navigate(['/about']);
}

9. Project List Flow


project-list component
        ▼
ProjectListService
        ▼
Loads JSON list
        ▼
Renders project cards

The ProjectListService handles loading and transforming the project data.

10. Combined System Data Flow


Browser
  ▼
Route Change
  ▼
NavigationService
  ▼
LoaderService (spinner)
  ▼
Node API (Express)
  ▼
JSON Content
  ▼
page-content component
  ▼
content components (14 total)
  ▼
right-column
  ▼
related-components
  ▼
UI fully rendered

Final Notes