Angular 9 Fundamentals

Angular 9 Fundamentals Component Driven Architecture


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

Check out a free preview of the full Angular 9 Fundamentals course:
The "Component Driven Architecture" Lesson is part of the full, Angular 9 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas explains that Angular strongly encourages the component architecture by making it necessary to build every feature as a component, and adds that components allow developers to develop custom properties and custom events. Angular has a component hiearchy that leads to better structure and communication within the components of application.

Get Unlimited Access Now

Transcript from the "Component Driven Architecture" Lesson

>> We're now going to talk about pretty much I think one of my all time favorite subjects as a developer especially as an Angular developer. And so for this we are going to use a few slides and we're going to talk about Component Driven Architecture. But first, a little bit of back story, a brief history of Angular.

[00:00:29] So this is not the first time that I've talked about this in a public forum, but it's really, really important to illustrate how we got to where we are now. And so, when I first discovered AngularJS I had spent a lot of time, many, many, many years doing really Flex and Flash.

[00:00:55] And I saw the writing was on the wall, I wanted to get into JavaScript. And I became very frustrated very quickly in the sense that, say what you want about, I think the Flash Player, the Flash platform was a lot of the growing pains they were going through, we're now experiencing it.

[00:01:20] And so there was a lot of structure a lot of definition. And then you move into, I'm using air quotes, a JQuery application, which is most certainly not unless you can consider a bowl of spaghetti or kit kat lasagna as an application framework. Then I went to the next big thing, the major player on the block at that time was backbone which had no opinions whatsoever, and then so I was a little frustrated.

[00:01:54] And then I discovered AngularJS, which was magical, you had this kind of view model paradigm. And you could write very tiny apps very quickly with a tiny view and a tiny controller. And I became very, very excited about, in fact, you don't even need a controller with AngularJS, you just can actually put something in the view.

[00:02:16] So I got excited and I said, I think I wanna build something ambitious. And so I went and not only that, I'd like to get paid for it. So I went to my employer at the time and I said, I wanna give this a shot. And so we started building applications and they started to grow and get bigger until this is what we ended up with, is this application which really consisted of a single template and a single controller.

[00:02:50] And it was kind of this, moment because when you're working on a large team, or even a team with more than two people, and you need to work in the same file. Well, that becomes very problematic to where you have to start making deals like okay, I'm from line zero to 1000.

[00:03:10] Don't touch that but anything over line 1000 you can work on. It's not a great experience. And so what 1.x came up with, really some architecture opinions started to emerge. The first one was using named routes is that you would essentially create, a router outlet and say this is sidebar.

[00:03:34] This is content, this is footer, and then you would essentially load a template and a controller into that named route. So you still have that template controller pattern, it's just getting broken down. The other more prevalent one is or I was actually not as prevalent, but in hindsight, is that creating directives or custom elements that you could do the same thing.

[00:04:00] Which is the precursor for really any angular application today. And this is again, hats off to React, I think they really accelerated frontend development by leaps and bounds when they introduce this component driven components centric approach to application development. Now, what I think is interesting is the extension of that which I've started to see a lot more is native or just basic native web components.

[00:04:35] And you can achieve that with Angular, which I think is really interesting is that now the idea is, you don't even have to target a specific framework. Use whatever framework you're comfortable with. And if you compile into a web component, well then it doesn't matter. And so I know even one of my friends.

[00:04:56] Here is a large application for a very large company. And they have React 1.x Angular components, but because they're being compiled into web components, it doesn't matter. So I really believe that's where the future of web is going is to kind of these web components that are really framework agnostic.

[00:05:17] So, this is how every Angular component, or Angular application by design is developed, is that you now break things into components that have a template. And now what used to be a controller is a component class. And so this helps us solve a couple of really important problems.

[00:05:40] The first one is structure. How do you structure your application in a way that's scalable, that it's portable, that it's stable, it's extensible, all the ables? And by breaking things into components, this helps solve that problem. The other pieces that helps solve the problem of communication, is that when data changes, or there's a state mutation in your application, how do you communicate that?

