Component-Based Architecture in AngularJS 1.x and ES6 Exercise 5 Solution

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott Moss: So this one was a hard one, so if you didn't get it you should feel great because it was hard, really hard. Especially since I didn't give you a lot of clues on a lot of stuff. So a couple things we had to do here, if you were to.

[00:00:20] If you're still looking at the to-dos, you can just run npm start, kind of tell you what to do. So you have a couple things you have to do, register common with app, I think I failed to tell you guys about that one, but that's a thing, if you didn't do this it won't throw an error.

[00:00:36] You just won't get a sweet text box at the top of your file, register shared with the app, create a factory, create credit methods, why did I put that there. I don't know and expose textbox to be imported. So that's just some extra credit but let's get to the meat, potatoes of the stuff that you should've been doing.

[00:00:56] Now let me check out the solution branch.
>> Scott Moss: Cool, all right, so the most important piece here was in post.js. So I said at very minimum just see if you can create a method to get all the posts, so I made two. Or actually I have more than two, but two crud ones and there's an extra one.

[00:01:30] I'll tell you about that one and why I decided to do it. So my limitation was something like this, so as far as get. I have a method that just gets all the posts and it is using http that's why I was injected there. If you haven't figured out then API is an object that's in const.

[00:01:49] I'm sorry that's an API GS right, so API.URL keeps me say URL. If you just hard coded the URL then that's fine, it's also there too, that's why I injected it. Then use a string interpolation here right. So API.url/posts and is everybody familiar, who's here is not familiar with promises?

[00:02:14] Okay so everybody seen them at least okay, so HTTP returns a promise which gets a response object. And then normally what you would do here and probably what most people did, was that they returned the data from the response object, right. Knows I didn't return the data at all, I actually just set this array, our state, called outpost.

[00:02:40] Equal to whatever the data was, that's what I did. So our control is still doesn't have access or at this point but I'll show you how we get access to it and I can do this on one line without brackets. Because I only have one argument so this is where error functions come in really handy with callback so you can see that looks this.

[00:02:57] I just look real nice right there, any questions on that one? Except for why the fact I didn't return the data and why I put it here. We'll talk about that in a minute but any other questions?
>> Student: Does that return responses have data too, so get?
>> Scott Moss: It's going to hurt so what happens is it's going to return whatever is to the right of this arrow.

[00:03:22] And so because this is an assignment expression, I don't think assignment expressions return anything, so it just returned undefined, yeah.
>> Scott Moss: Cool, so I have the other method, which is get one, arguably could just be placed into this one. But I made another method and hindsight it could have been the same method just like, take an ID, if it's an ID then get one of it's not ID get all right.

[00:03:49] But whatever give one this one takes an ID and what does it is trying to find it. Do it's a method shortcuts here, get the ID property to say things go like this right? [BLANK AUDIO] So if you find it if the posts I mean something caught you don't when, see I know that is.

[00:04:10] You know this?
>> Student 2: Yeah it's dark you is a promise library inside of angular and skewed out when will rap whatever. Value you put in it any promise taken is immediately resolved essentially
>> Scott Moss: Right.
>> Student 2: Yes it, do you have to callers of all one or forget?
>> Scott Moss: No it's where does is it will the matter of the thing you're passing in is a promise or some static value in this case object, it will allow you to call .then.

[00:04:39] On the functions so when I call and getOne, I can call that deny it even though it might not be a synchronous. So it guarantees me that the noble API although it might just be synchronous and resolve immediately. That way when I call getOne, I don't have to check to see wait.

[00:04:55] Is it a promise or is it cigarettes because this might be synchronous because we might find a post in the array right here and if we do, we just want to go ahead and return it. But, if I just return it, then now, if it's this case, than now I don't know which one's going to do.

[00:05:09] I don't know if it's gonna be promise or it's gonna be. So, guarantees me that I can always call .then on this method regardless if it's or not. The reason we want to look inside this array first is for like so like it's catching right? We don't have to go get it again if it's already here.

[00:05:30] So that's how we look in this. This is a small optimization but else, if it's not in there, we need to go get it and same thing. What I'm doing here though, got the URL, nice interpolation and then I got the id. All right, straight at rest. So, that would look like, if you go to dv.j sign, it would be /id and id would be one of these things, all right.

[00:06:00]
>> Scott Moss: .then so, here is some funky stuff, does hat look weird to anybody? Cuz it should, is it like what? Can anybody tell me what's going on there? Let me just zoom out, what is this?
>> Student 3: You're taking the response object and pulling out the data.
>> Scott Moss: That’s exactly what I'm doing.

[00:06:19] So whatever argument, is the first argument, in this call back function give me the data property of it.
>> Student: That's what I was doing.
>> Student 4: So you could have done that above too, sure.
>> Student 5: That's that destructuring-
>> Student 3: When you did response, all right, you could have done that-

[00:06:38]
>> Scott Moss: I could have, the reason I didn't do it is because if I do this, if I go like this now, I can't do a one liner node.
>> Student 3: Why can't you just do data at the end?
>> Scott Moss: Why can I do data at the end? What do you mean?

