Angular — корпоративный framework

// компонент Angular выглядит так
import { Component } from '@angular/core'

@Component({
  selector: 'app-hello',
  standalone: true,
  template: '<h1>Привет, {{ name }}!</h1>'
})
export class HelloComponent {
  name = 'мир'
}

npm install -g @angular/cli
ng new my-app --style=scss --routing
cd my-app
ng serve
# приложение откроется на http://localhost:4200

ng generate component product-card
ng generate service data
ng generate interface product

my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.routes.ts
│   │   └── product-card/
│   ├── index.html
│   ├── main.ts
│   └── styles.scss
├── angular.json      // конфигурация проекта
└── tsconfig.json

// product-card.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core'

@Component({
  selector: 'app-product-card',
  standalone: true,
  templateUrl: './product-card.component.html'
})
export class ProductCardComponent {
  @Input() title = ''
  @Output() buy = new EventEmitter<string>()

  onBuy() {
    this.buy.emit(this.title)
  }
}

<!-- product-card.component.html -->
<div class="card">
  <h2>{{ title }}</h2>
  <button (click)="onBuy()">Купить</button>
</div>

<!-- использование в родителе -->
<app-product-card [title]="product.name"
                  (buy)="addToCart($event)" />

<ul>
  <li *ngFor="let item of items; let i = index">
    {{ i + 1 }}. {{ item.name }}
  </li>
</ul>

<p *ngIf="items.length === 0; else emptyBlock">Список пуст</p>

<ng-template #emptyBlock>
  <p>Добавьте первый товар</p>
</ng-template>

// Атрибутная привязка классов
<div [ngClass]="{
  'is-active': active,
  'is-loading': loading
}">Статус</div>

<p>Цена: {{ price | currency: 'RUB' }}</p>
<p>Дата: {{ createdAt | date: 'd MMM yyyy' }}</p>
<p>Текст: {{ title | uppercase }}</p>

// Собственный pipe — сокращение числа
import { Pipe, PipeTransform } from '@angular/core'

@Pipe({ name: 'shortNumber', standalone: true })
export class ShortNumberPipe implements PipeTransform {
  transform(value: number): string {
    if (value >= 1000) return (value / 1000).toFixed(1) + 'k'
    return String(value)
  }
}

@Injectable({ providedIn: 'root' })
export class CartService {
  private items: string[] = []

  add(item: string) {
    this.items.push(item)
  }

  getItems() {
    return this.items
  }

  count() {
    return this.items.length
  }
}

import { Component } from '@angular/core'
import { CartService } from '../services/cart.service'

@Component({
  selector: 'app-header',
  standalone: true,
  template: '<p>В корзине: {{ cart.count() }}</p>'
})
export class HeaderComponent {
  constructor(private cart: CartService) {}
}

import { Subject } from 'rxjs'

@Injectable({ providedIn: 'root' })
export class SearchService {
  private search = new Subject<string>()

  setQuery(value: string) {
    this.search.next(value)
  }

  query$ = this.search.asObservable()
}

import { Component, inject } from '@angular/core'
import { AsyncPipe } from '@angular/common'
import { distinctUntilChanged } from 'rxjs'

@Component({
  standalone: true,
  imports: [AsyncPipe],
  template: '<p>Запрос: {{ query$ | async }}</p>'
})
export class SearchComponent {
  private search = inject(SearchService)
  query$ = this.search.query$.pipe(distinctUntilChanged())
}

// Горячие клавиши средствами RxJS
import { fromEvent } from 'rxjs'
import { map } from 'rxjs'

const esc$ = fromEvent<KeyboardEvent>(document, 'keydown')
  .pipe(map((e) => e.key))
// сюда можно подписаться и закрыть модальное окно

import { Component, inject } from '@angular/core'
import { NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms'

@Component({
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="email" placeholder="Email">
      <input formControlName="password" type="password" placeholder="Пароль">
      <button type="submit" [disabled]="form.invalid">Войти</button>
    </form>`
})
export class LoginComponent {
  private fb = inject(NonNullableFormBuilder)

  form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(6)]]
  })

  onSubmit() {
    console.log('Вход:', this.form.value)
  }
}

// Проверка поля после касания
<p *ngIf="form.controls.email.invalid && form.controls.email.touched">
  Введите корректный email
</p>

// app.routes.ts
import { Routes } from '@angular/router'
import { provideRouter } from '@angular/router'
import { bootstrapApplication } from '@angular/platform-browser'

export const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'catalog',
    loadComponent: () => import('./catalog/catalog.component')
      .then((m) => m.CatalogComponent)
  },
  { path: '**', redirectTo: '' }
]

// ссылки в шаблоне
<nav>
  <a routerLink="/" routerLinkActive="active">Главная</a>
  <a routerLink="/catalog">Каталог</a>
</nav>

<router-outlet></router-outlet>

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

@Injectable({ providedIn: 'root' })
export class ApiService {
  private http = inject(HttpClient)

  getUsers() {
    return this.http.get<User[]>('/api/users')
  }

  createUser(user: Partial<User>) {
    return this.http.post<User>('/api/users', user)
  }
}

// компонент отдаёт данные в шаблон через async
users$ = this.api.getUsers()
// в HTML: <li *ngFor="let u of users$ | async">{{ u.name }}</li>

ng build --configuration production
# собранные файлы лежат в dist/
ng serve --host 0.0.0.0 --port 4200

// сервер разработки (для локального бэкенда)
npm install -g json-server
json-server --watch db.json --port 3000

import { Injectable, signal, computed } from '@angular/core'

@Injectable({ providedIn: 'root' })
export class CartService {
  private items = signal<string[]>([])

  readonly count = computed(() => this.items().length)

  add(item: string) {
    this.items.update((prev) => [...prev, item])
  }
}

<p>В корзине: {{ cart.count() }}</p>

import { HttpInterceptorFn } from '@angular/common/http'

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('token')
  if (token) {
    req = req.clone({
      setHeaders: { Authorization: `Bearer ${token}` }
    })
  }
  return next(req)
}

providers: [
  provideHttpClient(
    withInterceptors([authInterceptor])
  )
]

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '<p>{{ item.name }}</p>'
})
export class ItemComponent {
  @Input() item!: Item
}

<li *ngFor="let item of items; trackBy: trackById">
  {{ item.id }}: {{ item.name }}
</li>

ng add @angular/ssr
# после установки:
ng build   # собираются клиентская и серверная части

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    });
  });

  it('отображает заголовок', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const el = fixture.nativeElement.querySelector('h1');
    expect(el.textContent).toContain('Привет');
  });
});

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const token = sessionStorage.getItem('token');
    const clone = token
      ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } })
      : req;
    return next.handle(clone);
  }
}

npm install @angular/material @angular/cdk

// app.module.ts
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
imports: [MatTableModule, MatSortModule]

// preloading стратегия
RouterModule.forRoot(routes, {
  preloadingStrategy: PreloadAllModules
})

@Injectable({ providedIn: 'root' })
export class CartService {
  private items = signal<Item[]>([]);
  readonly count = computed(() => this.items().length);
  add(item: Item) { this.items.update(list => [...list, item]); }
}

const el = createCustomElement(MyWidget, { injector: envInjector });
customElements.define('my-widget', el);

{
  path: 'admin', loadChildren: () => import('./admin.routes'),
  canActivate: [AuthGuard]
}