A complete diagram with building blocks of an Angular application

We've learned the basics about the main building blocks of an Angular application in the following 3 articles.

Part 1: What Are Modules And Components In Angular?

Part 2: Templates, Directives, Data Binding, Services And Dependency Injection

Part 3: How Routing Works In Angular?

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.

Directives and binding markup in a component's template modify views based on program data and logic.

The dependency injector provides services to a component, such as the router service that lets you define navigation among views.

Tweet about it