[00:06:52]
>> Student 3: You set resp.data, why didn't that work?
>> Scott Moss: Well, because now I had to put parenthesis around this argument. If you put parenthesis around the argument, you can't do this on one line. So now I have to do this.
>> Student 2: Hey Scott, by the way, the assignment operation actually returns the value that was assigned.

[00:07:16]
>> Scott Moss: Aww, sweet, yeah you're right.
>> Student 2: It is doing the same thing as what you want, like-
>> Scott Moss: Perfect.
>> Student 2: What someone else would have wanted here.
>> Scott Moss: I did not know that, that is awesome
>> Student 2: [CROSSTALK] Couple people in the chat actually try to include a Zeiss.

[00:07:27]
>> Scott Moss: Nice, that's awesome.
>> Student 2: Yeah, I could remember either.
>> Student: Yeah, it does make sense, that's what it works Yeah because you don't want to do the one liner.
>> Scott Moss: If there's one argument and no parentheses, there's no arguments you have to put parentheses, you cannot do a one liner.

[00:07:44] If there is more than one argument, you have to put parentheses, and you can't do the one liner. You can only do the one liner if there's one argument.
>> Student: But wasn't this [INAUDIBLE]?
>> Scott Moss: Yeah but we had to put parentheses around because of destructuring, so.
>> Student: Cuz you can do.

[00:08:01] Like no, no, no, no, no.
>> Scott Moss: That was scary because like as soon as you do this, now you have to go to the next line. As soon as you put parentheses there, you have to do it on the next line, and we have to put parentheses there because of this.

[00:08:17] You can check it.
>> Student: Yeah, I'll check it.
>> Scott Moss: Yeah, but pretty sure that won't work but maybe Babble is like, you know what, that should work and we're going to get it to work. Babble doesn't really follow the spec 100%. So they do what they want.
>> Scott Moss: Cool, so yeah I am de-structuring in the arguments.

[00:08:38] So I didn't tell you can do that but you can totally de-structure in the argument which is legit. I mean and also just to be safe here. If you wanted to, you could say, or no, never mind don't do that, obviously you can set up a default to, but they'd be pushing the data.

[00:08:54] You don't wanna do that. So course, so then now what I'm doing is I'm just gonna add that data to the array because there wasn't there before cuz we hit this case. So that means it was never there so we just gonna push it in there and I'm just gonna return it.

[00:09:11] Everybody following me so far? All right, so getOne, if we can't find it, go get it from the API. When it comes back, place it in the array, and then return it. So it's just placing it in our cache, our state and then the next one. This is a very, very important one, right here.

[00:09:32] This is how we actually get the posts from this factory to our controller. So this is a pattern that I learned from working with some of the people on a great team and our friends of mine that actually this one works really really good. I was not a fan of it at first but when I started using other frameworks and I was like this part is actually pretty good.

[00:09:52] So we have this git state method which its job is just to return the state, that's all it does. It just returns wherever you're keeping your state, that's it. In this case it's the allPosts array, this is gonna return that, that's all it does. So I'm gonna go ahead and return all three of those using those nice property shortcuts.

[00:10:11] I can just comma separate them with the same name pretty sweet.
>> Student 2: If you're gonna run this line 18 you need a bracket after data.
>> Scott Moss: Say that again?
>> Student 2: Line 18.
>> Scott Moss: Thanks, I did not see that.
>> Scott Moss: Yeah I don't know why that's the one thing I like about Sublime.

[00:10:34] Sometimes- [CROSSTALK] Yeah, it'll work tomorrow and it won't work yesterday. [LAUGH] Sweet, so now I'm injecting. So one thing you might have come up here and was just like, yep, I'm just gonna export this. This works, this is totally fine, we're not minifying but then you don't, and you might not have had that.

[00:10:55] But if you do that export, then this never happens all right which is fine, cuz we're not minifying. But if you were minifying it, you can't figure out why the stuff was breaking is because you were exporting before you did that. So that's why I'm exporting at the bottom here, everybody see that?

[00:11:14] Cool, so over to share j s, import post step function we just made and we've just made a factory called post, and put it there. It was awesome to see that people were literally giving it the same name that I gave it that, did I? Yeah, I didn't put that name anywhere else.

[00:11:29] Everybody else named it the same thing or most people did, which is cool. Which means they're thinking in that convention of the naming which is great. Cuz that's where people start naming stuff differently, but everybody pretty much named this the same. I thought that was great.
>> Student 2: Scott, Bill T is wondering why we have the get state function?

[00:11:49]
>> Scott Moss: We're gonna talk about that when we get to the controller, good question. But that is definitely, for the setup that I, for the way that I made the factory, the getState is necessary. Normally, what you would do is instead of adding the data to some collection, you will just return the data and then you would get it in your controller and display it that way.

[00:12:13] But technically, who's storing the data that if you're getting it in a controller, like, then the controller store in that state, right. So, it's not really what we want, so we want to store it in here, so that's why I did that. We'll talk about that in a minute, so we got that, we got shared working.

[00:12:28] Then following the tree, what we have to do then is go to add.js. Add.js we need to import shared.
>> Scott Moss: And we need to register it with angular.