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.

</figure>

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.

</figure>

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.

</figure>

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.

</figure>

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.

</figure>

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

</figure>

<br class="clear">

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

</figure>

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

</figure>

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

Run the app and confirm that the background color appears when

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

</figure>

{@a bindings}

Here are the harness and directive in action.

</figure>

{@a second-property}

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

</figure>

The running application displays three heroes:

</figure>

</figure>

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

</figure>

and the method processes it:

</figure>

Here we see the parent and child working together.

</figure>

facilitated by the service:

</figure>

When all dependencies are in place, `AppComponent` displays the user information.

</figure>

{@a service-scope}

Find this example in <live-example name="dependency-injection-in-action">live code</live-example>

and confirm that the three `HeroBioComponent` instances have their own cached hero data.

</figure>

{@a qualify-dependency-lookup}

The result is shown below, with the hero's telephone number from `HeroContactComponent` projected above the hero description.

</figure>

Here's `HeroBiosAndContactsComponent` in action.

</figure>

The logger logic kicks in and the hero display updates

with the "!!!" marker to indicate that the logger was found.

</figure>

The following image shows the effect of mousing over the `<hero-bios-and-contacts>` tag.

</figure>

{@a providers}

The following `HeroOfTheMonthComponent` example demonstrates many of the alternatives and why you need them.

It's visually simple: a few properties and the logs produced by a logger.

</figure>

The code behind it customizes how and where the DI framework provides dependencies.

The `HeroOfTheMonthComponent` constructor's `logger` parameter is typed as `MinimalLogger`, so only the `logs` and `logInfo` members are visible in a TypeScript-aware editor.

</figure>

This is illustrated in the following image, which displays the logging date.

</figure>

</div>

In this contrived example, `SortedHeroesComponent` inherits from `HeroesBaseComponent`

to display a *sorted* list of heroes.

</figure>

The `HeroesBaseComponent` can stand on its own.