This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Day-Two Demo Application" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Lukas Ruebbelke: So, day two of build better apps with Angular 2. We are going to pick up where we left off yesterday, and kind of extent on those ideas. And the goal for today, is to understand how to compose multiple, non-trivial features in Angular 2. And so, we built a single component, now we're going to endeavor to see kind of how components kind of fit together.
[00:00:34] And so, kind of at the crux of that we're going to talk about component system architecture. So we're gonna do a quick catch up with the routes that we didn't get to yesterday. So we'll do kind of maybe, we're not gonna do the entire module but enough to get us into the day two.
[00:00:51] Which I think that if anybody did the bonus thing, where you're gonna set up the basic route you should be pretty good but we're gonna do routes. But then I really wanna focus on component system architecture. And if that's the only thing that we walk away with over these next two days, I would be pretty happy.
[00:01:12] Cuz when you can understand that fundamental shift of how components fit together in Angular 2. It is really, really powerful in terms of what you can do. How you can close your application and what it brings in terms of maintainability, stability, extensibility and all the other abilities. So here is the Agenda.
[00:01:39] This is slightly different from what we put out in the brief as we start to actually put this content together. We just realized that it would be better kinda moving some things around. So for instance, talking about Angular observables in a vacuum, is really actually boring. And unless you're talking about it in the context of doing something specific in Angular.
[00:02:01] It is more of kind of, I think, a theoretical, intellectual discussion, at least initially. Cuz the actual API for an observable, is really, on itself it's really quite simple. It just doesn't really do a lot. When you start to actually stack on your reactive extension operators, then things get really interesting.
[00:02:24] So we kind of move the observables bit into server communication. And so that is where that went if you're wondering but we will get into it in depth tomorrow. We'll have routing, we'll talk about component composition, touch on directives. Forms, server communication and time permitting, we'll talk about pipes.
[00:02:50] The demo application for today is going to be different than the demo application from yesterday. And we're going to be working on a restful master-detail web application, that communicates to a local REST API using json-server. And just like yesterday, we're going to be building out a widgets feature.
[00:03:12] And again, feel free to use the existing code as a reference point, and please explore. So let me show you kinda what this looks like. So by master detail, we have a master list of items. And, just to the side of that, then when you select an item you can see those details.
[00:03:29] Or, if no item is selected, then you can save an item. And so, my goal for the end of the day, is that each and every one of you has created a master detail view. Where you're displaying a list of widgets, you can then edit a widget, delete a widget, create a widget.
[00:03:49] And so, we're pretty much talking about create, read, update, delete, and communicating with a REST end point. I really believe that once somebody can kind of do this once, and they understand it. Then they can take this pattern and apply it to just about anything. And so, the code for this is at this bit.ly link here.
[00:04:15] And if you go to GitHub.com/100mind it is in there as well. So this is just a shorter version to that.
>> Lukas Ruebbelke: And I'll actually just show you what that looks like real quick running in the browser. Is, as the picture says you can select this here. Yes?
>> Audience: Just adds up, [COUGH] in the readme, you need to install json-server globally?
[00:04:43] In order to get it to work and it's not in the readme. I found that out the hard way, and give the heads up to chats.
>> Lukas Ruebbelke: You know what? I do accept pull requests. So but in this case.
>> Audience: I'm adding it right now.
>> Lukas Ruebbelke: Man, you're the best.
[00:04:56] I think if everybody does a workshop, like pro tip, have a wingman. It's amazing. So we're updating the readme to have json-server but this is the web application. So you have your list, you can select it, you can save it, it's communicating with the local json-server. And you can see here that we have this item's button, we will be creating a widgets button that basically puts into that route.
[00:05:27] And we will be building this back up in the context of your widgets feature.
>> Lukas Ruebbelke: As well, we have put up day two examples and plunks. And so, if you go back to onehungrymind.com/fem-examples/. You will see a fresh list of examples that we will be using throughout the workshop today.
[00:06:03]
>> Lukas Ruebbelke: Also personally, between Scott and I our goal is because we've covered quite a bit of the theory. Is to move away from the slides a bit more and actually do more coding. So you can actually start to see a little bit more live coding. We'll probably be in the plunks a bit more, so the slides are gonna pull away.
[00:06:22] They're not gonna be nearly as text heavy. And more so, it's just like let's just see this in the code and kinda go from there. So Scott and I are kind of balancing each other out if you will. But, let's do a quick review before we get in to the routing module.
[00:06:44] So, just to review quickly the big picture, we have our atomic building block which is essentially the component. And the template pair that we're using event binding and property binding to communicate between the two. The metadata is the glue that actually tells Angular this template goes with this component.
[00:07:07] And from there, I really believe that the rest of Angular is fairly, I don't want to say trivial, but it really just plays a supporting role. So you have services that are just JavaScript classes that perform your business logic. And if you need to modify or augment behavior within the DOM but you don't necessarily need a template, then you use a directive.
[00:07:35] And so, I was in an elevator and somebody just like hey, tell me about Angular 2. This is mentally the image that I would try to convey is you have component, a template. They work together to perform a kind of autonomous, like self contained unit of work, in any kind of business logic.
[00:07:55] Then they leverage a service to do that for them. For instance, any kind of server side communication, any kind of rules engine, or anything like that, goes into the service. And then, any kind of additional DOM manipulation would go into a directive. And you can get through that in about 15, 20 seconds, and it's not too hard.
[00:08:19] So we have shifted things around a bit from Angular 1, but in a lot of ways I think it's actually become a little bit more straight forward.