ADVERTISEMENTS

Angular Architecture

Angular follows a component-based architecture, where the application is composed of reusable building blocks called components. Each component consists of three parts:

  • Template : Defines the HTML structure and user interface of the component.
  • Class : Defines the component's behavior and logic.
  • Metadata : Provides additional information about the component, such as its selector, inputs, outputs, and dependencies.

The components are organized into modules, which are used to group related components and services together. Modules are also used to define the application's dependency injection hierarchy. Angular also includes several other key architectural features:

  • Dependency Injection : A powerful technique for managing the dependencies between components and services, which makes it easy to replace or substitute components and services as needed.
  • Services : Reusable code that provides functionality to multiple components. Services are typically injected into components using dependency injection.
  • Directives : A way to add behavior or modify the appearance of HTML elements. Directives can be used to create custom elements, add event listeners, manipulate the DOM, and more.
  • Pipes : A way to transform data before it is displayed in the user interface. Pipes can be used to format dates, numbers, and strings, or to filter and sort lists of data.

Overall, the Angular architecture is designed to promote modularity, reusability, and maintainability, making it easier to build complex web applications that can scale and evolve over time.

ADVERTISEMENTS

Modules

Modules are a fundamental building block of Angular applications. A module is a container for a cohesive block of code that represents a feature, a workflow, or a set of related functionality.

In Angular, modules are defined using the @NgModule decorator, which is a function that takes an object literal as its argument. The properties of this object define the metadata for the module. Here is an example of an Angular module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

In this example, we import the NgModule decorator from the @angular/core module. We then apply the @NgModule decorator to the AppModule class, passing in an object literal that defines the following properties:

  • Imports : Specifies an array of modules that this module depends on. In this example, we import the BrowserModule and FormsModule modules.
  • Declarations : Specifies an array of components, directives, and pipes that belong to this module. In this example, we declare the AppComponent component.
  • bootstrap : Specifies the root component that should be used to bootstrap the application. In this example, we bootstrap the AppComponent.

Modules can also define providers, which are services that can be injected into components and other services. Providers are defined using the providers property of the @NgModule decorator.

Angular also provides a set of built-in modules, such as the HttpClientModule, which provides a simplified API for making HTTP requests, and the RouterModule, which provides routing functionality. These modules can be imported into an application module or into a feature module.

ADVERTISEMENTS