7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.1 Component Trees

In this lesson we'll take a look at the architecture of a typical Angular application, and we'll add some more components to the example application.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


3.1 Component Trees

Hi folks. In this lesson, I just wanna spend a few minutes talking about the architecture of a typical application. Building an Angular application is largely building a series of components and wiring them together in order to create different states of the application. We are able to create complex hierarchies of components, starting with a root component, and then having other components nested inside this root component. And perhaps components nested inside these components, and so on and so forth. This tree-like application structure that emerges has a number of benefits like cross component communication and efficient data flow through the application. As a user navigates around our application, Angular will create and destroy the various components that are visible on the screen as necessary, and it will manage the complex tree of components for us. We never need to really be involved in that process but it is useful to understand what happens behind the scenes. So our example application, the JS blackjack game, will need a couple of additional components. We've already got the start component, so let's add an end component and a game component. Great, okay, so as with the start component, we can add the template and some very basic styling for these two components. Let's start with the end component. So again it's just a very simple HTML template at this stage with no special Angular syntax or bindings or anything at all, just some HTML with some class names. This component will need some styling, so let's open up the style sheet for the component. So this is styling that's only gonna be used by the end component itself, and that's why it goes into the end component's style sheets. So the template for the game component in game.component.html is very similar, let's open that up and add it. In fact to save time we can largely copy the template from the end component. It differs slightly in that it doesn't have an end message. And instead of showing the dealer's hand, it shows your hand, the player's hand. But aside from that, it's almost identical. The game component doesn't require any custom styling of its own. But there are a number of class names that are used in both the game and end components. So we can have the styling for these to the global_app.scss file. So last of all, there's one more component that we need to add. That is a controls component that will contain some buttons that are used in both the game and end screens. So let's add that component now. The template for this component will be just a group of buttons in a container div. And the styling for these is also fairly minimal that will just go into the controls.component.scss file. So now we can add the new components that we've added in this lesson into the application. The game and end components can go into the home component. The controls component will be used within both the game and end components. So let's just go back to the browser now. And we can see that we've got all these new elements on the screen, everything's been rendered as it should be. And the application is now built from a number of different components. So in this lesson we learn a little bit about the architecture of a typical Angular application, and we saw that it's largely a collection of components which Angular assembles into a tree at run time. And these components have either a parent, child or a sibling or some other type of relationship. Thanks for watching.

Back to the top