What Is the Architecture of Angular?

Billions of people around the world use web and mobile applications, which offer us smooth user interfaces and experiences. These apps are practical and convenient since they enable us to accomplish nearly anything effectively. We can simply design strong apps with popular frameworks like Angular.

What are the foundations of these frameworks? Angular is largely responsible for enabling the development of apps with sophisticated user experiences. You should become acquainted with its features before you start using it. We will examine some of the most important elements and concepts in this post.

Let’s explore Angular Architecture in more detail!

Angular Architecture Overview

Google created Angular, a client-side front-end framework built with TypeScript, for constructing single-page and dynamic web applications (SPAs). It gives you a structured and quick way to make web apps that are easier to manage, adapt to new requirements, and reuse code. It  uses the Model-View-Controller (MVC) and Model-View-ViewModel (MVVM) design patterns to keep the data (Model), the user experience (View), and the logic (Controller/ViewModel) separate. This separation makes it easier to organize code, test it, and improve it, which makes it perfect for big, complicated projects.offers code reusability.

To better understand Angular’s functionality, let’s dive into its architectural components.

Next, let’s break down the individual building blocks that form the Angular application.

Modules

A component or service within an Angular Module context is joined to form a single element or service. Multiple modules can be created for animation-related functionality, and Angular currently has a module called Browser Animation Module for that kind of functionality.

An Angular application can have a fixed number of deployed modules, but there can only be one core module, which bootstraps the application and calls other modules as needed. Any module’s components can access other modules’ components and services.

The given diagram demonstrates how a module affects its components and how those components affect the module:

Angular apps are designed to be modular, so let’s look at the different types of modules you’ll come across.

Types of Modules in Angular

Core Module/Root Module

An Angular application always includes at least one root module, known as the AppModule. This module is defined in the app.module.ts file. As the top-level module, it acts as the main entry point of the application and organizes the import of all other modules.

Feature Module

Feature modules are designed to group related components, directives, pipes, and services. This modular approach helps in organizing the codebase and enhancing the application’s scalability.

Shared Module

A shared module contains commonly used functionality that can be reused across applications. Feature modules can import the shared module whenever they need its resources, promoting code reusability.

Example: app.module.ts

Javascript:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';<span id="7253" class="ok nh fq og b hf op om l on oo" data-selectable-paragraph="">import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';</span><span class="ok nh fq og b hf op om l on oo" data-selectable-paragraph="">@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule

Now that we’ve covered how modules function, let’s take a look at Angular components, which are another important aspect of the framework.

Components

Components are the building blocks of all Angular applications, which are made up of one or more Angular Components. These are just HTML templates and names for simple JavaScript or TypeScript classes.

If a component’s HTML template has a selector’s value (name), it can access data from the component or JavaScript/Typescript class that corresponds to it. The HTML template may access the CSS styles that are linked to angular components.

javascript:

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'AngularApp';
}

To understand the role of components, consider how they interact with templates and styles.

Templates

The view of a component is set by its corresponding template. An HTML document known as a template directs Angular on how to render the component.

A template seems similar to standard HTML, with a few exceptions.

This is an example of a list of of items:

HTML

</pre>
<h2>Item List</h2>
<p><i>Pick an item from the list</i></p>

<ul>
  <li *ngFor="let item of items" (click)="selectItem(item)">
    {{ item.name }}
  </li>
</ul>

<item-detail *ngIf="selectedItem" [item]="selectedItem"></item-detail>

Although this template uses standard HTML elements like <h2> and <p>, it also incorporates Angular’s template syntax. Expressions such as *ngFor, {{item.name}}, (click), [item], and <item-detail> are specific to it and help create a dynamic user interface.

The <item-detail> tag in the last line of the template is a custom element representing a different component called ItemDetailComponent.

The ItemDetailComponent is separate from the ItemListComponent. It is responsible for displaying details about the specific item selected from the list in the ItemListComponent. The ItemDetailComponent functions as a child of the ItemListComponent.

This diagram depicts an Angular application’s hierarchical structure, with components serving as the building blocks and templates defining the layout.

Look at how <item-detail> works seamlessly with the components that are inherent to HTML. Standard HTML and custom components coexist harmoniously in the same layouts.

Templates are essential for rendering material. Let’s look at how directives and Angular-specific syntax make templates dynamic and usable.

Directives

AngularJS directives add additional syntax to HTML, extending it. Directives are easy to identify because they start with “ng-.” They can be thought of as markers on the DOM element that tell AngularJS to add a specific behavior or alter it completely.

Types of Directives:

</pre></pre>
div class="card">
  <p>ngSwitch Example</p>
  <div class="card-body">
    <label>Input string:</label>
    <input type="text" [(ngModel)]="num" />
    
    <div [ngSwitch]="num">
      <div *ngSwitchCase="'1'">One</div>
      <div *ngSwitchCase="'2'">Two</div>
      <div *ngSwitchCase="'3'">Three</div>
      <div *ngSwitchCase="'4'">Four</div>
      <div *ngSwitchCase="'5'">Five</div>
      <div *ngSwitchDefault>This is Default</div>
    </div>
  </div>


  <p>ngFor and ngIf Example</p>
  <div *ngFor="let emp of employee">
    <ng-container *ngIf="emp.age >= 30">
      <p>{{ emp.name }}: {{ emp.age }}</p>
    </ng-container>
  </div>


  <!-- Attribute Directive: [ngStyle] -->
  <p [ngStyle]="{ 'color': 'blue', 'font-size': '12px' }">
    ngStyle Example
  </p>


  <!-- Custom Directive: ng g directive uppercase -->
  <div>
    <input type="text" appUppercase placeholder="Enter text" />
  </div>
</div>

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'AngularApplication';
num: number = 0;
employees: Employee[] = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 37 },
{ name: 'Doe', age: 26 }
]; }
class Employee {
name: string;
age: number;
}

import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root',
})
export class CounterManager {
private value = 0;
increase(): void {
this.value++;
}
retrieveValue(): number {
return this.value;
}
}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EmployeeListComponent } from './employee-list/employee-list.component';
import { CreateEmployeeComponent } from './create-employee/create-employee.component';
import { UpdateEmployeeComponent } from './update-employee/update-employee.component';
import { EmployeeDetailsComponent } from './employee-details/employee-details.component';
const appRoutes: Routes = [
{ path: 'employee-list', component: EmployeeListComponent },
{ path: 'add-employee', component: CreateEmployeeComponent },
{ path: '', redirectTo: 'employee-list', pathMatch: 'full' },
{ path: 'edit-employee/:id', component: UpdateEmployeeComponent },
{ path: 'employee-info/:id', component: EmployeeDetailsComponent }
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
}) export class MainRoutingModule { }

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
selector: 'app-post-list',
templateUrl: './post-list.component.html',
styleUrls: ['./post-list.component.css'],
})
export class PostListComponent implements OnInit {
posts: any[] = []; // Array to store the retrieved posts

constructor(private httpClient: HttpClient) {}

ngOnInit(): void {
this.httpClient
.get<any[]>('https://jsonplaceholder.typicode.com/posts')
.subscribe((response) => {
this.posts = response; // Assign fetched data to the posts array
});
}
}