Setting Up New Routes

[00:00:00]
>> Mike: The next thing we're going to do is add some URL specific content to our app. So currently, if we were to go to the root of our application, gonna delete the tests, part of the URL. And I were to add something like ABC, we'll get an error, and that is.

[00:00:26]
>> Mike: It's an unrecognized URL error, there you go. Whoops, sorry, unrecognized URL error. So this is indicating that sort of, we've only provided content for the very root of our application. And the framework does not know how to respond to slash ABC. In fact, all of the stuff we've been doing so far has been an application HPS.

[00:00:49]
And that is shown on the screen no matter which URL we visit. This would be already put a Google Analytics snippet or nav bar. Something that's always present and always part of the user experience. So we're gonna have to do a little bit of refactoring. And when we think about URLs specific content, you should think routing.

[00:01:11]
So Ember's routing layer is what takes a URL and figures out what should be on the screen. And what data needs to be fetched in order to render the appropriate templates. Anything URL related is likely to involve routing, and we're gonna get started by building two routes. We'll do so by running ember generate route teams.

[00:01:38]
And this is where our chat UI is gonna be. And in addition to that, we're going to build a route for a login screen where we can have a very rudimentary authentication set up. And where we can pick which user we wanna log in with, and who we want to chat as.

[00:02:03]
So ember generate route login. And I'm going to just look at the VS code git UI so we can see which files have changed. And which have been added as result of running those two commands. So starting at the top we have router. And let me get this out of the way temporarily.

[00:02:31]
So we have router, and we can see that this used to be an empty function. And now we have two routes that have been installed in the router. And what this does is the router is what receives, changes to the URL, right? It listens for change events and it's told that the URL has changed, or the user is entering the app through a particular URL.

[00:02:55]
And it sends control off to a set of routes, which are responsible for bringing the application into the correct state. So like, for the login screen, we might have to go and fetch a list of users or something in order to facilitate whatever it means to log into this app.

[00:03:17]
For the teams route, we might need to go and get a list of which slack teams you are a part of. But each respective route would have a single job, and it would be to get everything ready for those two independent things. So that's what the router's all about.

[00:03:37]
We also have created routes. So these are native classes, right? They extend from Ember's route based class. So we've got one for login and for one for teams. So these are both in the apps/routes folder, and they do nothing right now. We're not gonna worry about them until a couple steps later.

[00:04:01]
Along with the routes we've got a template for each. And all they have in there is this thing called outlet. And we'll deal with outlet later. For now I'll say that when you have nested content, like routes inside routes. If we had teams/teamname/channelname, something like that, where we're sort of rendering things in a nested way.

[00:04:27]
Outlet would be where child content would show up. We'll deal with that later. But that's what that means. So now we have these new top level templates, right? They don't belong to a particular component. They're just sort of like the starting point for respective route. And we can start to think about what content belongs there.

[00:04:50]
Finally, we have unit tests, and these are created as a result of the routes being created. Honestly, I don't find route unit tests to be particularly useful. Unit tests are about testing things in isolation. Routes aren't very isolated. So I don't usually end up messing with these files too much and we won't touch them today.

[00:05:12]
So that's what we did by running those two commands. If we bring our browser back into the picture.
>> Mike: And now go to our console, get rid of this sidebar here.
>> Mike: And clear everything out. So now if I go to the root of the application, I'll see what we've always been seeing and no errors.

[00:05:39]
If I go to /login, no errors. If I just type some random gibberish up here, I get my unrecognized URL error. So we see an indication that now the framework's ready to handle those UTLs in a particular way. So, what I'm gonna do next is go to my application HBS.

[00:06:08]
>> Mike: I'm gonna grab all of this content, and I only want the chat UI to show up when we go to /teams, or something that begins with /teams. So I'm gonna cut that out, I wanna replace it with outlet, so that child's content is rendered.
>> Mike: We'll go to teams HBS, that's app/templates/teamshbs, and I'll paste it there.

[00:06:38]
>> Mike: If I go to the root of our app, we see nothing, and we should see nothing. If I go to /teams, I see my chat UI. And what this means is, now this thing that's on the screen will only show up for certain URLs for our app, certain paths.

[00:06:59]
So to get the content for the login screen, we're going to go to the starter files and find login.html. You should see something that's got like a sign-in button, a list of users, etc. We're gonna just grab this, copy it, and go to app templates login hbs, and we're gonna paste that content in there.

[00:07:25]
So now we should be able to go to, obviously we go to /teams and we see this. We should go to /login, and we should see something like this, right? A drop down where you can pick a user and then sign in.