This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Building Awesome Web Apps with Angular 2 course:
The "Review of Demo Application" Lesson is part of the full, Building Awesome Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Reviewing a demo application for the course, Lukas explains the importance of master–detail interface for learning coding as well as its importance for learning a new framework.

Get Unlimited Access Now

Transcript from the "Review of Demo Application" Lesson

>> Lukas: To get started, everybody needs to go and download this [INAUDIBLE]. So I believe everybody here has done this. Now there was some confusion. I asked everyone to also install the angular CLI. The reason why I did that is because when you can install the angular CLI and run it, then I know for a fact that you have node and NPM installed and working.

[00:00:23] So implicitly it kind of handles a lot of the environment issue that I know you're ready to go, as well this project is based off of the angular CLI. Yes?
>> Speaker 2: Request, is there a link for the slides?
>> Lukas: I will post the slides, I tell you what when this is over, when I'm done telling you about the big picture I will put this in a PDF and send them out.

[00:00:49] So they're forthcoming. I always wanna fiddle with the slides during the day of like, maybe I could say this better and then there's always the pre slides, so we'll say the beta slides. And then, at the end of the workshop, I'll send out a final polished slide deck.

>> Lukas: So what we have here is the angular two rest website. And so this is a master detailed view which I believe is the single most important interface for developers to learn how to build. So what you have is a master list of items and then when you select one, then you can update that.

[00:01:32] So essentially you have a list of items that you can create, read, update, and delete. So this is pretty much the foundation for every line of business app, ever. And so if you even look at like a to do app, well the to do app is really just a fancy version or I would say a variation of the master detail view.

[00:01:53] And this also connects to a rest API, we'll get into this tomorrow. But I think that one of the first milestones that any developer should kind of strive to when learning a new framework is learn how to build a master detail view that they can do cred operations to a rest API.

[00:02:13] It's kind of at that point, you can kind of take that knowledge and start to transform it into whatever you're building. So in this case I'm keeping it very generic with items, but this could very much be users, policies, incidences like whatever. So whatever your domain model is, it's very easy to transform it into the master detail view interface.

>> Lukas: So again simple RESTful master detail application and what we have is I've built out the items feature and we are going to be building out a widgets feature in parallel. And so, the reason why I've done this is I found it's helpful that as you're building something that if you have something to reference that's already working that is helpful.

[00:03:02] So as we're building out the widgets feature and we're going through the challenges. Then feel free if you get stuck to kind of that hop over to see how we're doing it in the items feature. So personally for me I think that we learn by example and I think that you don't really get a badge of honor brute forcing something, this for me is like is a documentation, does your documentation have working code?

[00:03:29] Even better, let me just copy it and I'll start from here. So we're gonna be building out a widgets feature, and use the items feature as a reference point. And as well, don't be afraid. Try some new things. So if you like widgets [SOUND] I don't care about widgets.

[00:03:47] I care about gadgets. Well, by all means, you can say whatever. So if you wanna do with gadgets or you're like, this is the data model but I wanna try some additional properties or whatever, feel free to explore that. It's one thing to note something. It's another thing to be a practitioner.

[00:04:05] You just simply do that by doing.
>> Lukas: All right, so challenges for this module is we just need to make sure we can run the application. Because this is a rest application, we are running in conjunction with, essentially, the webpack server. We are running, it's called JSON server.

[00:04:27] So what that allows us to do is actually serve up a rest API in the background. So when you run npm start what this is doing,
>> Lukas: Is it's essentially running our server. So if this is our JSON server, so if you go to local lost 3000 that's what you're gonna see.

[00:04:50] And I think somebody just said this in here. You're gonna see something like, congratulations, JSON server is running. But what we care about is what's on port 4200.
>> Lukas: I'll just show this real quick.
>> Lukas: So, you can see here, we have items and widgets. So, this is our rest API.

[00:05:13] We're going to consume. And what this is, and just a pro tip. If you're ever doing like, proof of conquest work, and you need a local rest API quickly, JSON server is the heat. Because then what you can do is in our server, we just basically just have this JSON file that we're dumping in here.

[00:05:35] And so you can actually update, delete, whatever. Using the file system it'll actually update your JSON file as well. And so that's where port 3000 is coming in. And then, if you go to localhost 4200, then what we have here is items and widgets. And so this is the master branch for the project but then, what we've done is we have created a branch for every module.

[00:06:13] And so at the end of each module, we're going to have a challenge. And if you want to see the solution for that challenge, then you can just hop in to that branch. So for instance at the end of components, if you wanna see what that looks like.

[00:06:27] We'll actually step through and see that in action. More importantly, is let's say somebody has to go to a dentist appointment at 11. And they come back and were on services. Well what they would do is just go to the module ahead, check that out and anywhere essentially caught up.

[00:06:46] And going into services, if that makes sense? And so, all of our solutions essentially in their respective branches, and so, if you get stuck, you can just hop in and check that out or if you get stuck you can hop into the module before and then catch up.

[00:07:05] Or if you want to review the solutions then you can do that as well. But for the most part everything is in the widgets feature. So you can see here if we go to widgets. You can basically kind of select this. We have some routing and stuff going on that we'll get into at the end of the day.

[00:07:28] And you can select it, SAVE it, etc.