Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component's *host view*. The component can also define a *view hierarchy*, which contains *embedded views*, hosted by other components.

A view hierarchy can include views from components in the same NgModule, but it also can (and often does) include views from components that are defined in different NgModules.

The following diagram shows the four forms of data binding markup. Each form has a direction: to the DOM, from the DOM, or both.

This example from the `HeroListComponent` template uses three of these forms.

Angular processes *all* data bindings once for each JavaScript event cycle,

from the root of the application component tree through all child components.

Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.

NgModules provide a *compilation context* for their components. A root NgModule always has a root component that is created during bootstrap, but any NgModule can include any number of additional components, which can be loaded through the router or created through the template. The components that belong to an NgModule share a compilation context.

<br class="clear">

A component and its template together define a *view*. A component can contain a *view hierarchy*, which allows you to define arbitrarily complex areas of the screen that can be created, modified, and destroyed as a unit. A view hierarchy can mix views defined in components that belong to different NgModules. This is often the case, especially for UI libraries.

<br class="clear">

The process of `HeroService` injection looks something like this.

You've learned the basics about the main building blocks of an Angular application. The following diagram shows how these basic pieces are related.

* Together, a component and template define an Angular view.

* A decorator on a component class adds the metadata, including a pointer to the associated template.

Run the app and confirm that the background color appears when

the mouse hovers over the `p` and disappears as it moves out.

{@a bindings}

Here are the harness and directive in action.

{@a second-property}

Here's how the harness should work when you're done coding.

The running application displays three heroes:

Here's the output of a button-pushing sequence:

and the method processes it:

Here we see the parent and child working together.

facilitated by the service: