How to Create a Basic Single Page Application Using Angular Router?

This tutorial is adapted from Web Age course聽Introduction to Angular 8 Programming.

In this tutorial, we will develop a very simple single page application (SPA) using the Angular Component Router module. The main goal will be to understand how routing works. We will keep the business logic very simple.

1. Open a command prompt window.

2. Create聽聽C:\LabWork folder.

3. Run this command to create a new project called route-test.

We will develop an SPA that has three pages (views):

The home page. Shown by default.

The news page. Mapped to the “/news” URL.

The about page. Mapped to the “/about” URL.

After we develop this application we will be able to navigate between the pages without reloading the browser.

Each view in SPA is implemented by a separate component. These components can employ child components if needed. We will now create the components for our applications.

1. Change to the root project.

2. Run these commands to create the components.

The shortcut g stands for generate and c for component.

3. Open src/app/home/home.component.html.

4. Change the template like this:

5. Save the file.

6. Open src/app/about/about.component.html.

7. Change the template like this:

8. Save the file.

9. Open src/app/news/news.component.html.

10. Change the template like this:

11. Save the file.

The selectors for these components do not really play any role. We never manually add these components to any template. The router system inserts these components for us based on the URL.

1. Open route-test/src/app/app-routing.module.ts

2. Add these import statements for the component classes.

3. Set up the route table as shown in bold face below.

4. Save changes.

1. Edit \src\app\app.component.html and replace all of its contents with the code below:

The App component will act as the root of the application. It will render HTML content that is shared by all pages in the app.

Note these key aspects of the code:

We use the routerLink attribute directive to define navigational links. Here we are using links like “/news” and “/about”. We will later map these to the corresponding components in a route table.

Use tag to define where the component for the pages should be inserted.

2. Save changes.

3. Edit \src\styles.css

4. Add the following content and save the file:

5. Save changes.

1. Open a command prompt and go to the root folder of the project:

2. Run the following command to compile TypeScript and start the server:

3. Open a browser to http://localhost:4200

4. Verify that the home page is shown by default.

5. Click the News and About links. Make sure that the corresponding pages are shown. Verify that the URL in the browser’s address bar changes as you navigate.

6. Verify that the back button navigation works as expected.

7. Navigate to the About page.

8. Now refresh the browser. You should still see the About page.

Note: This behavior is primarily because the project uses the embedded server and all requests get routed to Angular. If you were using a web server that might first look for a local HTML file, refreshing the URL from the Router may not work and you may get a 404 error.

9. In the command prompt, hit ‘-C‘ to terminate the embedded server.

10. Close all open files.

In this tutorial, we created a single page application with routing.