Nov 15, 2016

In the next part of my series on updates, I will show case how to make use of the Router Module in the Angular 2 library so that you can create a Single Page Application, that will improve performance on your application. Remember that Angular 2 is constantly being updated so when attempting to create this type of application it might have changed since writing this blog.

One of the key strengths of Angular 2 is in its ability to create Single Page Applications (SPA), by using this approach you are creating a web application that only requires a single HTML page to be downloaded. More so SPAs give you better performance as it only swaps out or updates certain parts of that HTML page, reducing the need to unload and load in new HTML pages.

To make use of this functionality, Angular 2 gives us a class called the Router. By injecting the router into your application you will have the ability to handle navigation through the use of Routes and specify where you want the content to be rendered by specifying an outlet.

Let’s look at the code involved in implementing the router in an application, with the following screenshots showing the code involved. I am using the boilerplate files that can be found on the quick start guide of Angular 2, please click here to see the steps involved.

With the basic boilerplates of your angular application in place, you can now follow along with this blog if you want to implement a SPA yourself. First step to creating a single page application is to reference the needed classes, the class we are interested in is called the RouterModule and should be imported into the app.module file.

Note lines 4 and line 7, they contain the needed code. These changes include the reference to the RouterModule class and adding the same class to the imports array so I can reuse it. We are not done with this file yet as we need to specify routes as well, more on that later.

The main goal of this application is to have a single page load all the components for us, so what we need to create next is all the components we want the user to navigate to. In my demo I will create two additional components along with the current app component, the first showing a list of tasks and the second showing a list of students. I will include the coding for these components if you want to see the same result as what I do.

The student-list component looks like this:

The task-list component looks like this:

Both of these components create a list of items that it will display, the student list contains an object array and the task list contains a string array. The items listed in the previously mentioned components are being displayed on the template by using an ngFor loop.

With the needed components created, we can now create a list of routes that will tell our application how to navigate to them if the user wants to see either the student or task list. The easiest way to create these routes is within the imports array property that can be found in the app.module file.

When we create routes in Angular 2, there are 2 attributes that you have to define. The first attribute is called path, and this is the URL that will either be entered or shown. This path attribute is how a route get activated and called. Secondly we have the Component attribute, this works in conjunction with the path property because when a specified route gets activated it needs a component to render. For example, let’s say we have the following route:

{Path: “demo” Component: DemoComponent}

When the user appends demo to the base URL of our application the route will be activated and the component that will be called with the route activation is contained in the DemoComponent class. Now let’s look to create our needed routes in our application.

Note that we first import the needed component that must be included in the routes we want to use, in my case that is the TaskListComponent (Line 5) and the StudentListCopmonent (Line 6). We then modify the imports statement to include all the needed routes for our application by using the forRoot method on the RouterModule Class, they are as follow:

• Line 10 – Path of tasks, Component of TaskListComponent; This will navigate to the tasks list.
• Line 11 – Path of students, Component of StudentListComponent; This will navigate to the student list
• Line 12 – Empty Path, Redirect to the students route, should match the URL fully; This will show the users the student list if now URL is provided

Make sure to include all the components in the declarations array so that the applications knows about the custom components when loaded.

With the routes out of the way we can now start focusing on telling our application which component should be used as the root component, in my case that will be the appComponent. To specify the root component we can use the router-outlet html tag inside of the chosen component’s template. When the user then navigates to one of the routes we specified it will replace the router-outlet tag with the selected components template.

You can see the router-outlet tag have been added to line 5 of the template in the appComponent class. In addition to specifying an outlet, you might want to give your users navigation links to click on so that they can jump in between the two lists. To create navigation links for the user in a SPA you can use the RouterLink attribute in an anchor tag.

Take note of line 5 and 6, these lines contain an anchor tag in each where the only difference is in the value of the RouterLink attribute and inner text. Line 5 calling on the route of tasks and line 6 calling on the route of students.

Finally we just need to add the Base html tag to our index page and we will have our SPA up and running. The Base HTML tag will allow us to make our URLs look the same as server-side URLs, we add this to the top of our head element.

With all this in place you end up with the following result: