Components in action

Enough of theory! Let's build a component tree based on the class hierarchy illustrated in the preceding diagram. This way, we will demonstrate how we can take advantage of the composite pattern for building a user interface using simplified syntax. We will take a look at a similar example in the context of Angular in Chapter 5, Getting Started with Angular Components and Directives:

Composite c1 = new Composite(); 
Composite c2 = new Composite(); 
Composite c3 = new Composite(); 
 
c1.components.push(c2); 
c1.components.push(c3); 
 
Leaf l1 = new Leaf(); 
Leaf l2 = new Leaf(); 
Leaf l3 = new Leaf(); 
 
c2.components.push(l1); 
c2.components.push(l2);  
c3.components.push(l3); 

The preceding pseudocode creates three instances of the Composite class and three instances of the Leaf class. The c1 instance holds references to c2 and c3 inside the components list. The c2 instance holds references to l1 and l2, and c3 holds reference to l3:

The preceding diagram is a graphical representation of the component tree we built in the snippet. This is a simplified version of what the view in the modern JavaScript frameworks looks like. However, it illustrates the very basics of how we can compose directives and components. For instance, in the context of Angular, we can think of directives as instances of the Leaf class (since they don't own view and, thus, cannot compose other directives and components) and components as instances of the Composite class.

If we think more abstractly for the user interface in AngularJS, we can notice that we used quite a similar approach. The templates of our views compose different directives together in order to deliver a fully functional user interface to the end user of our application.