Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Angular r 3
  • Overview
  • Transcript

3.2 Host the Routes

So far, we have configured our routes and added them to the bootstrap function. Now we just have to configure our app component to display these routes. In this lesson I'll show you how to use a directive to do so.

3.2 Host the Routes

Hello, everyone. I am Reggie Dawson. Welcome to the Angular 2 Routing course for Tuts+. In this video, we will finish setting up our routing and preview our app. So far, we have configured our routes and added them to our bootstrap function. Now, we just need to configure our app component to host our routes. If we go to app.component.ts, we will first import our router directives. We have seen this before when a component needs to use the router link. This component will use router link and another directive of Angular 2 router outlet. After that we will remove the template and add a back tick to make it a template string. This will allow us to create a multiline template. First we will add a div for our bootstrap nav bar. Now, this inverse nav bar will appear on every page since it is part of the template. Then inside the nav bar, we will add our brand. Now this can be text or an image and it represents the branding of your app. Then we add an unordered list. Inside, we'll add our links for a nav bar. In our links, instead of a URL to navigate to, we have router link. This is how we navigate to a route under user interaction. Here we are set to navigate to the home route when we click this button. We can also write the router link in another form inside of an array. We normally do this when we need to supply more information to our route. We will see this in a later video. Then we also have a router link active directive which will apply the menu class to the link when the route is active. We are using this to display a visual queue as to what page we are on. Then we will add another router link that navigates to the about page. Then we will add the router outlet directive. This is why the components do not need a selector. When they are loaded to routing, this directive will host the components. While the rest of this template will appear static on each page, the router outlet will change based on what route is navigated to. The last thing we need to do in this file is add the router directives. After that, the last thing we need to do is add a CSS rule to the style.css file. This rule is for the class that will be applied when the router tests to the router link is active. The background of the link will be the color white, after that routing is configured for our app. Go ahead and save the project and run NMP start in the project folder. If everything was done correctly, the app should compile and then launch from a web browser. If you notice, the home link background is shaded in white. This is because this is the active route. Then if we click on the About button, or the button in the jumbotron, we should go to the about page. After that, let's type a nonexistent route into the address bar. When we do that we should get an error page. We now have routing working in our app, but there is so much more we can do with it. In the next video, we will build a service that will provide data to the feature area we are about to build.

Back to the top