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.
app binding data dependency diagram directives services Templates