Angular Architecture Overview & Concepts

It is very important to know how the framework works before you start using it. In this article let us look at some of the important Angular building blocks (Angular Architecture ) and concepts.

The first big change in Angular over AngularJs is Components. The Components replace the Controllers of AngularJs. But that is where the similarity ends. Angular Components do not look like Controllers.  The Components are actually similar to the directives of AngularJs.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

Angular Architecture

The  Architecture of an Angular Application is based on the idea of Components.  An Angular application starts with a Top-level component called Root Component. We then add child components forming a tree of loosely coupled components.

A Typical Angular Application

A simple Task List Application in Angular

Consider a Simple Task List Application shown above. The Application shows a list of Tasks and at the bottom, you have the option to add a new task.

The above application a simple application, but if you look at the Angular code, you will see that it comprises several parts. You can see that in the image below. You can see that is consists of three components, Services that gets injected into the components and directives that help to manipulate the DOM

Angular Architecture Overview and Concepts

Our application has three Components. At the top we have rootComponent. Under the rootComponent, we have two other components. One is TaskComponent, which displays the list of Tasks and TaskAddComponent, which allows us to create new tasks.

The Angular Components are plain javaScript classes and defined using @component Decorator. This Decorator provides the component with the View to display ( known as Template) & Metadata about the class

The Components uses data binding to get the data from the Component to our View (Template). We use the special HTML markup knows as the Angular Template Syntax to achieve this.


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

At the right side, we have an Angular Services. The Angular Services provides services to our Component, like fetching data from database using Task Service, logging application events using logger Services and making an HTTP request to the back-end server using HTTP service.

The Responsibility to provide the instance of the Service to the Components falls on Angular Injector. It injects services into the components using Dependency Injection

We also have Directives, which help us to manipulate the structure (structural directives) or style (attribute directive) our application. The directives help us to transform the DOM as per our needs.

Angular Modules

As seen from the above diagram the Angular Application consists of several building blocks like Components, Services, Directives. We create more such blocks as the application grows. The Angular provides a nice way to organize these building blocks using the concept called Angular Modules.

We will create components, services, and directivesand put them inside the Angular Modules. We use the special directive to create the Modules. The Angular Module also called as ngModule

Use Angular Module ( or ngModule) to organize of the Angular code within a bigger Angular Application. The Application is made up of several Angular Modules acting together. Each Module implementing a specific feature or functionality of the application. 

Javascript Modules (ES2015)

Do not confuse Angular Modules with JavaScript Modules. The Angular Modules are specific to Angular. The JavaScript Modules are part of the JavaScript language specification. The ES2015 specifications set the standard for defining modules.

In JavaScript as per the ES2015 specification, each file is a module. There is one module per file and one file per module.

These Modules define the scope of the variables, functions, and classes defined inside the module. These variables are always local to the module and are not visible outside the module

The modules without public methods or properties are useless. The modules help us to create public members by using the Export statement. The other modules can use these public members using the Import statement.

Angular uses the JavaScript modules via the Typescript.

We build Component, Services, directives using the JavaScript Module. Each Component is a JavaScript Module. Each Service is a JavaScript Module. And then we combine them together using the Angular Module.

Anatomy of Angular JavaScript Module

In Angular Application, we mainly build Components, Services & Directives. Angular provides a very consistent way to define these building blocks. These are defined inside a JavaScript Module and follows the pattern shown below

The above example has three Parts, An import statement at the beginning. A class (AppComponent) at the bottom, which we define with an export statement. We decorate the class with a decorator @Component immediately above the class.

Import Statement

The import statement tells Angular where to find the external functions that we are using in our module. All the external dependencies like third party libraries, our own modules or modules from Angular must be imported. An Import statement is part of the ES2015 specifications. It is similar to the Import statement of Java or Using statement of C#

You can import only the exported members from the other modules.

The class

The Class contains the logic of the application. It can contain methods & properties just like c# or java classes. The class must be defined with the export keyword if you want to use the class in another module.

