Angular Architecture

Why Do You Need Angular?

Developers need Angular because:

1. Modular Development: It organizes code into modules, making it reusable and easier to maintain.
    
2. Two-Way Data Binding: Ensures synchronization between the UI and the underlying data model.
    
3. Cross-Platform Support: Applications built with Angular can run on web, mobile, and desktop.
    
4. Rich Ecosystem: Angular includes tools like Angular CLI, HTTP client, and state management libraries.
    
5. Large Community: Being widely adopted, it has extensive documentation and community support.

What are the Different Angular Versions?

Angular has evolved significantly since its initial release. The first version, AngularJS, was launched in 2010. It introduced two-way data binding & made it easier to build dynamic web applications. However, AngularJS had limitations in terms of performance & scalability.

In 2016, Angular 2 was released. It was a complete rewrite of AngularJS & introduced a component-based architecture. This made the framework more modular & efficient. Angular 2 also added support for TypeScript, a statically typed language that improved code quality & maintainability.
 

Since then, Angular has been regularly updated with new versions. Angular 4, 5, 6, & so on brought improvements like faster rendering, smaller bundle sizes, & better tooling. Angular 9 introduced Ivy, a new rendering engine that made applications faster & smaller. The latest versions, like Angular 14 & 15, focus on improving developer experience & adding new features.

Each version of Angular builds on the previous one, ensuring backward compatibility while introducing new capabilities. This makes it easier for developers to upgrade their applications & take advantage of the latest features.

Features of Angular

Angular is packed with features that make it a powerful framework for building modern web applications. Let’s understand some of its most important features with examples to understand properly:

1. Component-Based Architecture

Angular uses a component-based architecture, which means the application is divided into small, reusable components. Each component has its own logic & template, making the code modular & easy to maintain. For example: 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to Angular!</h1>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Angular App';
}

In this code:

• `@Component` is a decorator that defines the component.
   
• `selector` is used to embed the component in HTML.
   
• `template` contains the HTML code for the component.
   
• `styleUrls` links the component to its CSS file.

2. Two-Way Data Binding

Angular’s two-way data binding synchronizes the data between the model & the view. When the data in the model changes, the view updates automatically, & vice versa. For example:

<input [(ngModel)]="name" placeholder="Enter your name">
<p>Hello, {{ name }}!</p>

In this example:

• `[(ngModel)]` binds the input field to the `name` property.
   
• When the user types in the input field, the `name` property updates, & the text below the input updates automatically.

3. Dependency Injection

Dependency Injection (DI) is a design pattern used by Angular to make components & services loosely coupled. DI allows you to inject services into components without hardcoding them. For example:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Data1', 'Data2', 'Data3'];
  }
}

To use this service in a component:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `<ul><li ngFor="let item of data">{{ item }}</li></ul>`
})
export class AppComponent {
  data: string[];

  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

In this example:

• The `DataService` is injected into the `AppComponent` using the constructor.
   
• The `getData()` method is called to fetch data, which is then displayed in the template.

4. Directives

Directives are used to manipulate the DOM. Angular provides built-in directives like `ngIf`, `ngFor`, & `ngClass`. Here’s an example of `ngFor`:

<ul>
  <li ngFor="let item of items">{{ item }}</li>
</ul>

In this example, `ngFor` loops through the `items` array & creates a list item for each element.

5. Forms

Angular provides two types of forms: template-driven & reactive forms. Here’s an example of a template-driven form:

<form myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <input name="username" ngModel placeholder="Username">
  <input name="password" ngModel placeholder="Password">
  <button type="submit">Submit</button>
</form>

In this example:

• `ngForm` creates a form object.
   
• `ngModel` binds the input fields to the form.
   
• `(ngSubmit)` is an event that triggers when the form is submitted.

Angular Architecture

Angular’s architecture is designed to make web development efficient & scalable. It follows a modular structure, where different parts of the application are organized into modules, components, services, & more. Let’s break down the key elements of Angular’s architecture:

1. Modules

Modules are containers for different parts of the application. Every Angular app has at least one module, called the root module (`AppModule`). Modules help organize the application into cohesive blocks of functionality. Let’s take an example of a basic `AppModule`:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';


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

In this code:

• `@NgModule` is a decorator that defines the module.
   
• `declarations` is used to declare components, directives, & pipes that belong to this module.
   
• `imports` is used to import other modules that this module depends on.
   
• `providers` is used to register services.
   
• `bootstrap` specifies the root component that Angular should bootstrap when the application starts.

2. Components

Components are the building blocks of an Angular application. Each component consists of:

• A template (HTML) that defines the view.
   
• A class (TypeScript) that defines the logic.
   
• Metadata (decorators) that define how the component behaves.
   

For example: 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>{{ title }}</h1>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Architecture';
}

