3.1 Create the Routes

Hello, everyone. I am Reggie Dawson. Welcome to the Angular 2 Routing course for Tuts+. Now that we have created our app and built the components that will make up the user interface, now it is time to add our routing. Understand that it is possible to build a full app in Angular 2 without routing. So if we can do this, why do we need routing at all? The main reason is that if we don't use routing, our app will depend solely on navigation through program control. We will have to switch out components based on user interaction such as when they click on something. With routing, we will be able to navigate by switching URLs. All components will map to a route, allowing us to easily move around our app. Now if you have watched any of my previous courses on Angular 2, the router has changed since then. The original version of the router has been deprecated in favor of the new component router. They aren't that much different in how we configure them, so it should be easy to pick up if you have used the deprecated version. First, in order to make routing work, we need to add a base href in the head of our index.html file. Now previously, we would configure our routes inside of the component that hosts them. In this case, this would mean that we add our route configs to our app.component file. With a new router it is suggested that we create our route configuration in a separate file. Let's create a file called app.routes.ts in the root of the app folder. The first thing we will add to this file are the imports. First, we grab Provide Router or Router Config from the Angular router. Then I import the About Error and Home Components from the Pages folder. We need to import these so that we can route to these components. The next thing we will do is add our route config to hold our routes. Here we are using accounts declaration. This is one of the ways we can declare a variable in type script and it represents a value that cannot be changed. In this case, we are using it to hold our router config. Now the first thing we will add is a redirect. In a moment, we will add a wildcard route for our error page. This by itself will cause our app to start from the error page. The reason is that when our app starts, it doesn't have a route. Therefore we need to specify a component as the default route. We could easily add the component we want to start our app to the empty route, but the suggested way to handle this is with a redirect. Now the redirect has to come first or it will not work properly. First we have our path, which is an empty route. This is the route our app will launch with. Then we have our redirect which will change our path to home when it encounters an empty route. After that, we have our path match. I won't go into much detail except to say that this causes the empty route to match the redirect. Then we have our route that points at the AboutComponent. The path is set to about, which is what we will see in the address bar when we navigate to this route. The component that will be navigated to is the AboutComponent. After that we have the HomeComponent. The path is home and the component to launch is the HomeComponent. This is the route that we will navigate to from the redirect. Then the last route we will add is a wildcard route. This will match any routes that we have defined. This is also why we added the redirect. If we didn't, our app would start at this route since we start from a route that is not defined, an empty route. After adding the redirect, any route that we type that doesn't exist will get our error page. Then we export another const using the provide router method from Angular router. We use the routes that we configure with this method. Once we do that our routes are finished. The last thing we have to do is add routing to our app. Go to the main.ts file. The first thing we will do in this file is import the myRouterProviders from my app routes file that we created. Then we have to add it to our bootstrap function. Now we have to add the routes here in our bootstrap. Adding them here has the benefit of making the routes available to all of the components in our app. Once we do that, we are finished setting up our routes. In the next video, we will finish up our routing configuration and preview the app.