Search⌘ K
AI Features
Home
Courses
The Angular Masterclass

Routing and Navigation

Explore the fundamentals of Angular routing and navigation, including route setup, navigation techniques, route guards, and asynchronous routing. This lesson guides you through enhancing your client contacts manager app by adding interactive navigation to improve user experience.

We'll cover the following...

Chapter learning outcomes

So far, we’ve looked at what Angular is, how to get started, and how to use the Angular CLI to help us build our first Angular application. However, the application we’ve built so far doesn’t have a lot of functionality. We will start adding more functionality to our application over the next couple of chapters in order to make it more interactive.

In this chapter, we will start by looking at Routing and Navigation in Angular and how we can use the features that Angular provides for routing to create complex and sophisticated navigation systems to support our application’s needs.

In this chapter, we will cover the following topics:

  • What are the routes?
  • How routes work in Angular
  • How to set up routes for your Angular application
  • How to add navigation to an Angular application
  • What route guards are and how to use them
  • What asynchronous routing is and what benefits it can bring to your Angular application

Client contacts manager application

We will be expanding on our Client Contacts Manager application by adding navigation to it so that a user can navigate between the sections of the application.

📝 Note: Here is the preview of what we will create in this chapter. Press the RUN button to compile and serve the application. Once the app compiles, you can see its output in the Output tab or by clicking on the URL given after Your app can be found at.

import { AppPage } from './app.po';
import { browser, logging } from 'protractor';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getTitleText()).toEqual('Client-Contacts-Manager-Angular app is running!');
  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
});
Client Contacts Manager Application with different routes

You should see the following in the output: