Angular 2 - Architecture - Part One

New to Angular and wondering how all the different pieces fit together? Read on for a brief description of the architecture of this popular framework.

In this article, we shall see the building blocks in an Angular Application.

Module

Angular Application is modular in nature. Therefore, an Application is just a collection of the individual modules.

Modules are just blocks of code, which are created for a specific purpose.

Because of this, each module exports something like a value or a function or a class, which the other module can import and make use of.

In fact, an Angular framework itself is a collection of library modules.

Next building block is called a Component. We have already seen that we have a module, which has a block of code within them and this is nothing but a component.

Component

A Component is usually a JavaScript class with some metadata attached to it. This metadata tells us how to process this particular class.

For e.g. In metadata, we might have an HTML, which is going to be a view for our Component and our class contains a logic, which influences particular view. Let's say that we have a Web page, where we have a navigation bar and main content. Now, we are going to create a component for each of these individual functionalities.

Root

In our Angular Application, we will have at least one component called Root Component and all the other components are going to fall under this Root Component.

In this way, our Entire Application is broken down in to easily manageable views.

Let's say we have sample piece of code given below. We are going to have Body tag, within the Body tag; we have root component and this component is nothing but a custom HTML tag.

<body>
<root>
<comp1></comp1>
<comp1></comp1>
</root>
</body>

Directives

It’s nothing but some sort of instruction, which allows us to modify DOM or extend its behaviour.

In simple words, Directives are nothing but some Metadata and Class.

E.g.

<p *ngif=”rathrola”>Prem</p>   

Services

If a component wants to get some data form a Server, then it might have a function to do so.

Another component wants to get the data, Component and same function.

In order to avoid duplications, we make use of Servers.

A Service is nothing but a class, which gets the data or the configuration from the Server and after doing so, we will inject the Service to the two components. When we injected these two components, we make use of Services.

Any logic, which is not related to the view will be residing inside the Services.