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 5" Lesson is part of the full, Ember 2.x course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, you will add error and loading substates to the /org page in the Ember application.

Get Unlimited Access Now

Transcript from the "Exercise 5" Lesson

>> [MUSIC]

>> Mike North: I want us to jump into our example app here. And this is great, we're coding early in the day here. We're gonna add some loading and error functionality to our app. And we'll aim to do this quickly. Because this is sort of one of these concepts that it's good to know, but people don't typically dive into deep complexity here.

[00:00:30] So I think that we'll probably just take 10 or 15 minutes this time.
>> Mike North: The idea is I've got two different, two URLs. As you go from the orgs list into a particular org, I want to use a spinner. And SpinKit is a great place to look for pure CSS spinners.

[00:00:50] You can just drop some style into styles/app.css, which is where all of our styles go right now. And put a little HTML, and your loading .hbs, and this will work. I also want us to flesh out a little example of catching a particular error in an error action.

[00:01:15] In this case it will be when we ask GitHub for information on an org that it doesn't know about. It will return a 404. I want us to handle that specific case by saying this org is not found, rather than having everything sort of fall into the general error category.

[00:01:38] And if you want to go further, try using the debugger handlebars helper in error.hbs. And you can see that you actually have the jQuery XHR object that has the status code and the response from the API. That's available in the context of that template. And so you could actually write out the status code and the status message, so that the user understands access denied is different than general server error.

[00:02:10] And probably, that would be troubleshot a different way. So let's jump into this for, let's say 15 minutes, and then the next topic we'll move on to is components. And in terms of where you should start, the code that you should start with for this exercise, it will be master of the code that is in the front end master's org on Github.

[00:02:34] All right, thanks guys. Any questions?
>> Speaker 2: [SOUND] Question about the loading template.
>> Mike North: Yes.
>> Speaker 2: It seems to affect all of its sibling templates.
>> Mike North: In what way?
>> Speaker 2: So I drop it into the org folder and get it on loading repos and loading erepo as well.
>> Mike North: Yes, so remember that when you drop that template in a particular place, the parent of the route that that corresponds to we're not defining a loading route.

[00:03:10] That comes for free. You can see that it exists in the Ember inspector. But whenever you're pivoting on that particular parent, that loading state is gonna be what is made active. And you can get deeper and customize it so that, for example, you only enter the loading substate if the wait has been beyond a certain tolerance.

>> Speaker 2: And then it's like loading the action hook.
>> Mike North: Yes.
>> Speaker 2: Okay.
>> Mike North: You do that in the loading action by bubbling it up only in the event that you're still loading beyond a certain extent. It is not simple enough that I want to try to tackle it in this, but that's generally-

>> Speaker 2: If I wanted that loading state to only target rebo's and not the repo route which you are, essentially, can I do that in the loading hook? I'd say, if your intended destination was repose [INAUDIBLE].
>> Mike North: So-
>> Speaker 2: It doesn't work.
>> Mike North: It's a little bit more complicated than that the way we have our routes set up currently.

[00:04:17] So I don't wanna claim that it's as simple as waiting a couple of seconds in returning through that. The reason is that, that action is gonna fire immediately when you start transitioning, when we know we're going to load. And that's basically, as soon as your model hook returns an unresolved promise, we know that we're gonna start loading.

[00:04:37] And so, you know, if you want it to wait 200 milliseconds before you actually transition into the state you can't simply just you know handle that template in the action.
>> Speaker 2: So I initially assumed if I didn't want to see this on repo I make a repos folder that currently doesn't exist and put my own template inside that and that will cause it to only if I use that loading template, when it transitions from org to-

>> Mike North: It totally depends on which route you are pivoting on. And so potentially if I am drilling into that folder from somewhere higher up in my hierarchy, what I'm pivoting on could potentially be some of the living state if that makes sense. All right other questions?
>> Speaker 3: There is a question on what is the difference between org_loading and org.loading.

>> Mike North: Good question.
>> Speaker 3: And like where org.loading is under the org
>> Mike North: So org_loading is probably what their seeing in the Ember specter. We'll have to try it out and see how it works. I know org.loading will work for this example and it fits with the conventions that we've been using for our other routes.

[00:06:02] So I would go in that direction.
>> Speaker 3: Yeah, he's saying it shows up in the Ember inspector.
>> Mike North: Yes, it does.
>> Speaker 2: You can customize that before uploading your own.
>> Mike North: You could if you wanted to.
>> Speaker 2: And org.loading controller. Dirty word.
>> Mike North: There is a controller there but again that's going beyond I just want to cover sort of simple use of this and then we can move on to components which are more interesting.