Linking Routes with LinkTo

[00:00:00]
>> Mike North: So the next thing I wanna do is deal with the idea of a link. So who can tell me what happens if I create just an A tag the way you would create a link in static HTML? If I were to create that and click on that, what am I telling a browser to do,

[00:00:20]
>> Mike North: In static HTML land?
>> Speaker 2: Navigate.
>> Mike North: Navigate, that's a full page load, a full document request that you make to another page. And that's not what we want in a single page app. We want a native-like experience. The whole point of a single page app is you load once at the beginning and then we create the illusion of page loads by tearing down some HTML and replacing it with some other stuff.

[00:00:48]
And we get this nice opportunity to have a loading spinner or something like that while we wait to go from point A to point B. So we can't just have a regular link like we would have if we were using HTML with no Java Script, multiple very static pages.

[00:01:06]
So Amber gives us a tool for this and what we're gonna do as an example for a link is hook up this logout button that's in, if you go to slash teams and look at the bottom of the sidebar in the chat UI, here is this log out button and currently clicking it does nothing.

[00:01:26]
But it's pretty reasonable to assume that if you log out maybe one should find themselves at the log in screen, right? They're not authenticated anymore, they sorta have been exited out of the app. So,
>> Mike North: Let's make this change. We're going to go to app/templates/components, and the team-sidebar.

[00:01:55]
That's where this button exists, and we're gonna see if we can find it at the bottom. There it is, Logout, and it's a button so we're gonna change this. We don't wanna alter the the resultant HTML, but we're gonna change this so that it uses Ember's routing mechanism.

[00:02:13]
And we'll do this by changing the button to a component that comes with Ember for free.
>> Mike North: And it's called link two, and if we were to save this, we've got problems and the error is telling us we must provide at least one of the following. Route model or models or a query.

[00:02:39]
So this is telling us that, okay, you've attempted to create a link, but you haven't told me what the destination is, it needs more information. So we'll give it that information. What's the name of the page with the sign in screen, with the route that we just created?

[00:02:55]
>> Speaker 3: Log in.
>> Mike North: Log in, great. Login so that's where we're going. And we can leave this class string as is, we don't have to touch it. This is one of the great things about glymour components. This is very clearly something that we're passing to the component for use.

[00:03:16]
It's data that's gonna be used somewhere, HTML attributes like this. They can sorta be passed through very naturally. So you can treat it like you would treat a div or spam. So we've got route login and if we save that, no more error message. But if I inspect this thing I can see that in this nice tool tip here it's kinda hard to see but there's an a tag it's not a button anymore.

[00:03:45]
Well, we can customize this a little bit by just saying tagname button and now we don't get the underlining behavior and if we hover over that thing. Now we can see that it is in fact a button, so that's great.
>> Mike North: And let's just make sure our tests are passing.

[00:04:11]
>> Mike North: They are, so this is the end of Step5, we have added routing to our application.