Ember 2.x

Ember 2.x Exercise 1 Solution, Part 3


This course has been updated! We now recommend you take the Ember Octane Fundamentals course.

Check out a free preview of the full Ember 2.x course:
The "Exercise 1 Solution, Part 3" Lesson is part of the full, Ember 2.x course featured in this preview video. Here's what you'd learn in this lesson:

Mike finishes the solution to Exercise 1 by adding a catch-all to handle unrecognized routes.

Get Unlimited Access Now

Transcript from the "Exercise 1 Solution, Part 3" Lesson

>> [MUSIC]

>> Mike North: And the last thing we had to do was have a catch all for not found. I'm going to do this without Ember CLI. So it is the last route I define in my router dot map hook here. And that means it's the lowest priority. And essentially, anything that doesn't match everything above it will fall through to this route here.

[00:00:29] Let me just finish code here. Not found path and user star segment here. And I'm just gonna, I have a build error. Let's see, I forgot a comma. Another great feature of Ember CLI, it's literally pointing at my mistake with an arrow. It gives you great feedback if you make little mistakes like that.

[00:00:55] So i'm gonna type some nonsense, and if we look at the console. We're not spinning out an unrecognized URL error any more. So the application, and in fact if we go to the Ember inspector I don't know if you notice. But previously when I typed in a garbage URL, the app kind of just fell apart, it had no way to handle it.

[00:01:19] In this case the app's still running the Ember inspector can connect to it. So all I have to do now is create a file,
>> Mike North: In my templates folder called not found and we'll just,
>> Mike North: Put Oops. And there you go. So now whatever I type in even if it's deeply nested.

[00:01:45] Even if I do like-
>> Speaker 2: But you lost all the navigation to the.
>> Mike North: I lost all the what?
>> Speaker 2: You lost all the navigation from the previous.
>> Mike North: However if we were to put something in application.hps.
>> Mike North: That's still surrounding everything. And so if we chose to have some global navigation in our app, we could do this here.

[00:02:14] Furthermore, right now we're in very close alignment with Ember's conventions and there is an opportunity where if you wanted to render a different view like I could just as easily if I go back to my router here. I could just as easily put this in like orgs/notfound and I can even have a dynamic segment I can have a star segment that's like Inside the hierarchy.

[00:02:47] I could put one here which would actually take precedence. So you can use these and have like a local not found page, right? And when we get into loading and Ember sub-states, we'll see how within the hierarchy, you know, if I type in a repo name into the URL that does not belong to that org.

[00:03:12] And we're when we're actually requesting data from Gethub and the API returns a 404 we'll see how we can handle that in a specific way. And let all other errors like if Gethub throws a 500 and is crashing or something. Handle that in a generic way.
>> Speaker 3: It's worth pointing out because I just told myself by doing it that if you change the dynamic segment of the repo route to repo_id, Ember attempts to load the repo model which does not exist and throws an error.

>> Mike North: Yes, so just to be clear, if we did this, you're walking into another Ember idiom that in this case we don't want to do. And that's why I'm deliberately doing this. So this means something special to Ember data or it will try to be a good guy and do something nice for you.

[00:04:03] And we'll get there. But for now I'm skirting around that idiom.
>> Speaker 3: Thank you for pointing that out.
>> Mike North: Okay, so I'm going to delete this temporary modification application dot hbs, not the outlet. Do you guys buy the outlet it does what I say it does. So if we go to org.hbs and I delete outlet here.

[00:04:38] It's just not gonna render any child template ever. This is like the end of the line. And if I were to move that above we're going to get the child template up there. So it gets sort of where it sort of propagates down through the hierarchy. All right now we're at a state where I'm going to commit this.

[00:05:02] This is the solution exercise number one. We can go ISSUES, CONTRIBUTORS, back to the list of orgs, everything kind of works nicely. Although all of the data is wrong but we'll get there. Alright so, I think this is a good time for a little break, and the next topic we are gonna jump into Is dealing with individual routes.

[00:05:27] So right now we've been using empty default routes that, they don't do nothing, but they do sort of nothing interesting. And we're going to get into customizing them and taking this hard coded data out of your template. And moving it into the JavaScript and eventually we'll start relying on a real data source after that.