Learn 10 Basic Angular Terminologies

Know more about the building blocks of an Angular application

Have you ever come across some terms quoted by Angular application developers? Have you been working on an Angular application still unclear about directives, data binding, and many more intimidating terms?

Well, go no further. In this article, I am going to make you understand more about the building blocks of any Angular application.

Table of Contents

  1. Modules
  2. Templates
  3. Services
  4. Components
  5. Dependency Injection
  6. Interpolation
  7. Data Binding
  8. Decorators
  9. Metadata
  10. Directives

Modules

Modules enable the application to segregate logically dependent functionalities as different modules in the app. It is a container of the different parts of the application that are grouped together.

Imagine dividing a huge cake into smaller chunks.

Every Angular application has a root module denoted by @NgModule


Templates

The template is the skeleton of the view. It is an HTML template that renders what you see on the browser.

Templates are nothing but HTML pages with added functionalities.

It can be defined in the templateUrl in the @Component annotation.


Services

Service is a class that contains logic that can be used across all the components. It is declared by attaching the @Injectable decorator on the Service class that provides the metadata to inject it as a dependency into the component.

Services that are included at the root level are generally singleton objects that get created once in the entire application.

Services can be used to achieve communication between components.


Components

Components control the view of the application. Every angular application has an app.component which acts as a placeholder for rendering other applications.

Each component consists of the following:

  • HTML (.html) file defining the structure of the view
  • Typescript (.ts) file defining the behavior of the view
  • Style (.css) file defining the styles of the element in the view

Dependency Injection

Injecting a service, function, or a value in the Component as a dependency. A new component class is created along with the dependencies defined in the parameters in the constructor().

Services created with the @Injectable decorator allow Angular to inject it as a dependency into the component.

Imagine DI to be a mechanism by which reusable logic is included in the new component class.


Interpolation

Embedding dynamic values in the markup is called interpolation. The expression between the {{ and }} is computed in the template.

<span>{{ age > 19 ? 'Adult' : 'Underage }}</span>

Data Binding

The communication of data from the application view to the component data is called Data Binding.

Let's understand the types of binding with the help of the following examples:

<span [innerHTML]="text"></span> // Property Binding
<button (click)="clickMe()"></button> //Event Binding
<input type="text" [(ngModel)]="username"> //Two-way data binding
  • Event Binding:

When the user interacts with the view it generates some events. Eg: a mouse click generates a click event. Such events need to handled in the form of action listeners in the component.

In the above example, the click event is triggered on the button click, and clickMe() gets called in the component.

  • Property Binding

When the data gets updated in the view based on the component variables. In the above example, the value of text is defined in the component and passed to the view.

  • Two-way binding

Data communication from the view to the component and vice versa is called two-way data binding. [()] denotes two-way data flow.

ngModel can be used with both one-way and two-way data binding. If you have one-way data binding use [] with ngModel. If you have two-way data binding use [()]


Decorators

Decorators are functions that store metadata about a class or a method using the @<decorator> expression.

Example: @NgModule is a class decorator. In an angular app, a module is defined by the@NgModule decorator which attaches the metadata about the module.


Metadata

Metadata for a component or a service provides the configuration needed by Angular for instantiating it.

@Component ({  // Metadata for the decorator @Component
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
})

Directives

Directives have to ability to control DOM elements in the view.

There are three types of Directives:

  • Components
  • Attribute Directives
  • Structural Directives

Imagine a plain HTML with added features. This is achieved by directives.


Thank you for reading.

I hope this has been helpful. Let me know your feedback in the comments. I would love to connect with you at Twitter | LinkedIn | GitHub

No Comments Yet