11 2 2 Routing Explained

Key Concepts

Routing in web development involves several key concepts:

• Introduction to Routing
• Defining Routes
• Route Parameters
• Route Guards
• Nested Routes
• Lazy Loading

1. Introduction to Routing

Routing is the process of determining how an application responds to a client request to a particular endpoint, which is a URI (or path) and a specific HTTP request method (GET, POST, etc.).

2. Defining Routes

Routes are defined in a routing configuration file or directly in the application code. Each route maps a URL path to a specific component or function.

Example:

const routes = [
    { path: '/home', component: HomeComponent },
    { path: '/about', component: AboutComponent },
    { path: '/contact', component: ContactComponent }
];
    

Analogy: Think of routes as signposts that guide users to different sections of a website.

3. Route Parameters

Route parameters allow dynamic segments in the URL that can be accessed in the component. This is useful for creating dynamic routes like user profiles.

Example:

const routes = [
    { path: '/user/:id', component: UserProfileComponent }
];
    

Analogy: Think of route parameters as customizable keys that unlock different content based on the input.

4. Route Guards

Route guards are used to control access to certain routes. They can be used to prevent unauthorized access or to load data before rendering a component.

Example:

const routes = [
    { path: '/admin', component: AdminComponent, canActivate: [AuthGuard] }
];
    

Analogy: Think of route guards as bouncers at a club, ensuring only authorized users can enter certain areas.

5. Nested Routes

Nested routes allow for more complex routing structures where child routes are nested within parent routes. This is useful for creating hierarchical views.

Example:

const routes = [
    { path: '/products', component: ProductsComponent, children: [
        { path: '', component: ProductListComponent },
        { path: ':id', component: ProductDetailComponent }
    ]}
];
    

Analogy: Think of nested routes as a family tree, where each branch leads to a different part of the family.

6. Lazy Loading

Lazy loading is a design pattern to defer initialization of a resource until it is needed. In routing, it allows for loading components only when the route is activated.

Example:

const routes = [
    { path: '/lazy', loadChildren: () => import('./lazy.module').then(m => m.LazyModule) }
];
    

Analogy: Think of lazy loading as a just-in-time delivery service, where items are only delivered when you need them.