Какая архитектура у Angular-приложения

1️⃣ Как кратко ответить

Архитектура Angular-приложения основана на концепции компонентов и модулей. Компоненты представляют собой основные строительные блоки, которые управляют представлением и поведением пользовательского интерфейса. Модули группируют связанные компоненты и другие функциональные единицы, такие как сервисы и директивы, для организации и управления зависимостями. Angular использует архитектурный паттерн MVC (Model-View-Controller) и внедрение зависимостей для обеспечения модульности и повторного использования кода.

2️⃣ Подробное объяснение темы

Angular — это фреймворк для создания веб-приложений, который использует компонентно-ориентированную архитектуру. Основные элементы архитектуры Angular-приложения включают компоненты, модули, сервисы и директивы. Давайте разберем каждый из этих элементов.

Компоненты

Компоненты — это основные строительные блоки Angular-приложения. Каждый компонент отвечает за определенную часть пользовательского интерфейса и состоит из трех основных частей: шаблона, класса и стилей.

• Шаблон: HTML-код, который определяет, как будет выглядеть пользовательский интерфейс компонента.
• Класс: TypeScript-код, который содержит логику компонента, включая данные и методы, используемые в шаблоне.
• Стили: CSS-стили, которые применяются к элементам внутри компонента.

Пример компонента:

import { Component } from '@angular/core';
​
@Component({
  selector: 'app-example',
  template: `
    <h1>{{ title }}</h1>
    <button (click)="onClick()">Click me</button>
  `,
  styles: [`
    h1 {
      color: blue;
    }
  `]
})
export class ExampleComponent {
  title = 'Hello, Angular!';
​
  onClick() {
    console.log('Button clicked!');
  }
}

• @Component — декоратор, который указывает, что класс является компонентом.
• selector — имя тега, который будет использоваться для вставки компонента в HTML.
• template — HTML-шаблон, который определяет структуру и внешний вид компонента.
• styles — массив CSS-стилей, применяемых к компоненту.
• title — свойство класса, используемое в шаблоне.
• onClick() — метод, который вызывается при нажатии на кнопку.

Модули

Модули — это контейнеры для компонентов и других функциональных единиц, таких как сервисы и директивы. Главный модуль приложения называется AppModule, и он загружается первым при запуске приложения.

Пример модуля:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ExampleComponent } from './example.component';
​
@NgModule({
  declarations: [
    AppComponent,
    ExampleComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• @NgModule — декоратор, который указывает, что класс является модулем.
• declarations — массив компонентов, директив и пайпов, которые принадлежат этому модулю.
• imports — массив других модулей, которые необходимы для работы этого модуля.
• providers — массив сервисов, которые будут доступны в этом модуле.
• bootstrap — массив компонентов, которые будут загружены при старте приложения.

Сервисы

Сервисы — это классы, которые содержат бизнес-логику и данные, которые могут быть использованы в различных компонентах. Они помогают разделить логику приложения и сделать код более модульным и тестируемым.

Пример сервиса:

import { Injectable } from '@angular/core';
​
@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  getData() {
    return 'Data from service';
  }
}

• @Injectable — декоратор, который указывает, что класс может быть использован в качестве сервиса.
• providedIn: 'root' — указывает, что сервис будет доступен во всем приложении.

Директивы

Директивы — это классы, которые изменяют поведение или внешний вид элементов в DOM. Существуют три типа директив: структурные, атрибутивные и компоненты (которые также являются директивами).

Пример атрибутивной директивы:

import { Directive, ElementRef, Renderer2 } from '@angular/core';
​
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'backgroundColor', 'yellow');
  }
}

• @Directive — декоратор, который указывает, что класс является директивой.
• selector — CSS-селектор, который определяет, к каким элементам будет применяться директива.
• ElementRef и Renderer2 — используются для доступа и изменения элементов DOM.

Архитектура Angular-приложения позволяет создавать масштабируемые и поддерживаемые приложения, обеспечивая четкое разделение логики и представления, а также повторное использование кода.