Что такое модули, компоненты, директивы, пайпы и сервисы в Angular?

Angular строится на нескольких ключевых абстракциях, которые вместе образуют архитектуру приложения. Понимание их различий помогает правильно организовывать код и избегать связности.

Модули

Модуль (NgModule) — это контейнер, который объединяет компоненты, директивы, пайпы и сервисы в логическую единицу. Он объявляет, что доступно внутри, и что экспортируется наружу.

@NgModule({
  declarations: [AppComponent, UserCardComponent],
  imports: [CommonModule, FormsModule],
  providers: [UserService],
  exports: [UserCardComponent]
})
export class UserModule {}

Компоненты

Компонент — это директива с шаблоном. Он управляет частью UI, имеет жизненный цикл и входные/выходные свойства.

@Component({
  selector: 'app-user',
  template: '{{ user.name }}'
})
export class UserComponent {
  @Input() user!: User;
}

Директивы

Директивы изменяют поведение или внешний вид DOM-элементов. Бывают структурные (меняют DOM) и атрибутные (меняют вид/поведение).

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.background = 'yellow';
  }
}

Пайпы

Пайпы преобразуют данные прямо в шаблоне, например форматируют дату или валюту.

@Pipe({ name: 'shorten' })
export class ShortenPipe implements PipeTransform {
  transform(value: string, limit = 10): string {
    return value.length > limit ? value.slice(0, limit) + '...' : value;
  }
}

Сервисы

Сервис — это класс с бизнес-логикой или доступом к данным. Он внедряется через DI и обычно предоставляется на уровне модуля или root.

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}
  getUsers() { return this.http.get('/api/users'); }
}

Итог: используйте модули для группировки, компоненты для UI, директивы для поведения DOM, пайпы для форматирования, сервисы для логики и данных — это делает приложение модульным и тестируемым.