Angular 15/16 Free Course #2 - Add Routing & Multiple Pages

Built and tested with Angular 15 and Angular 16

In this free step by step Angular course we'll be covering how to implement routing, authentication, registration and CRUD functionality in Angular.

Other parts available in this Angular course:

• Part 1 - Create Base Project Structure
• Part 2 - Add Routing & Multiple Pages
• Part 3 - Login Form, Authentication & Route Guard
• Part 4 - Registration Form & Service Methods
• Part 5 - Alerts & Home Page
• Part 6 - User Management (CRUD) Section
• Part 7 - Migrate to Standalone Components and Functional Interceptors
• Part 8 - Dockerize App with Nginx

Angular Tutorial Part 2

In part 2 of this Angular tutorial series we're going to add multiple pages to our app and enable navigation between them with routing.

Code on GitHub

The complete source code for this part of the tutorial is available on GitHub at https://github.com/cornflourblue/angular-16-tutorial in the part-2 folder. If you haven't completed Part 1 (Create Base Project Structure) but want to follow the steps in this part of the course you can start with the code in the part-1 folder of the GitHub repo.

Tutorial Steps

1. Create Page Components
2. Add Components to App Module
3. Configure App Routing
4. Add App Routing Module to App Module
5. Add Router Outlet and Navigation to App Component
6. Start Angular Application!

Create Page Components

The Angular app will contain three pages - Home, Login and Register. For now each of the page components will just display a title so we can test navigating between them.

An Angular component is a class that contains the logic to control a piece of the UI. A class becomes an Angular component when it is decorated with the @Component decorator. For more info on Angular components see https://angular.io/guide/architecture-components.

Home Page Component & Template

Create a home folder inside the app folder and create a file named home.component.html inside the home folder, this is the home component template. Add the following HTML code to the home component template:

<h1>Home Page</h1>

Create a file named home.component.ts inside the home folder, this is the home component. Add the following TypeScript code to the home component:

import { Component } from '@angular/core';

@Component({ templateUrl: 'home.component.html' })
export class HomeComponent { }

Create a file named index.ts inside the home folder, this is a barrel file that re-exports components from the home folder so they can be imported in other files using only the folder path (e.g. './home') instead of the full path to the component (e.g. './home/home.component'). For more info on TypeScript barrel files see https://basarat.gitbook.io/typescript/main-1/barrel.

Add the following TypeScript code to the barrel file:

export * from './home.component';

Login Page Component & Template

Create an account folder inside the app folder.

Create a file named login.component.html inside the account folder, this is the login component template. Add the following HTML code to the login component template:

<h1>Login Page</h1>

Create a file named login.component.ts inside the account folder, this is the login component. Add the following TypeScript code to the login component:

import { Component } from '@angular/core';

@Component({ templateUrl: 'login.component.html' })
export class LoginComponent { }

Register Page Component & Template

Create a file named register.component.html inside the account folder, this is the register component template. Add the following HTML code to the register component template:

<h1>Register Page</h1>

Create a file named register.component.ts inside the account folder, this is the register component. Add the following TypeScript code to the register component:

import { Component } from '@angular/core';

@Component({ templateUrl: 'register.component.html' })
export class RegisterComponent { }

Create a file named index.ts inside the account folder, this is a TypeScript barrel file. Add the following TypeScript code to the barrel file:

export * from './login.component';
export * from './register.component';

Add Components to App Module

Open the App Module (/src/app/app.module.ts) in VS Code and add the page components to the declarations array, this will make the page components available to the other components in the App Module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HomeComponent } from './home';
import { LoginComponent, RegisterComponent } from './account';

@NgModule({
    imports: [BrowserModule],
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        RegisterComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Configure App Routing Module

Create a file named app-routing.module.ts inside the app folder, this is the app routing module.

Routing for the Angular app is configured as an array of Routes, each component is mapped to a path so the Angular Router knows which component to display based on the URL in the browser address bar.

The Routes array is passed to the RouterModule.forRoot() method which creates a routing module with all of the app routes configured, and also includes all of the Angular Router providers and directives such as the <router-outlet></router-outlet> directive that we'll be using shortly. For more information on Angular Routing and Navigation see https://angular.io/guide/router.

Add the following TypeScript to the app routing module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home';
import { LoginComponent, RegisterComponent } from './account';

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'account/login', component: LoginComponent },
    { path: 'account/register', component: RegisterComponent },

    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Add App Routing Module to App Module

Open the App Module (/src/app/app.module.ts) in VS Code and add the app routing module (AppRoutingModule) to the imports array, this will make the Angular Router providers and directives available to the other components in the App Module.

The updated app.module.ts should look like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home';
import { LoginComponent, RegisterComponent } from './account';

@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        RegisterComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Add Router Outlet and Navigation to App Component

Open the app component template (/src/app/app.component.html) in VS Code and replace the <h1>Hello Angular!</h1> message with the below HTML code.

The app component template includes a main navigation that will be displayed at the top of the page, and a main content area that will display the page component that is mapped to the current path in the browser address bar.

The routerLink Angular directive enables navigation between different routes, and the <router-outlet></router-outlet> Angular directive displays the component for the current route. For more information on Angular Routing and Navigation see https://angular.io/guide/router.

This is how the updated app component template should look:

<!-- nav -->
<nav class="navbar navbar-expand navbar-dark bg-dark px-3">
    <div class="navbar-nav">
        <a class="nav-item nav-link" routerLink="/">Home</a>
        <a class="nav-item nav-link" routerLink="/account/login">Login</a>
        <a class="nav-item nav-link" routerLink="/account/register">Register</a>
    </div>
</nav>

<!-- main app container -->
<div class="container">
    <router-outlet></router-outlet>
</div>

Start Angular Application!

Run the command npm start from the project root folder (where the package.json is located) to start the Angular application, then open a browser tab to the URL http://localhost:4200.

The command output should look something like this:

PS C:\Projects\angular-tutorial> npm start

> [email protected] start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   1.71 MB |
polyfills.js          | polyfills     | 314.29 kB |
styles.css, styles.js | styles        | 209.42 kB |
runtime.js            | runtime       |   6.54 kB |
main.js               | main          |   3.87 kB |

                      | Initial Total |   2.23 MB

Build at: 2023-04-28T02:58:02.970Z - Hash: 64aa2bde5f20d544 - Time: 20871ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.