Angular's main building blocks

Every application created using the Angular framework has five very important points that connect to each other and establish the basic architecture of the application:

• Modules: Using the decorator @NgModule
• Services: Using the decorator @Injectable
• Components: Using the decorator @component
• Templates: Views with data-bind and directives
• Routes: Setting URL path to views 

Let's look at a simple blog page as an Angular application, built with components:

The preceding diagram illustrates how components can be used to build a simple application.

A comparison between the preceding diagram and the five basic concepts of an Angular application would look as follows:

• One module: blog.module.ts
• A page component: blog.component.ts
• A route to the blog page
• A service to load the blog posts

There are also some additional components, such as Header, Post, and Pagination.

Note that the Header component belongs to the main module of the application (in this case, the AppModule), and the Post and Pagination components are part of the BlogModule.

As we move through this chapter, we will look more closely at the relationship between modules and components. Now, we will look at the life cycle of a component.