Routing in Angular Applications

[reboottime]

Overview

This article discusses the routing essentials of large Angular applications, with content organized in two parts:

• Part I: URL Design for Single Page Applications

  • General guideline on design SPA URLs
  • An Example about SPA URL design

• Part II: Common Routing Requirements

  • URL-Driven Code organization and code splitting
  • Authentication / RBAC on URL
    • Integrate Ngrx and store authenticated user data at root level, reducing the need for unnecessary HTTP requests to fetch the current user.
  • PART III: Code Organization and Routing

References

1. lazy loading (lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.)
2. Functional Guards ( replace deprecated CanActivate interface)
3. Angular application folder structure guideline

[reboottime]

PART 1: URL Design Tips

• Keep URLs Simple and Readable:

  • Semantic URLs:
    • Use clear, descriptive paths that reflect the content or functionality of the page.
    • Incorporate keywords that are relevant to the content of the page.
  • Benefits: This not only helps users understand what the page is about but also improves SEO.
  • hardship: ( This is hard because sometimes, the topic comes from Backend Data, for example, books/1223, instead of books/system-dynamics)

• Prefer not using #! if possible, as #! is not ideal for SEO

• Consistent Structure:

  • Maintain a consistent structure across your URLs.
  • Benefits: This makes it easier for users to predict the URL for a certain page and aids in maintaining a clean site architecture.

• Use Redirects Appropriately: Users may have bookmarked outdated URLs, leading them to visit legacy URLs directly from their browser bookmarks. By implementing redirects for these legacy URLs, we recover users from mistake.

An Example about SPA URL design

In this example, we are using the "orders" resource as a demonstration for designing URLs in an Angular Single Page Application (SPA).

• Order List Page: /orders
• Page for Viewing Order Details: /orders/detail/:order-id
• Page for Editing Order Information: /orders/edit/:order-id
• Page for Adding a New Order: /orders/create

[reboottime]

Part II: Common functional requirements on frontend routing

Authentication / RBAC on URL

In single page applications, route protection plays a critical role in ensuring secure access to different parts of the application. Let's consider the following two senariaos:

1. A user attempts to access a specific URL within our Angular app. If the user isn't authenticated, the application's security mechanism kicks in, preventing unauthorized access.
2. An invited external system user attempting to access an URL with sensitive data, for example, accessing organization's billing summaries.

For the above two cases,

• The first case illustrates the need for authentication protection in our single page application.
• The second case illustrates the need of role-based access control on URL depending on the current user’s role. This also involves fulfilling a functional requirement, wherein module registration and routing occur conditionally based on user roles.

URL redirection

• Set up a redirection to the initial sub-page when accessing the root path of the module in Angular application routing.
• Implement URL redirection for legacy URLs with user engagement, ensuring a seamless transition from old to new URLs in the project.

Code Lazy Loading through URL Navigation on demand

A growing Single Page Application can be unwieldy. Without code splitting, the initial 'main.ts' can be overly large, slowing down the initial screen rendering.

Splitting code on based on routing could significantly reduce bundle size then reduces first screen rendering time.

Sample Code

• URL redirection
• Code splitting and lazy loading based on URL module
• Role based access control on routing

[reboottime]

PART III: Code Organization and Routing

In single page application, features are best represented by distinct routing URL. Organizing features using modular approach allows developers to conveniently relocate code.

As it brings following benefits:

• Clear Structure: Easily identify related components within feature areas.
• Efficient Routing: Seamlessly route feature modules both eagerly and lazily.
• Development Clarity: Clearly assign responsibilities and facilitate collaboration across teams.
• Isolation for Testing: Simplify testing by isolating feature modules.

Sample Code: Organize Settings module

• Organize setting module
• Plug Settings Module to App Module

[reboottime]

References

• Angular Style Guide: Feature Modules
• Lazy Loading feature modules