Шаблон Подтверждено командой

Семантика

✅ Используй семантические теги

<header>
  <h1>Welcome to my Website</h1>
</header>
<main>
  <section>
    <h2>Some important text</h2>
    <p>More details here in this description.</p>
  </section>
</main>
<footer>...</footer>

❌ Не заменяй всё на div и span

<div class="header">
  <div>Welcome to my Website</div>
</div>
<div class="content">
  <div class="post">
    <div>Some important text</div>
    <div>More details here in this description.</div>
  </div>
</div>
<div class="footer">...</div>

Вложенность

✅ Держи структуру плоской

<section>
  <h2>Title</h2>
</section>

❌ Не добавляй лишние обёртки

<div>
  <div>
    <div>
      <h2>Title</h2>
    </div>
  </div>
</div>

Простота шаблона

✅ Шаблон только про отображение

{{ isVisible }}

❌ Не пиши составные условия в шаблоне

{{ b1 && b2 || !b3 }}

ℹ️

Шаблон — декларативное отображение уже подготовленного состояния.
Любая логика, трансформация и вычисления должны находиться вне шаблона.

Control Flow

✅ Используй встроенный control flow

@for (item of items; track item.id) {
  <div>{{ item.name }}</div>
}

❌ Не используй структурные директивы

<div *ngFor="let item of items">{{ item.name }}</div>

Условный рендеринг

✅ Управляй отображением на уровне родителя

@if (user) {
  <app-profile />
}

❌ Не перекладывай это на дочерний

@if (user) {
  <div>Component html...</div>
}

Локальные переменные

✅ Сохраняй в локальные переменные через @if (...; as ...)

@if (order().customer.primaryAddress; as address) {
  <div>{{ address.city }}</div>
  <div>{{ address.street }}</div>
  <div>{{ address.postalCode }}</div>

  @if (address.country === 'DE') {
    <span>🇩🇪 Germany</span>
  } 
}

❌ Не дублируй доступ к одним и тем же данным

<div>{{ order().customer.primaryAddress.city }}</div>
<div>{{ order().customer.primaryAddress.street }}</div>
<div>{{ order().customer.primaryAddress.postalCode }}</div>

@if (order().customer.primaryAddress.country === 'DE') {
  <span>🇩🇪 Germany</span>
}

Ссылки vs кнопки

✅ Используй <a> для навигации (даже если выглядит как кнопка)

<a routerLink="/profile" rtsPrimaryButton> Перейти в профиль </a>

❌ Не делай навигацию через <button>

<button rtsPrimaryButton (click)="router.navigate(['/profile'])">Перейти в профиль</button>

✅ Используй <button> для действий (даже если выглядит как ссылка)

<button rtsDarkLink (click)="onLogout()">Выйти</button>

❌ Не делай действия через <a>

<a rtsDarkLink (click)="onLogout()"> Выйти </a>

Автотесты

✅ Добавляй rts-at на:

• Контролы формы

<rts-password rts-at="passwordControl" />

• Ключевые действия

<button rtsPrimaryButton rts-at="deleteUserButton">Удалить</button>

• Важные данные

<span rts-at="userBalance">100 ₽</span>

• Ссылки

<a rtsSecondaryButton [href]="environment.Poa.ServiceUrl" rts-at="generatePoaLink">
  Сформировать доверенность
</a>

• Тултипы

<rts-tooltip-manual
  rtsTooltipManualHover
  text="Закупка является процедурой торг за единицу товара"
  rts-at="isUnitBiddingTooltip"
>
  ...Content
</rts-tooltip-manual>

✅ Используй camelCase для нейминга