6.1 Defining and Configuring Routes

HI folks, in this lesson we're going to begin looking at routing. Routing is a familiar concept for single page applications, and is a combination of a URL and a piece of view. Typically, in a modern JavaScript application, we don't want the whole application to reload every time the user wants to view different parts of the application. So routing allows us to update the view of our application, perhaps taking the user to an entirely different part of the application without the browser reloading and losing the current state. So let's think about this for our example application. At the moment, we have some different states for our game. There is the initial start page, where the user enters their name and chooses some game options. Then there is the actual game screen, where the user will play the game. And lastly, there is the end screen, where the player will see the result of the game and can quit or choose to play again. We are controlling access to these different states using simple ng ifs to show or hide the different components. For our needs this is fine, we have a limited number of views to present and a limited number of components we want to navigate between. But as an application grows, using these ng iffs like we are in the example application will quickly become burdensome. For larger applications with many more views and states, we will likely want the more elegant solution with less complexity, and routing can be that solution. So even though we don't strictly need to, we're going to spend the next few lessons implementing routing in the example application. So let's make a start. In larger applications, people will generally create a separate routing module that contains all of the routing logic, we're not going to go that far. A single file containing all of our routes will be more than adequate. So the first step in setting up routing will be for us to define our routes. Let's create a new file in the root of our application called app.routes.ts. We'll only need one import from Angular So we're going to import the routes type from angular/router, but we will also need to import some of our own components, the ones that we would like to route to. These are the component will be routing between in the example application. The app.routes.ts file that we've just created will export the routes that we define. So we're going to export an array of the type routes with the identifier appRoutes. So each root will be an object that we use to define information about the route. One route will be the StartComponent. A route at a minimum will contain a path which is the URL that will be used to match the route and a component which is the component we want to route two when the path is matched. We can also add routes for the game and end components. So we've defined routes for our three main components. Another route we can define is an empty route. This serves as the default route. For us, the start component could be seen as the default component. So let's add a default route that points back to the start component. This route has no path, because it is the default route and serves as the entry point to the application. Which is typically at the route of the app, and not behind a deeper URL. We already have a route that renders the start component. So instead of defining the startComponent as the component we want to route to for the default component, we can just redirect to the /startRoute. The path match option here ensure that this route is only matched if navigating to slash the route URL. One question remaining, at this point, is what happens if someone tries to route to a URL that doesn't exist? To handle this scenario, there is one more route we need to define, a wildcard route. That we can use to redirect people if they try to hit a route that does not exist. For this let's add a new component, a page not found component, let's create one with the CLI. Now we can import this new component into our roots files as well. And then lastly we can add the wildcard route that will match any unspecified URL and redirect to this page not found component. The wildcard route should always be defined last. It's the last route that will be hit if no other routes are matched. One key point, which we don't have to worry about because the CLI automatically added it for us. Way back at the start of the course when we generated the initial application, it's the base href. Let's just open up the index.html file in the root of the app here. And we can see that there is this base element with the href pointing to slash. So this is generally what we would set it to as the route URL for the app. Angular needs this for any routing to work. So if the CLI hadn't added it for us, we would have to add it ourselves manually. Obviously, the CLI did add it for us, so we don't need to do anything here. But you should note this for future applications that you might build. So in this lesson we've learned a little bit about the purpose of routing and we've seen that we can define the routes for our application using a simple array of objects. Where each object represents a single route with a defined path which maps to a component. We saw how to define a default empty route for our application's initial landing page. And we also saw how to define a wildcard route that can be used to route to a page not found component if no other routes are matched. Thanks for watching.