Angular routing basics - Kevin Chisholm Video

In this video I'll explain the basics of Angular Routing.

Setting up basic routing in your angular application is fairly simple. In this example page I have three routes. There's the Home route that you see here, Products, and About. So as I click each link here, you can see the route here, the /#/ changes the name of the route. Also be aware that I have a default route. So, if I go to the root of the application, it goes to Home. We'll see in a minute how that works, but just know that there is a default route for when there's no route provided.

Also, one thing that's pretty cool about routing in Angular is that you can do something deep linking. So here I have the About route, but I originally went to the root of the application, then went to About. If I copied this link and open up a new tab and paste that link in. I go directly to the About tab, so it's pretty cool that you can have a specific route name there in the url and put it in an email or something like that, and send it to someone and go directly to a specific route.

And then down here, we have a routes array that has an object for each, an element for each route of our routes. So I’ve got three objects here, one for Home, one for Products one for About. And in this case, what you’re doing is you’re setting the path property to equal the string name of the route Home, Products, and About. And you have a component property that points to the component that handles that route. So the user selects the Home path. The Home component handles that route, and when they choose Products, the Products component, and About, and so forth.

But notice that although we only have three routes, there are four objects here. Well that’s because we have a default route. So this first object says when there’s no route provided, when the string is empty, we redirect to Home. And that’s the reason why as we saw earlier, when we go to the base of the application we wind up at the Home route.

So I can change this very easily. I can say well, when there’s no route provided, I want to go to Products. The default route is now Products. So if I go to the root of the application, I’ll wind at Products, which is pretty cool. If I do that again in a different tab you’ll see that we go to Products. So that can easily be changed once again if I wanted to make it to About, I’d change it here, and then if we go to the root we go to About.

If you found this video helpful, you can subscribe to my channel by clicking the red "Subscribe" button right under the video. You can also take a look at my blog, where there are many articles and tutorials about web development.

Thanks very much for watching.