[00:06:11] Well, if you have a bunch of components and they're mishmash together, it's very hard to reason about this needs to go here and this needs to go here. But by having a sane and clear component hierarchy, that with a unidirectional data flow, which I'll talk about just a minute, that not only solves a structural problem, but the communication problem.

[00:06:34] Make a little mental note of that because I'm going to come back and talk about that in kind of a tada, kind of a moment here. So, with that said, the idea is to break things into kind of these self encapsulated components that handle like a single piece of functionality.

[00:07:00] And so the question I want to ask is, we've played around with event binding we've played around with property binding. But what if we had the ability to create a component and define our own custom properties that we could bind to, and our own custom events? So this is where when you're talking about really components, it the introductory level, property binding is not that interesting.

[00:07:33] But what if you had a child component that you could define a custom property to pass data into? And so what if we could define custom properties and events to bind to? Well, we can and that's in the form of inputs and outputs. And so you can pass data into a child component via its template via an input.

[00:08:01] You can capture the output of a child component via an event or a custom output. And so, when you have an Angular application in a child and a parent exist, we have a parent then you have a child component. Where is the surface area that they exist? How do we get a component onto the page.

[00:08:27] Well, we use the selector. And so this selector of the child component lives in the parents template. And so that's where they kind of intersect where that they bought up against each other. And so, what this looks like it's from the parent, you're passing a property or you're binding to a property on the child component.

[00:08:50] And you're just listening for an event. But on the child component is that's coming in via an input, and you're emitting the event via output. And so I'm going to skip these tech slides here and I think let's get right into the code. So I think sometimes not sometimes, but a lot of times it's easier to kinda look at a high level.

[00:09:16] It kind of some pictures and so that's where, with the arrows and stuff, it's very easy for, I think, at least for me to see but then from here, let's get into the code. And so what we have here is kind of this large component and if we look at this, if we look at it being rendered.

[00:09:47] This could certainly be a standalone component. And this could be a standalone component. And so let's break these out. And let's do this in a way that not only we can reuse it, but we can control the structure and the communication that happening around that. So let's hop into our command line.

[00:10:10] And let's generate some components. So let's do ng, g, and we're going to do c and let's do courses. And we'll do courses-list. And I'm gonna do d because I don't know what's gonna happen, or it could go awry. So what happened here is is saying I don't know what module to put this component in.

[00:10:45] The reason being is in the, Rich directory, we now have two modules. So this is where when you come in, I think it's app module = or rather module = app.module and doing this from memory, so if I mess this up, it's certainly not module There we go.

[00:11:29] And so now I'm saying specifically add this in or generate this but hook this up into the app module. And so of course/courses-list. Very good. So I'm gonna take this off and we're going to do this for real. Now let's do one more so in ng g c courses, Course, Details and we'll do module=app.module.ts, we'll do a dry run here, And there we go, so I think we're good, so let me take off the drive on flag.

[00:12:25] And we're going to generate this. So now what I've done is I've created a list component and a details component. So hop back into the code, and now if we look in courses, we have course details so it's a single course. Then we have courses-list. And from here what we can do is let's take and let's go ahead and add this to the dom.

[00:12:57] So if we go here we have, notice I had already picked up app-courses-list, so I'm just gonna close this and I'm gonna go ahead and just comment this out. And then in the course-details, let's go with app-course. Oops, app-course-details. And we're just gonna start over. So app, there we go, super.

[00:13:32] Now, I'm going to comment this out. Let's save this and let's see what wonders I have brought before this workshop. Course-list works, course-details works, boom. So I think everybody just got their money's worth. Probably one of the most relevant things I've done so far today, but I think I can do better.

[00:14:07] So I'm just going to pick up this code that I commented out. So notice I'm refactoring and I'm going to go into the template, the course-list component template, just to be specific in case anybody was wondering. And I'm gonna uncomment this out. Okay? Now, What I'm going to do is, I'm going to remove this event handler for now.

[00:14:47] And I'm also going to remove this event handler for now.