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

Transcript from the "Exercise 5" Lesson

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

[00:00:04]
>> Scott Moss: The task at hand if you go to step five, again, you notice there's a shared folder. There's some files in here. If you go and read them, you can see what's going on. I just have like URL. I'll tell you what this is doing in a minute.

[00:00:22] Everyone make sure they do NPM install, there's definitely some new stuff in there.
>> Scott Moss: Actually, I forgot. There's something you have to install globally, cuz I couldn't put it in the package.json, cuz it's a global thing. So, if everyone watching can run this command in their terminal, actually it's going to terminal and do it.

[00:00:46] Do npm, I make it bigger. Install and do i for short. You can just type i instead of install and -g for global. If you have to pseudo, make sure you put pseudo in front of this and then Json. json-server and install that globally.
>> Scott Moss: Cool, so if you go and look in the files and share, you see API.JS is the URL to the server that you're gonna be running.

[00:01:30] I will show you the minute how to run that server. Posts JS, this is where you're gonna be doing to most of your work. There's some comments in here. I literally left as little hints and stuff as I possibly could to see what you would figure out, but you kinda get the idea.

[00:01:47] There's a few things you gotta do in here and there's a one gotcha that is very simple but I think a lot of people are gonna miss it. And then share at JS. This is the part where we're just registering some stuff. So I registered this constant that I made, an API.js so it's an object.

[00:02:06] It's an object whose name is API and I told angular about it by making it constant. So, when you make your post.j, remember, we wanna register this with angular too and share JS might be the place in fact it shows up here. So remember that. So once you have that, let's see on its blog, blog.controllers.

[00:02:30] So you are now and then once you have all that, good to go. If you gonna blog.controller, you wanna get rid of the static data that we have and we want to inject our posts service and start using that. So I left no, no to here on how to do that either, but I did tell you yesterday how to inject stuff inside of a controller, inside of a class.

[00:02:51] So try to do that and replace the static data with the data you will get back from the server. So, speaking of the server, if you go into another terminal window,
>> Scott Moss: And if you type in json server and then type in db.json. So db.json is a file in the root of your application that was added.

[00:03:22] If you go look you'll see it's just got like some mock json data in it. It's nothing but json data, so on another terminal if you do json server db.json and hit Enter, it's gonna create a restful server for you based off that data. And it's purely restful.

[00:03:37] You can do crud on it. You can post to it, delete, get purely restful with like query params. It's ridiculous how easy it is, like. So, if you grab this URL, which is localhost 3000, when you look at it, you'll see what I'm talking about.
>> Speaker 2: What is the command again?

[00:03:55]
>> Scott Moss: The command is json server db.json.
>> Scott Moss: So if you were gonna look at the server in Explorer, you'll see you get this nice little page and it's like, yeah, we found a resource that you had in here called posts and if you click on it, there's all our data.

[00:04:18] It's there. It's pretty crazy. It's the easiest server you've never made.
>> Speaker 3: So what are the query parameters that you're talking about besides the crud command?
>> Scott Moss: So how familiar are you with [INAUDIBLE].
>> Speaker 3: Vaguely.
>> Scott Moss: It's [INAUDIBLE]. So like, let's go look at a post. So if you wanted to find by ID, you can pass an ID through this right?

[00:04:44]
>> Speaker 3: Totally get that but it's always just for prototyping like is it for just keeps spinning up on API files
>> Scott Moss: Yeah, it's just for prototyping. It's just like here's a mac data. Like API hit like you would not put this on production. No way. Yeah. All it does it takes a JSON file if you go look at the JSON file, db.JSON.

[00:05:07] It just takes this JSON file and every single property that's on a route. It creates a resource for it and it looks at all the properties and that's how it knows what cruise to be able to take. So yeah that's what it does, but when you post to this server, it will write to the file, right.

[00:05:22] So, then if you delete, it'll delete from the file, so it's literally treating this file as database.
>> Scott Moss: Cool, so again, the task is in shared/post.js you need to fill this stuff out. We need to do some crud methods. At very minimum, we need to be able to get all the posts.

[00:05:46] At the very minimum. That's what we need to do. If that's all you do, then you win. That's it. So, find some way to be able to get all the posts. We have the API here. And once you get that, be sure to register it somewhere in here, remember that?

[00:06:02] And then go to blog.control.js and remove the static data and replace it with the data we got back from the server. So everything should look the same on the page. So, how you know you're done? If we, well I mean, you'll know. [LAUGH] It will throw some errors.

[00:06:19] But if you check out just to see because I think I changed like the colors and all types of stuff. Step-5-fix and we do npm start. Oops.
>> Scott Moss: Let that thing run.
>> Speaker 4: I don't know if it'd be, helpful, Scott, but I learned very recently with NVM that you can alias default, and it will automatically inject that as a node into whatever terminals you start up.

[00:06:55]
>> Scott Moss: Yeah, so that totally works. I used to have that setup, and I stopped using NVM, and I just downloaded NVM before this works out use it a gas so, thank you for that.
>> Speaker 4: Well it didn't seem very well documented, so I didn't know for the longest time and I was doing this like-

[00:07:10]
>> Scott Moss: I used to be like in the in the show right here. I used to come in here.
>> Speaker 4: Yeah, like run this first [LAUGH].
>> Scott Moss: Run this command first but then, I would type before that command would run and it will break every day.
>> Speaker 4: Yeah yeah.

[00:07:21]
>> Scott Moss: So yeah thanks for that. So how do you know you're done? If you go back and we go to the localhost4500, you should still see the data, right. Nothing should change. Yeah you get some nice animations like that. I forgot to added that. Yeah and now there's a search bar here now.

[00:07:44] So you got a search bar that like does search. Search it, Yeah.