The class Decorator

AppComponent is just a class. There is nothing Angular about it. It is the decorator, which tells angular how to treat the class.

For Example, @Component decorator tells the Angular that the Class is a Component. Similarly, a @Directive tells the Angular that the class is a Directive. Angular currently has following class decorators

  1. @Component
  2. @Directive
  3. @Injectable
  4. @NgModule
  5. @Pipe

Building Blocks of Angular Application

Looking at task application in the previous section, you can identify the seven main building blocks of an Angular Application.

  1. Component
  2. Templates
  3. Metadata
  4. Data Binding
  5. Directives
  6. Services
  7. Dependency Injection

Component

The Angular Component is a class, which we decorate by @Component class decorator

The Component controls the part of our user interface (or view). The Task List application listed above has three components. The TaskComponent displays the list of Tasks The TaskAddComponent helps us to create new tasks. The rootComponent is the Parent component of these components and it only displays the name of the application.

The component, that we had created in the Create Your First Angular Application as shown below

The Component has four important parts

  1. Import Statement
  2. Class
  3. Template
  4. Metadata

The Import statement imports the dependencies required by this component. The class contains the application logic. It is decorated by the @Component class decorator.

Template

The Component needs a View to display. The Template defines that View.

The Template is just a subset of HTML, that tells Angular how to display the view. It is a normal HTML page using tags like h1, h2, etc. It also uses the Angular-specific markup like {} (for interpolation), [] (for Property binding) etc.

Metadata

Metadata tells angular how to Process the class.

We attach the Metadata to a class using a class decorator. When we attach @Component class decorator to the class, then it becomes Component class.

The class decorator uses the configuration object, which provides the Angular information it needs to create the component. For Example, @Component directives come with configuration options like selector, templateURL (or template), directives, etc

Data Binding

Angular uses the Data Binding to get the data from the Component to our View (Template). This is done using the special HTML Angular-specific markup known as the Template Syntax

The Angular supports four types of Data binding

  1. Interpolation
    Data is bind from component to View
  2. Property Binding
    Data is bind from component to the property of an HTML control in the view like
  3. Event Binding
    The DOM Events are bind from View to a method in the Component
  4. Two-way Binding/Model Binding
    The data flow in both directions from view to component or from component to view

Directive

The Directives help us to manipulate the view.

A directive is a class, which we create using the @Directive class decorator. It contains the metadata and logic to manipulate the DOM

The Views are created by the Angular by using the Templates defined in the Components. These templates are dynamic and are transformed as per the Directives.

Angular supports two types of directives. One is structural directives which change the structure of the View and the other one is attribute directive, which alters the style of our view.

Services

The Services provide service to the Components or to the other Services.

Angular does not have any specific definition for Services. You just create a class, export a method, that does some specific task and it becomes a service. You do not have to do anything else.

For Example.

And in any of our controllers, we can just invoke it using

These are plain Javascript Modules. There is nothing Angular about these Services.

What Angular does is to make these services are available to the components using what is known as dependency injection.

Dependency Injection

Dependency injection is a method by which, a new instance of a service is injected into the component, which requires it.

The dependencies injection is mostly used to inject services into components or to other services.

The Angular does this using the injector. When a component is created, Angular looks at the Component Metadata for the Services, on which the Component is required. The injector then creates the instance of the Service and injects it into the component using its constructor.

If the service is already created, then the injector does not create the service but uses it. The Service needs to tell the Angular that it can be injected into any components, which requires it. This is done by using the @Injectable call decorator

Now our MyLogger class can be injected into any component or services

References

  1. Angular Architecture

Summary

We’ve learned how an Angular application looks like. We also learned about the Angular Architecture concept. The building blocks for the Angular application are components, directives, template, metadata, services & dependency injection

6 thoughts on “Angular Architecture Overview & Concepts”

    1. Thanks for the inputs.
      We converted images from jpeg to webP. That is the reason why quality suffered.
      We have now reverted back to jpg.
      Please check again

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top