Setting the base href and configuring routes - lordoftheflies/angular-essential-training GitHub Wiki

Angular has a module bundle named router for handling client side routing. To make use of routing in your Angular application, you need to do a handful of things. The first of which is making sure you have a base href in the DOM. The router makes use of the browser's history push state for navigation and URL interaction. This essentially allows for URLs to be used in a client app without actually triggering a new remote request. The client code can then work against those state changes and make decisions of how to route. To support push state, you need to have a base href element tag, as a child of the head tag in your HTML document. In the index dot HTML file in this project, we can see that we have a base tag set with the href attribute to a forward slash. This came set when this project was created with the Angular CLI, one of the benefits of using the CLI. Okay, the next thing we need to do is create some routes. Let's do that in a new file, named app dot routing dot ts, in the app folder. We create a new variable named app routes and set that equal to an array. Now we will not be needing to use this variable in other files, so we don't need to export it here. We need to load this up with route objects. Why don't we use a bit of TypeScript here to set the type of this app routes object. That way we can get the benefit of the code editor and transpile time checking of the objects we put into this array. Angular exports a type named routes, that is an array of route objects. So let's at an import statement for that from the Angular router scoped package. Then we can specify the type of the app routes variable by putting colon, space routes, after the variable name, but before the equals. Okay, the application has a list view of media items and a media item form. So let's create routes for each of those, as well as a default route. A route object is expected to have a path property, so we add a new object literal to the array and give it a path property. This represents the URL path segment to match on, the first one will be for the media item form. So let's use the URL add, for the value of path, we set it to a String literal of add, note that there's no leading slash here. The router handles building the URL, so you can use relative and absolute paths when navigating between application views. Then we want to set up the component to use when this path has a match, for the add, we want to use the media item form component. The route object supports a component property that expects a type. So we need to import the media item form component type. And then we can add a component property onto the object and set that to media item form component. Let's add a route for the media item list, by medium type. We create a second object literal in the array, and for the path value on this, let's user route parameter. A route parameter can be specified by a colon, followed by a term, so we can set path to a String literal of colon medium. The router will capture the URL segment and put it in a route parameter with the same term name that can then be accessed from within your components via some constructor injection. Now the order of routes in the configuration is important. The router will take a requested URL segment and start walking through the list, and the first match it finds will win. This is a common architecture for routers, so if this route was in the array ahead of the add route, a URL segment of add, would end up matching on this medium parameter, and would never reach the intended add route. So order matters, for the component property, we want to set that to media item list component, so we need to import that. And then we can set the component property. Okay, let's add a default route. We create another object literal in the array, and for this one, we set the path to an empty String. Now for our default route, we want to send the user to the media item list and show all items. We already have a route to handle showing by medium, instead of routing to a component, let's set this route up to redirect to our existing route for the media item list component. There is a route property named redirect to, that can be added to the object. It expects a String that represents the URL segment to redirect to, so we can set that to all. There's one final property we need to add for the redirect, and that is path match, we set this to the String all. This will tell the router that the path property we are providing, will represent the full match, not just a part of it. In an upcoming video, I will cover how to make use of the route parameter.