Angular is one of the widely used frameworks for building SPA applications. Angular made writing the client-side applications more ease by adopting the TypeScript.

Below are the key components in Angular.

• Modules
• Components
• Templates
• Metadata
• Data Binding
• Directives
• Services
• Dependency Injection

Module

In a general essence, the module is used to group the related classes together to achieve the functionality. The same definition is applicable for angular as well. In Angular, a module is a mechanism to group the related components, directives, pipes, services, etc together.

Components

Components play a key role in Angular. Every Angular app must have at least one component.

In Angular, a component represents a specific portion of the user interface (UI).

Each component will contain a selector that will represent the HTML associated with the component. To make a class a component, we need to add @Component({}), decorator.

Templates

The template contains the HTML that needs to be displayed on the user screen. In Angular, the template contains the HTML elements and Angular custom tags/expressions as part of the template. Before projecting the template content, angular transform expressions, and custom tags will be replaced by the associated HTML.

In short, template is a combination of HTML tags + Angular Expressions + Custom tags defined using Angular

Metadata

In general, metadata termed as data about data. In Angular, metadata used to specify how a class needs to be processed by the Angular framework. A class decorator is used to define the metadata about the class. For example, any class that has @Component class decorator attached to it known as a Component.

Metadata defines how a class needs to be processed by the angular framework

Data Binding

Data binding concepts are used to bind the data from your component class to the template that is associated with the component. Below are the various way to bind the data to the view/template

String Interpolation  — represented as “{{ }}” also known as a mustache syntax. Angular process the expressions/variables insides the “{{}}” and insert the output into HTML.

Property Binding  — Allows binding the properties of an HTML element/Angular custom element.

Event Binding  — Allow the application to respond to user actions and inputs.

Directives

Directives are used to add additional behavior to your HTML.

Here additional behavior may be altering the layout page by adding/deleting the HTML elements or additional functionality to your HTML element.

There are two types of Directives

Structural directives can alter the layout of the page by adding/removing the HTML elements. Structural directives prefix with ‘*’

Attribute directives provide additional behavior or modify the appearance of your HTML elements.

Services

In Angular, Services are singleton objects which get instantiated only once during the application lifetime. It contains data that needs to be shared across the application.

The primary objective of service is to organize and share the Business logic, and data with different components of an angular application.

Dependency Injection

Dependency Injection is a process of injecting the dependent objects into a class from an external framework/ class. So that the class can focus on primary responsibility assigned to it. Dependency Injector will take of handling the lifetime of injected dependencies.

using dependency injection, we can externalize the injecting the dependencies to the classes and managing their lifetime.

Originally published at http://www.techmonks.org on December 18, 2019.