Component-Based Architecture in AngularJS 1.x and ES6 Exercise 5 Solution, continued
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Exercise 5 Solution, continued" Lesson
>> Scott: So if we've gotten this far, now we can use posts in our controller. If we got rid of this, we couldn't use posts. You get a posts, let's say post factory provider, not there, you'll get that error.
>> Scott: Cool, so now let's go to our blog controller and talk about how to use this stuff.
[00:00:30] This is how I do this. First thing is, we need to inject it. So remember, this function, this constructors the thing that's going to be used for injection. So inject posts in there. We get the name posts because if we go back to share.js, that's the name that we put here.
[00:00:45] So, posts with a capital P is the same post as here. Again, I was telling you we don't have to register stuff with angular. We could have just import it to actual post.js file right here and use the factory, but again, I said although you can do that, you shouldn't do that.
[00:01:01] Just register it with Angular instead. Use dependency injection so you can get that mocking and stuff like that.
>> Scott: So, the first thing you might have noticed was that you had to do something probably, this where you had to assign the posts factory to this if you wanted to access it in another method, right?
[00:01:22] Cuz just cuz we injected posts in here, that doesn't mean I can just come in here and be like posts.getState. It won't work. It will be like what's post with a capital P? I don't know that is, because this method is outside the scope of this injection. So, the only way to get it over is to bind it to this.
[00:01:41] It is really annoying to have to do something like this, but this is only way it works now. ES7 introduces static properties. So you can do stuff like posts equals something like that before the constructor. But that still wouldn't really help us too much with the dependency injection.
[00:02:03] Typescript has a solution for this too, but we're not using typescript. So this .posts equals that post factory suite. And then the thing that I do next is I call this.getPosts. So, let's go look at that method. So, I'm calling this method, this.getPost, which is this method right here on line 14 that we were all talking about, that I just made.
[00:02:26] So, all this does is it calls this .posts, thefactory.get. So, let's go look at that, one more time. What does .get do? It just gets all the posts. That's what it's calling right now. So, let's follow this and we'll see why we needed to get state. So when I call it this .post.get, that's going to make a call to the server or, I'm sorry, where did it go?
[00:02:50] There it is. There's that's going to cause of the server, and then when it comes back, it's going to add that data into this array, right? And then we have this method call getState that returns this array. So, what we can do is we can say okay, get the post, and then when you get back from the server and you've already pushed the stuff inside that array, I'm now going to assign a local variable called this.post with a lowercase P and equal to the getState method.
[00:03:23] Right. So that's go to the server. By the time it gets there.
>> Scott: Already added to the state in posts.JS. So, by the time it gets to this method, it has already added to all posts here. This had already happened. This line, it already happened by the time we got to the next line.
[00:03:51] So, that's how I'm able to come in here and say okay, now give me the state. So it's like, give me the update. What's the new state? I want the new state. Give me the update. Because we are returning the data too, we could have just come in here and said data and said, this.posts equals data.
[00:04:05] That will work too, as we just found out, it's also returning the data. But I'm gonna rely on the fact that the state is the source of truth. And when I say the state, I'm talking about this. This is the source of truth, and this is what I'm gonna keep asking for when I want an update.
[00:04:23] This is better for components, most other frameworks adopt the same thing when it comes to components. So, these reacts and stuff like that, they have something very similar to this.
>> Scott: So, this might seem redundant or you're like, well, I just get the data, and I can just put it right here.
[00:04:41] But then again, where are you storing that data? What if you want to access that data again, right? How do you do it? You have to call the server again because you're storing it right here. But if I store it here, then it will be here until I refresh the browser, doesn't matter where I go, right?
[00:04:58] So, that's why I put it there. Any questions on that? Yes?
>> Speaker 2: If we've established that the return value for this then function is whatever the assignment is.
>> Scott: Yep.
>> Speaker 2: Then couldn't we still assign to the return value of get? Then it'd still point out all posts?
>> Scott: Yeah, in this case, you could, cuz it's literally doing the same thing. But let's imagine you were doing something like this. Let's say before you did this, let's get rid of that and we were like, we did some processing of response.data. Maybe we filtered and we sorted it.
>> Speaker 2: Sure, sure.
>> Scott: Some properties and then we put that in all post, right? So, that's why it's like this. It's nice just to only have to think about one source of truth, right? Where it's I'm just just give me whatever the server gave me back. In this case, this works, and not a lot of case though, you probably don't want the raw thing, some of the stuff, maybe you're not in control of the server, and the serve's sending you back ID's and stuff and has passwords that you don't want to show.
[00:06:07] All right, so you don't want to rid of that stuff. So you will process that stuff before you put that in. Yeah.
>> Speaker 3: Just I'm thinking about to just short circuiting something here in your get.
>> Scott: Yes.
>> Speaker 3: Okay. Actually, in that then thing you're calling that function there.
>> Scott: Uh-huh.
>> Speaker 3: Okay. After you assign there was pronsidated to all posts, could you then call getStates right there and have that return same thing?
>> Scott: Call.
>> Speaker 3: Instead of having a two level call? Could I call a getState where, here?
>> Scott: So, turn that, no, turn the body of that function.
>> Speaker 3: Okay. The real function to give them.
>> Scott: Uh-huh.
>> Speaker 3: So, do that, then can you call getState?
>> Scott: Yeah, I could call getState, but what, that's going to return all posts.
>> Speaker 3: Yeah.
>> Scott: You're saying if I could just get a return. A get state?
>> Speaker 3: Yeah.
>> Scott: Yeah, you could totally do that. Yeah, for sure. So you can say coming here and you say get, this probably wont work, it's the scoping. It's not posting, so this will error out. This would have the above, but yeah, I just have to move this function.
>> Speaker 3: Okay.
>> Scott: But yeah, if you say getState. Yeah, that would work.
>> Speaker 3: Something like that.
>> Scott: And then the only difference is over here, you don't, yeah.
>> Speaker 3: Okay.
>> Scott: State.
>> Scott: You could do that.
>> Speaker 3: Yeah, okay, all right.
>> Scott: All right, but yeah, you can totally do that.
>> Speaker 3: Okay.
>> Scott: Whichever your flavor is. I like your approach better, actually.
>> Speaker 3: Sure. Sure, I'm just trying to explore the space.
>> Scott: There you go. I like that one, actually. That one is good. Where was I? There we go. Okay, cool
>> Scott: Great.
>> Scott: So is everybody follow me on that?
>> Scott: So the other thing that you, if you look at the to dos that you could have done, that I didn't tell you to do, because I just totally forgot about it. Because it didn't throw an error, was that there is this new folder inside of components called common.
[00:08:27] Yeah, you had a question, Will?
>> Speaker 4: Yeah, I got a question from Rob W.
>> Scott: Yeah.
>> Speaker 4: If the underlying API data changes, say someone made a new post. Won't you not see that, no matter how many times you went to a different part of the app and then came back to post?
[00:08:42] So I guess, I think what Rob W is trying to say is if something changed from under us on the server, we would be stale until we issued another request, correct?
>> Scott: Well, that’s-
>> Speaker 4: That’s not something where you would be if you want a notification of that sort of thing, you'd either need to be pulling or using web sockets.
>> Scott: Yeah, if you want to push from the server, I mean, there's ways. There's an actual spec. I don’t know a lot of people know this, but there’s an actual, let me see.
>> Speaker 4: I know we used web sockets to do precisely that at my last job, and it worked reasonably well
>> Scott: Yes, so web socket is definitely the best thing, but there's actually this small thing that I don't think a lot of people know about. It's called Service Sent Events where you can send an event from a server, a push notification from a server and that works not exact.
[00:09:34] It's not over thing like a web socket, but it's the inverse of making a call to the server. Just I want the server to tell the client about this, and you can do that.
>> Speaker 4: So, the client runs some sort of Daemon that's listening?
>> Scott: I'm not sure that the low implementation of how that actually works, but you can totally do it.
[00:09:49] It's a service and I've done it in node before, but you can send to an event to a client. It's kind of trippy.
>> Speaker 4: That's really interesting.
>> Scott: It is really interesting. Nobody uses it, but it's official thing. It's a real spec. Nobody cares about it. I think it's great, but yeah.
[00:10:05] The web sockets will definitely be ideal or something like that. And then as far as notifying our application of how that changes, then you would just have to set up some type of listeners or event emitters or whatever an invitation you want to set up notification. One easy way would be some socket.on this.
[00:10:26] And then change whatever thing is listening to that. So, pub sub. But yeah, anyway, in the common folder text box, there's this text box directive, it's not really a full component cuz, I mean, technically this is more like a UI component. So, it's got a link and some other stuff.
[00:10:45] So if you were to go into common common JS, you see that there is a Angular module there, but if you visit Angular module, that's in common JS with app.js, and then going to blog.html. You'll see this text box up here that's got some stuff.
>> Scott: Then you should see something like this.
>> Scott: Not this. [LAUGH] But, this. Stuff, right, so you see this. So, you'll see the search box here, and you can start searching. In fact, if you do, if you start typing and you can't, and it is not searching, here's a small, small pro tip that you learned, that I learned with controller asked.
[00:11:43] So, when you bind into the scope, everyone blog the HTML, and we were to, just imagine this buy into as a NG model that's all that is, let's just say this is scope.search right? If there doesn't exist a scope.search in this controller, Ingrid just creates a empty variable for it, right?
[00:12:00] And it will fill the value as you start typing, but what controller has, if you don't have this property initialized, first, it will not create it for you. So, if I got rid of that and put that back, pretty sure that's not going to work. If it does, I'll be very surprised.
[00:12:17] It does. I'm very surprised, actually.
>> Speaker 5: But it won't let you reset the value.
>> Scott: Right. Yeah. It won't let you, there you go. It won't let you reset the values. So, it's good to just initialize the actual property, won't use a controller versus relying on Angular to make it a fly for you.
[00:12:37] Especially if you start, if you start binding to an object, if this was an object, it definitely won't create it for you, it just doesn't know that it's an object. Maybe we got away with it because it's a primitive in a string, but object, I don't think it will, whereas a scope will.
[00:12:52] So, just a small gotcha.
>> Scott: Cool, any questions on this? Anything that we talked about, anything that you did, or anything that you see that we didn't do anything on this, no? All right, so, yeah, what's up?
>> Speaker 6: That thing actually does work, that one thing we were talking about.
>> Scott: What were we talking about?
>> Speaker 6: If you open up the Babel tab-
>> Scott: Okay, Babel tab.
>> Speaker 6: I could tell you something to type.
>> Scott: Okay.
>> Speaker 6: Okay.
>> Scott: I remember what we were talking about. The destructuring? Okay. Let's check it out.
>> Speaker 6: All right, so do Varro Scott greeting.
[00:13:35] We're gonna make a name function. And then do equals and then parenthesis, then do a destructuring of an object with Scott.
>> Scott: Okay, I got better example to this.
>> Scott: So, we're going to do dot map, and you're saying is I can do this.
>> Speaker 6: Yeah.
>> Scott: And on the same line, let’s do that.
[00:14:13] Yeah. Let's see. Yeah, that works. Nice. Most of it.