Architecture – Angular

Angular’s architecture is based on a modular design, where the entire application is split into several building blocks that work together to create dynamic, scalable, and maintainable web applications. The main parts of Angular architecture include Modules, Components, Templates, Services, and Dependency Injection.

Here’s a detailed breakdown of the key elements that define Angular’s architecture:

1. Modules (NgModules)

• Modules are containers for a cohesive block of code dedicated to a specific domain or functionality in an Angular application.
• The main purpose of Angular modules is to organize the code into logical pieces and allow the application to be split into smaller, reusable parts.Each Angular application has at least one root module, usually called AppModule. Other feature modules can be created to handle specific parts of the application (e.g., UserModule, AdminModule).

Key Characteristics:

• Modules group components, services, directives, pipes, and other code.
• Modules help with lazy loading, where parts of the application are loaded on demand to optimize performance.
• Angular’s dependency injection system is based on modules, where services and components are registered and shared across the application.

Example of a module:

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

2. Components

• Components are the fundamental building blocks of the Angular UI. Every Angular application is a tree of components.
• Each component controls a view (a section of the UI) and interacts with the user by displaying data and responding to user inputs.

Key Characteristics:

• A component is defined by a TypeScript class that encapsulates data, logic, and UI behavior.
• Each component is associated with an HTML template that defines the visual structure of the component and a CSS style sheet for presentation.
• Components use decorators like @Component to define metadata about the component, such as its selector (for how it’s referenced in the DOM), its template URL, and styles.

Example of a component:

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  title = 'Hello Angular';
}

3. Templates

• Templates define the structure and appearance of a component’s view. They are written in HTML and can include Angular directives and bindings to make them dynamic.

Template Features:

• Interpolation: Displaying data in the view using double curly braces ({{}}).
• Directives: Special Angular syntax that manipulates DOM elements, like *ngIf (for conditionally displaying content) or *ngFor (for rendering a list of elements).
• Event Binding: Responding to user inputs like clicks or form submissions using (eventName) syntax.
• Property Binding: Binding data from the component class to the view using [property] syntax.

Example of a template:

htmlCopy code<h1>{{ title }}</h1>
<button (click)="onClick()">Click Me</button>

4. Services

• Services are classes that contain logic and data that can be shared across different parts of the application.
• Services are often used for things like HTTP requests, data persistence, business logic, and shared state.
• Angular promotes the use of services to keep components focused on UI logic and to promote code reusability.

Service Example:

• A service is usually provided via Dependency Injection and can be injected into components or other services.

@Injectable({
  providedIn: 'root'
})
export class MyService {
  getData() {
    return 'Data from service';
  }
}

5. Dependency Injection (DI)

• Dependency Injection is a design pattern used in Angular to manage how components and services are instantiated and how they share services across the application.

Key Characteristics:

• Angular has a built-in injector that is responsible for instantiating dependencies (like services) and injecting them into components or other services.
• DI makes the code more testable, as components don’t have to create their own instances of services but instead receive them as dependencies.

Example of DI in action:

@Component({
  selector: 'app-my-component',
  template: `<p>{{data}}</p>`
})
export class MyComponent {
  data: string;
  
  constructor(private myService: MyService) {
    this.data = this.myService.getData();
  }
}

6. Directives

• Directives are special instructions in the DOM that tell Angular how to manipulate elements.
• There are three types of directives:
  1. Component Directives: Technically components are directives with templates.
  2. Structural Directives: Modify the DOM structure by adding or removing elements (e.g., *ngIf, *ngFor).
  3. Attribute Directives: Modify the appearance or behavior of an element (e.g., ngClass, ngStyle).

Example of a structural directive:

<div *ngIf="isVisible">Visible Content</div>

7. Pipes

• Pipes are used to transform data in Angular templates.
• They allow data formatting directly in the template without altering the component’s logic.

Common Pipes:

• | date: Format date values.
• | uppercase: Convert text to uppercase.
• | currency: Format numbers as currency.

Example:

<p>{{ birthday | date:'longDate' }}</p>

8. Routing

• Angular provides a powerful Routing Module to define routes that map URL paths to components.
• This enables Angular to build Single Page Applications (SPA), where navigation happens within the same page without a full page reload.

Routing Features:

• RouterModule configures application routes.
• Supports route guards, lazy loading, and child routes.

Example of a route configuration:

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

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

9. Data Binding

Angular supports the following types of data binding:

1. Interpolation: Bind component data to the view using {{ }} syntax.
2. Property Binding: Bind values to element properties (e.g., [src]="imageUrl").
3. Event Binding: Bind events like clicks using (click)="handler()".
4. Two-Way Binding: Syncs data between the component and view using [(ngModel)].

Two-Way Binding Example:

<input [(ngModel)]="username">
<p>Your username is: {{ username }}</p>

10. Change Detection

• Angular has a built-in change detection mechanism that updates the view when the application state changes.
• It checks the component’s data bindings and re-renders the DOM when changes are detected.

Conclusion

Angular’s architecture promotes the development of scalable, maintainable, and efficient web applications. By breaking the application into modules, components, services, and more, Angular encourages separation of concerns, reusability, and performance optimizations. This architecture is particularly suitable for large-scale enterprise applications but also works well for smaller apps due to its modular nature.