Routing

The Angular Template Website uses a clean and modular routing system. Each major section of the site (About, Leadership, Library, Security, Shared, Standards) is organized under both a module and a page component.

All routes are defined in:

ui-dev/src/app/app.routes.ts

1. Routing Structure

/
├── about
├── leadership
├── library
├── security
├── shared
└── standards
      

Each route corresponds to one of the page folders inside:

ui-dev/src/app/pages/

2. Route → Module → Page Mapping

The project uses a 1-to-1 mapping between:

• Angular routes
• Feature modules
• Page components

about      → modules/about      → pages/about
leadership → modules/leadership → pages/leadership
library    → modules/library    → pages/library
security   → modules/security   → pages/security
shared     → modules/shared     → pages/shared
standards  → modules/standards  → pages/standards
      

This keeps the codebase organized and scalable.

3. Example Route Configuration

// app.routes.ts
export const routes: Routes = [
  { path: '', redirectTo: 'about', pathMatch: 'full' },
  { path: 'about', component: AboutPageComponent },
  { path: 'leadership', component: LeadershipPageComponent },
  { path: 'library', component: LibraryPageComponent },
  { path: 'security', component: SecurityPageComponent },
  { path: 'shared', component: SharedPageComponent },
  { path: 'standards', component: StandardsPageComponent },
  { path: '**', redirectTo: 'about' }
];
      

4. Guards

The application includes two guards:

• loading.interceptor.guard.ts
• redirect.guard.ts

Loading Interceptor Guard

Used to manage loader state during API requests or page transitions.

// loading.interceptor.guard.ts
canActivate() {
  this.loader.setLoading(true);
  return true;
}
      

Redirect Guard

Used to redirect invalid or incomplete URLs to valid routes.

// redirect.guard.ts
canActivate() {
  return this.router.navigate(['/about']);
}
      

5. Navigation Flow

User Clicks Navigation
      ▼
NavigationService builds route
      ▼
Angular Router resolves path
      ▼
Guard (if any)
      ▼
PageComponent loads
      ▼
page-content component loads JSON
      ▼
content components render final view
      

6. Nested Component Rendering

Pages use:

• page-content to load page data
• content components to render sections
• right-column for supplemental links
• related-components for cross-navigation

About Page Component
   ▼
page-content
   ▼
One or more content components
   ▼
sidebar + navigation + end-of-post
      

7. Pagination Routing

Pagination routes are used especially in Library and Standards sections.

// Example (not actual code)
library?page=2
standards?page=4
      

8. Summary

The routing system is:

• Simple
• Predictable
• Module-driven
• Scalable

This makes it easy to integrate new pages, categories, or JSON-driven content blocks without modifying app-wide logic.