Now that we have our documents component here and it's working properly, seems like a natural fit will be to now have the ability to link from page to page because you wouldn't want to have an application where you have to tell the user to go and enter a URL string for every new page they want to go into. And the way we can do that is by going to our Master application.

We go to app.component.html. That's going to bring up our navigation bar here. Eventually, say this application were to get absolutely huge and be something with a bunch of different logic items inside of the nav bar, then it would make sense to make a component that is just the nav bar. However, this application is only going to have a few links up there. So I think it's perfectly fine to put it here in the app component.

I'm going to come here and we're going to create a couple links. Working with links in Angular is going to be much different than working with links in HTML. There are some similarities however. It's going to be quite different than you're probably used to. We're going to start off with an a tag. However, if you're used to HTML development then you probably are used to things like having a link that looks like this

and that's what a link would look like. And that is a valid HTML link. However with Angular you get some other kind of secret sauce built into it all because of how the routing system works. So if we did an a tag with an href what it would do is it would actually cause the browser to go to that page but we don't want that. We only want the page contents pulled up and pulled into this router outlet right here.

So I'm going to show you exactly how this will work doing it the wrong way. So let's create a couple links and I'm going to create one that's called Docs and one that is called Home. This home one is just going to be directed to home. And then our docs one is going to be a reference with documents. If I hit save here you can see that we have our two links.

Now watch what happens if I actually click on one of these. So if I click on home you notice how the entire application loaded. So and if I click on Dock's it loaded the entire application refresh the page. And this is not what we want at all. Even though it took us to those pages we've almost kind of turned it into a non Angular app. Part of what makes Angular so cool is the ability to have your entire page rendered like a native single page application where everything happens almost instantly. No page refreshes or anything like that. So what we're going to do is we're going to get rid of these href statements. The angular links, even though they're going to be an a tag, they don't use those href attributes at all. Instead what we're going to do is we're going to work with something called a router link. This router link is spelled router and then a capital L, this follows camel case convention, and then we pass in to our router link whatever the path is. So in this case we want home. And then after that we're simply going to copy and paste this for docs and pass in documents.

And now if I hit save you can see that we still have our links just like we did before but now watch what happens if I click on these. Notice how the entire application doesn't refresh anymore. Now all that happens is I click on one and then the other and then what's happening in the background is these pages are all being called in dynamically so Ajax is taking these, or asynchronous javascript is taking these links and it's sliding them in, that's the way Angular works, it's using our router outlet here and it's saying, okay, you asked for the documents and you're going to bring in the document component and we're going to slide it right into where this router outlet is. And it does all of this without causing the entire site to refresh each time and that's one of the really cool things about Angular, it's something that people love. Say that you have a massive dashboard and you've created like some kind of big data analysis dashboard. It's not really the best user interface if you have charts all over the place and things like that when a user clicks on a link to have the entire page refresh. It would be a lot better to have it like this where the links are simply dynamically calling the content and that's what we have right here.

Now we have the ability to navigate to these. And then the next guide we're going to start giving some hardcoded values in to our documents system so we can start building up that structure.

Resources

• Code at this stage