Angular application structure rating not rated
                  Programming Books
                Open Web Directory
           SoftXMLLib | SoftEcartJS
xml products   Home page    contact    site map
Contact Us
Latest Blog Articles:   Latest SEO Articles | RSS Feed
DOM manipulation best practices
JavaScript Module Pattern
How to start developing with the Nextjs
Angular application structure
Write Guest Articles
Articles Archive


The Art & Science of JavaScript ($29 Value FREE For a Limited Time)
The Art & Science of JavaScript ($29 Value FREE For a Limited Time)

Angular application structure


The framework itself consists of several libraries (or modules), each of which contains a certain functionality, and each module consists of a combination of classes and their properties and methods.

Let`s see what the architecture of Angular application is.

Each class has its own functional purpose.

Not all libraries are required for use in the application (Angular App), some are loaded as needed, for example, FormsModule or HttpClientModule.


Let`s analyze the modules, Everything in Angular application architecture is based on modules. Each of them has its own set of structural elements:

  • component - is responsible for part of the web page and includes an HTML template, CSS styles and behavior logic;
  • service - data provider for component;
  • directive - converts a specific part of the DOM in a certain way.

All of the above is collected in the root module, which is commonly called the AppModule.

There can be only one root module, but it can use the functionality of other modules declared in the @NgModule() decorator object in the imports property.

@NgModule() is a decorator that accepts a module describing an object.

The list of object properties:

  • declarations - components, directives and filters of the root module;
  • exports - components, services, directives and filters available for use by developers who will use your module in their development;
  • imports - other modules used in the root module;
  • providers - application services;
  • bootstrap - name of the main component of the application (usually called AppComponent).


A component is a part of the application interface with its own logic. The entire visible part of the Angular App is implemented using components, so you can often hear that the Angular architecture is component based.

The @Component() decorator is responsible for creating the component. The main properties of the object that the decorator recieves:

  • selector - component name;
  • template (or templateUrl) - HTML markup as a string (or the path to an HTML file);
  • providers - list of services that provide data for the component;
  • styles - an array of CSS files, containing styles for the component to be created.


Services are needed to provide data to components. This can be not only requests to the server, but also functions that convert the source data according to a given algorithm. They allow the Angular application architecture to be more flexible and scalable.

The task of the service should be narrow and strictly defined.

It will not be considered a mistake if you implement functionality in components, but it is considered good practice to make all calls to the server and functions that return data inside services.


The purpose of directives is to transform the DOM in a certain way, endowing an element with behavior.

By their implementation, directives are almost identical to components, a component is a directive with an HTML template, but from a conceptual point of view they are different.

There are two kinds of directives:

  • structural - add, remove or replace elements in the DOM;
  • attributes - give the element a different behavior.

They are created using the @Directive() decorator with the configuration object.

Angular has many built-in directives (*ngFor, *ngIf), but often they are not enough for large applications, so you have to implement your own.

Tag cloud







application architecture









data decorator
Rate This Article
(votes 2)

No Comments comments

Post Comment

We love comments on this blog - they are as important as anything we write ourself. They add to the knowledge and community that we have here. If you want to comment then you�re more than welcome � whether you feel you are a beginner or an expert � feel free to have you say.

* = required
Leave a Reply
Name *:
Email *
(will not be published):
Comment *:
Human Intelligence Identification *:
What is the background color of this web page?
Please enter a valid email Please enter a valid name Please enter valid email Please enter valid name Enter valid year
™SoftXML.   Privacy Statement  |  Article Archive  |  Popular Web Development Books