In this example:

• The `selector` is used to embed the component in HTML.
   
• The `template` contains the HTML code for the component.
   
• The `title` property is bound to the template using interpolation (`{{ }}`).

3. Services

Services are used to share data & functionality across components. They are typically used for tasks like fetching data from a server, logging, or handling business logic. Let’s take an example of a service:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Data1', 'Data2', 'Data3'];
  }
}

To use this service in a component:

import { Component } from '@angular/core';
import { DataService } from './data.service';


@Component({
  selector: 'app-root',
  template: `<ul><li ngFor="let item of data">{{ item }}</li></ul>`
})
export class AppComponent {
  data: string[];


  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

In this example:

• The `DataService` is injected into the `AppComponent` using the constructor.
   
• The `getData()` method is called to fetch data, which is then displayed in the template.

4. Templates

Templates define the view of a component. They are written in HTML & can include Angular-specific syntax like interpolation, directives, & bindings. Let’s take an example of a template:

<h1>{{ title }}</h1>
<p ngIf="showMessage">This is a message.</p>
<button (click)="toggleMessage()">Toggle Message</button>

In this example:

• `{{ title }}` is an example of interpolation.
   
• `ngIf` is a directive that conditionally displays the `<p>` element.
   
• `(click)` is an event binding that calls the `toggleMessage()` method when the button is clicked.

5. Metadata

Metadata is used to define how a component or service behaves. It is provided using decorators like `@Component`, `@NgModule`, & `@Injectable`. For example:

@Component({
  selector: 'app-root',
  template: `<h1>{{ title }}</h1>`,
  styleUrls: ['./app.component.css']
})

In this example, the `@Component` decorator provides metadata for the `AppComponent`.

6. Dependency Injection

Dependency Injection (DI) is a design pattern used by Angular to make components & services loosely coupled. DI allows you to inject services into components without hardcoding them. For example:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `<ul><li ngFor="let item of data">{{ item }}</li></ul>`
})
export class AppComponent {
  data: string[];

  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}
```

In this example, the `DataService` is injected into the `AppComponent` using the constructor.

7. Routing

Routing allows you to navigate between different views in your application. Here’s an example of setting up routing:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';


const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In this example:

• The `routes` array defines the paths & their corresponding components.
   
• The `RouterModule` is configured with these routes.

State Management

State management involves managing the state of the application effectively. Angular applications use libraries like NgRx or Akita for advanced state management.

HTTP Client

The Angular HTTP Client is used to interact with backend APIs to fetch or send data.

Example:

import { HttpClient } from '@angular/common/http';

export class AppComponent {
  data: any;

  constructor(private http: HttpClient) {}

  fetchData() {
    this.http.get('https://api.example.com/data').subscribe(response => {
      this.data = response;
    });
  }
}

Explanation: Fetches data from a backend API and updates the component.

Advantages of Angular Architecture

1. Modularity: Better organization of code.
    
2. Scalability: Suitable for large applications.
    
3. Reusable Components: Promotes code reusability.
    
4. Two-Way Data Binding: Syncs UI and data seamlessly.

Disadvantages of Angular Architecture

1. Steep Learning Curve: Complex for beginners.
    
2. Performance Overhead: Can be slow for small apps.
    
3. Verbosity: Requires a lot of boilerplate code.

Frequently Asked Questions

What is Angular used for?

Angular is used to build dynamic web applications, especially single-page applications (SPAs).

How does Angular ensure maintainability?

Angular uses a modular approach with components and services, ensuring clean and maintainable code.

Why is Dependency Injection important in Angular?

Dependency Injection ensures better code organization and easy testing by managing service instances.

Conclusion

In this article, we discussed Angular’s architecture, including its key components like modules, components, templates, directives, and services. We also discussed its advantages, disadvantages, and why it is a popular choice for building web applications.

You can also check out our other blogs on Code360.