Basic concepts of Routing and Navigation in Web Applications with Angular

creating our router

When you develop an application with Angular, you are creating a SPA (Single Page Application). This means that the server sends us an empty HTML file, and then the content of the application is rendered through JavaScript. If you want to add different pages, you must use the Angular router to control which components are displayed according to the route in the browser.

To organize the paths and the different sections that will be shown in your application, start by establishing a constant in the file called app.module.ts, where you'll detail an array of different routes. Each item in this array indicates a specific path and the matching section or component that should appear when that path is visited in the browser. This method clearly lays out the navigation structure of your application, indicating what users will see at each step.

import { Routes } from "@angular/router";

const appRoutes: Routes = [
  { path: "", component: AppComponent },
  { path: "users", component: UsersComponent },
];

After you've created your list of paths or routes, bring it into the app.module.ts file. Here, you'll use a tool called RouterModule and a method named 'forRoot' to apply your list of routes as a guiding parameter. This step helps in effortlessly steering through your application, showing users the right sections or components depending on the path they are on at any given time.

import {
    Routes,
    RouterModule }
from "@angular/router";

const appRoutes: Routes = [
  { path: "", component: AppComponent },
  { path: "users", component: UsersComponent },
];

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        RouterModule.forRoot(appRoutes)
    ],
    providers: [],
    bootstrap: [AppComponent]
});
export class AppModule {}

To get your routing system up and running, you need to insert a special instruction called the 'router-outlet directive' from Angular in the area where you'd like the matching components for each path to appear. This instruction looks at the current browser's path and alters the displayed component in that area based on the path setup you created earlier. In my case, I'll be adding this instruction into the main viewing area of my principal component, which is found in the file named app.component.html.

<router-outlet></router-outlet>

When someone visits the main address of your website (like "mydomain.com") without adding any extra path, they will see the main, or 'HomeComponent', section. If they specifically go to "mydomain.com/users", they will instead see the 'UsersComponent' section. Basically, the router looks at the part of the web address after the domain name to decide which part of your site to show them.

Navigating with our router

When you want to create clickable links that lead from one section to another on your website, use Angular's 'routerLink' feature instead of the regular 'href' attribute that you would use in an HTML tag. This feature lets users click through to different parts of the site without causing the whole page to reload each time, keeping the navigation smooth and fast.

<a routerLink="/users">Go to Users</a>

navigate through events

To wrap up this article, we'll explore how to move to a different section by triggering an event, like clicking a button. You'll need to set up an 'event binding' on the button, which is a way to connect the button click to a function that you've defined in the respective component's script file (so if your button is located in the 'home.component.html' file, the function it triggers would be found in the 'home.component.ts' file).

<button (click)="onNavigate()">
    Go to other page
</button>

In this file, you'll also need to incorporate the Router module within the component's constructor. Doing this allows you to make use of the Router's functions within the component itself.

After you've incorporated the Router module, you set up a function that activates when the event happens (like a click). In this function, you use the 'navigate' method from the Router module and specify the path you want to head to, formatted as an array. This setup allows you to steer the navigation in your web app smoothly, showing users different sections depending on which path they are on at that moment.

import { Routes } from "@angular/router";

...

export class AppComponent {
    constructor(private router: Router){}

    onNavigate(){
        this.router.navigate(['/servers']);
    }
}

We've come to the end, but really, we've only just scratched the surface when it comes to using Angular's router for navigation! There's so much more to explore and learn about managing your web application's navigation and showcasing different sections to users depending on the paths they visit. Keep an eye out for future posts where we'll dig even deeper into all the functionalities the Angular router can provide!

Thanks a lot for reading.