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 user interface using simplified syntax. We will take a look at a similar example in the context of Angular in Chapter 4, 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 pseudo-code 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:

Figure 6

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 similar to. 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.

Angular took this approach by introducing new building blocks called components. Components extend the directive concept we described in the previous section and provide a broader functionality. Here is the definition of a basic "Hello world" component:

@Component({ 
  selector: 'hello-world', 
  template: '<h1>Hello, {{target}}!</h1>' 
}) 
class HelloWorld { 
  target: string; 
  constructor() { 
    this.target = 'world'; 
  } 
} 

We can use it by inserting the following markup in our view:

<hello-world></hello-world> 

The alternative ES5 syntax Angular provides using the DSL is as follows:

var HelloWorld = ng.core 
  .Component({ 
    selector: 'hello-world', 
    template: '<h1>Hello, {{target}}!</h1>' 
  }) 
  .Class({ 
    constructor: function () { 
      this.target = 'world'; 
    } 
  }); 

We will take a look at the preceding syntax in more detail later in this book. Now let's briefly describe the functionality that this component provides. Once the Angular application is bootstrapped, it will look at all the elements in the DOM tree and process them. When it finds an element called hello-world, it will invoke the logic associated with its definition, which means that the template of the component will be rendered and the expression between the curly brackets will be evaluated. This will result in the markup, <h1>Hello, world!</h1>.

So, to summarize, the Angular core team separated out the directives from AngularJS into two different parts-components and directives. Directives provide an easy way to attach behavior to DOM elements without defining a view. Components in Angular provide a powerful, and yet simple-to-learn API, which makes it easier to define the user interface of our applications. Angular components allow us to do the same amazing things as AngularJS directives, but with less typing and fewer things to learn. Components extend the Angular directive concept by adding a view to it. We can think of the relation between Angular components and directives the same way as the relation between Composite and Leaf from the diagram we saw in Figure 5.

Conceptually, we can present the relation between Directive and Component as inheritance. Chapter 4, Getting Started with Angular Components and Directives, describes these two concepts in further detail.