Angular Core Angular Core

Refactor App Into Components

Check out a free preview of the full Angular Core course:
The "Refactor App Into Components" Lesson is part of the full, Angular Core course featured in this preview video. Here's what you'd learn in this lesson:

Lukas discusses custom imports and exports, then starts to refactor the app into components.

Get Unlimited Access Now

Transcript from the "Refactor App Into Components" Lesson

[00:00:03]
>> Lukas Ruebbelke: So I left the previous module with a real cliffhanger around shared mutable state. So if I refresh this, you'll notice I select this. As I start to type, this is being updated or mutated in multiple places. So JavaScript, pass by reference, this is why you see this phenomena.

[00:00:29] So this sets the stage for a couple of things, or at least highlights one of the needs to think about how we're structuring our components. So it's probably a bad thing that if I'm in this over here, and it's updating over here, not good. And so we need to find a way to kinda break this out and hedge against the shared mutable state.

[00:01:02] Which leads to, I believe one of my favorite topics when it comes to Angular. And we started to see kinda the hints of this in AngularJS with directives and isolated scope, and the API around that was kinda weird. But with Angular, fortunately, they settled on this idea that everything should be a component, and that we have inputs and outputs.

[00:01:34] So remember when I talked about property bindings, that you can put data from a component into a template? Well, you can put data into a component template, that is from a parent to a child. And that is essentially a custom binding or a custom input. And then if something happens in that child, how do you know about it?

[00:01:56] Via a custom output. And so we're familiar with, we're binding to a property that when it updates, so does our template. And if something happens in our template, we're going to communicate that back to our component, so property binding, event binding. So now the question is, if we had custom property bindings and custom event bindings, what would that look like?

[00:02:23] Because now you could create a perimeter around a component, and choose what goes in and what comes out. So in our projects.component.html, just by scrolling down here, and this is approximately 70 lines of code, so not bad. But it would be very hard for somebody to just scroll through and be like, I know what happened, I know what's in here.

[00:02:50] That, this is a bit heavy. And so what we're going to do is, we're going to break this into child components. We're gonna show how to communicate to those child components, and in doing so, solve the shared mutable state problem. So opening up the console, let's generate some components, ng g c.

[00:03:21] And we're going to put this in the projects folder, and let's go with projects-list.
>> Lukas Ruebbelke: I feel like maybe I might be missing something. But let's do this as a dry run and just see what happens.
>> Lukas Ruebbelke: Okay, so far, so good. So we'll do this again, ng g c projects/projects-list.

[00:03:52] We'll run this without the dry run flag. And since we're here, ng g c projects/project-details. I don't think I need to dry run that. Now let's look into our file structure here, so projects. And now within the projects feature component, or everything that is in the projects, are now nesting.

[00:04:30] Or we're saying project-details and projects-list belongs under this main projects feature. And then if we look in here, you'll notice that because we generated it with the CLI, there's quite a bit of consistency here.
>> Lukas Ruebbelke: If we look at the project.module, let me just zoom this back down.

[00:04:58]
>> Lukas Ruebbelke: You'll notice that in the declarations is obviously the ProjectsComponent. But the CLI has went ahead and,
>> Lukas Ruebbelke: Added this to our module.
>> Lukas Ruebbelke: And from here, let's go into our projects.component.html.
>> Lukas Ruebbelke: And let's just take this for a moment, and I'm going to chop out the template.

[00:05:30] We're going to go into projects-list. And I'm just going to paste this in, and I'm gonna leave this here for just a moment. I'm just gonna comment this out, we'll be back.
>> Lukas Ruebbelke: Let's just verify that everything is working, h1, PROJECTS LIST IS WORKING. Now what we'll do as well, why not, let's go into our project-details.

[00:06:05] And we'll go ahead and chop this out.
>> Lukas Ruebbelke: And it looks like I missed that bottom, so let me just re-select this.
>> Lukas Ruebbelke: Now in the project-details template,
>> Lukas Ruebbelke: Let's just go ahead and,
>> Lukas Ruebbelke: Big h1, cuz I think it's more bold, PROJECT DETAILS WORKS! All right, so when we refresh this, obviously, nothing's here.

[00:06:46] Let's go into our projects.component. And we'll go, close that off, app-project-details.
>> Lukas Ruebbelke: Sure, you can do that when I'm doing a generic, but you can't do it when I'm actually in the template, okay?
>> Speaker 2: [INAUDIBLE]
>> Lukas Ruebbelke: Is it?
>> Lukas Ruebbelke: You'd think it would just pick that up on auto-complete, right?

[00:07:27]
>> Lukas Ruebbelke: It looks like I'm going back to WebStorm.
>> Lukas Ruebbelke: Okay.
>> Lukas Ruebbelke: So would anybody agree with me that this is a little easier to parse what's happening? Hey, it's a projects list, and it's some project details. So one of the upsides of components and custom HTML selectors is that allows you to turn your HTML into a DSL.

[00:08:02] And so this is, you don't really hear people talk about this a lot. But, so we've heard about Symantec Web. But being able to create custom elements that, for instance, stakeholders or nontechnical people can look at and say, well, that's a projects list, and this is a project details thing.

[00:08:23] This is really handy when not only are you able to communicate to other developers, but also there's a massive, I think, return on investment when you can communicate to non-stakeholders. And they can look and they can understand what's happening.