What is the routing system, what elements does it contain and how to configure the first routes in an Angular application.
In this article we are going to start with a series of installments of the Angular Manual in which we are going to address the routing system, one of the main actors of Angular applications.
The routing system is not a trivial matter, since it involves many classes, objects, components and configurations. In fact, it’s something quite sophisticated, since it has dozens of configurations to carry out routes of all kinds. However, starting to work with it in a first example is not that complicated, as you will see below.
What is a routing system
Thinking of those people who start their foray into “SPA” (Single Page Application) with Angular, we will begin by clarifying what a routing system is and why we need it.
On any website you usually have several addresses that are delivered by a server, to display different content on the site. We can have a cover page, a product page, a contact page, etc. Each of those pages is presented in a different route on the website, which could be like example.com, example.com/products/index.html, example.com/contact.html, etc. Each of those routes could have an HTML file, which is served with the content of that section. So far we are sure that readers will not have any problem, since that is how practically all websites work, in general terms.
However, in Angular applications we only have one page, the index.html and all the action takes place within that page. In Angular, the common thing is that the index only has one component in its BODY and really all the action will take place in that component. All the “pages” (screens or views) of the website will be displayed on that index, changing the component that is being displayed at each moment.
Note: That’s basically the concept of a Single Page Application, which you can learn more about in a generic SPA article, which further explains this common way of developing applications with Javascript.
To facilitate navigation through a site where there is really only one index, there is what we call the routing system, which has the objective of allowing internal routes to exist on the website, responding to “virtual” routes such as those that exist in traditional sites.
We call these routes “virtual” because there really is only one “index.html”, there will not be a “contact.html” or “products.html” file for each route, but it will really always be the “index.html” to be delivered to the browser.
The routing system is in charge of recognizing which route the user wants to display, presenting the correct screen at all times. This is useful for several reasons, including:
- Allows the application to respond to internal routes. In other words, it is not necessary to always enter the main screen of the application and navigate to the screen that we really want to see.
- It allows the user to use the browsing history, going back and forward with the browser to return to one of the application screens they were viewing before.
Angular’s routing system
Angular, like a good framework, has a powerful routing system to facilitate all the operations of single page applications. It is made up of several actors who have to work together to achieve the objectives set.
We will begin by explaining the routing system by summarizing the basic elements that are part of it and that are necessary to start working.
- The routing system module: called RouterModule.
- Application routes: it is an array with a list of routes that our application will support.
- Navigation links: they are HTML links in which we will include a directive to indicate that they must work using the routing system.
- Container: where to place the screens of each route. Each screen will be represented by a component.
Create our first application with routes
Now that we are clear about what the routing system is and we know what main elements we are going to need to put it into operation, we are going to create a kind of recipe to be able to create an application, from scratch, in which we can incorporate simple routes.
Note: To start this lab we assume that you have an empty application, in which we only have the main module (app.module.ts) and the main component “app.component.js”.
1.- Import the routing system code
In our main module we have to do the corresponding imports.
You should include RouterModule and Routes, which we get from the “@angular/router” library. The code will be like this:
import { Routes, RouterModule } from ‘@angular/router’;
RouterModule is the module where the routing system is, therefore it contains the code of the routing system itself.
Routes is a declaration of a type, which corresponds to an array of Route objects. Route objects are declared through an interface in the routing system. This interface is used so that in the declaration of your routes you place only those values that are really possible to place. If you don’t, the TypeScript compiler will help you by displaying the corresponding errors at development time.
Note: You should be waiting for us to put the RouterModule in the decorator imports of the main module, but to do this we still have an intermediate step to do.
2.- Create the list of routes available in the application
In this step we have to create an array of the routes that we want to generate in our application. We will use the declaration of the Routes type, which we have said is an array of Route objects.
Each Route object in the array has a set of fields to define the route, defined by the Route interface, and it usually has at least one “path” and one component to represent on that route.
The code you will produce will look something like this.
const routes: Routes = ;
You can also put that code in the main module, although nothing prevents you from organizing it better and putting it in a separate file, exporting the constant “routes” (the array) and then importing from the main module.
As you can see, paths (path property) are defined with strings. The empty string “” is the home of our application (URL like example.com). The “contact” string corresponds to the path “https://webdevelopment.com/contact” (URL as example.com/contact).
Then the component that should be displayed for each route is indicated (component property). We can consider these components as the screens of the application. We will have one per route, so when such a route is accessed, Angular will display that component, and remove the previous component that was being displayed.
Note: obviously this component must be part of the module or another imported module, that is, the component that represents the route must be known to be able to be used, like any other component in general. Since you already know how to create components, we believe that you will not need many explanations. But generating those components is as simple as running the CLI commands: “ng gc home” and “ng gc contact”. If all went well, those components will have been created in the main module and added in the module imports and in the decorator, in the “declarations” array. Of course, you can create those components in the module that suits you best.
3.- Declare the routing system in the “imports” of the @NgModule decorator
Now you have to edit the decorator of the main module @NgModule, where you will have to place in the “imports” array the declaration that you are going to use Angular’s routing system.
We need to point to RouterModule, but in that imports it needs the routes configuration, created in the Routes array from the previous step. At the moment, we load this configuration through a forRoot() method in which we pass the array of routes as a parameter.
It looks better with the code. This is the complete decorator, but you have to pay special attention to the “imports” array.
@NgModule({ declarations: , imports: , providers: , bootstrap: })
With this we have finished the work on the main module. But we still have to implement the view in the main component to generate the links to the routes and the container where the components have to be displayed.
4.- Define the template of the main component
We start work on the main component. In this component we have to put some code in the view, file “app.component.html”.
The route browser is created in the template, indicating the “routerLink” directive in the links, with the value of each route.
There cannot be any link generated that does not have its correspondence in the routing system. Note that the links begin with “/” to make them absolute to the root of the domain.
Finally you must place a container called “router-outlet” to define the space where the components are going to be injected. It is as simple as placing this label defined by the routing system module.
Note: Although it looks like a component, “router-outlet” is a directive, since its function is to manipulate the DOM to inject one component or another upon a route change.
That’s it with that. Now if you open your app you should see the routes working.
Common problems with the routing system
What we have done so far is little, so there shouldn’t be many problems with our example, but let’s see a couple of possible errors that we can find.
Place a link to a non-existent route
If we make a mistake when writing the route in a link, we will get an error message when clicking on that link.
For example we write “contato” instead of “contact” in the route.
Contact |
This is the error we are going to find: Error: Cannot match any routes. URL Segment: ‘contact’
Place a non-existent or inaccessible component in the module
Until now the routes were associated with a component. It may happen that in the declaration of the Routes array you indicate a component that does not exist, either because you have misspelled the component’s class name, or because you are trying to use a component that is not in this module or that is not imported by this module.
For example, we can put the name of a component that does not exist as a route:
{ path: ”, component: HComponent },
In this case the editor will probably alert you to the error by pointing it out with a red line, but if you don’t see it, the TypeScript compiler will alert you. The message of…
Facebook Comments
Disqus