Angular 15

Directive Composition API — hostDirectives

Nima bu?

hostDirectives — component yoki directive'ga boshqa directive'larni composition orqali qo'shish. Kod takrorlanishini kamaytiradi — masalan, har component'ga HasPermissionDirective qo'shish o'rniga bir joyda e'lon qilish. Input/output forward qilish mumkin.

Gotcha: hostDirectives orqali qo'shilgan directive'ning @Input/@Outputlari default holda yashirin — component tashqarisiga avtomatik ochilmaydi. Faqat inputs/outputs massivida aniq ko'rsatilganlari component'ning public API'siga aylanadi (pastdagi misolda faqat highlightColor ochilgan; TooltipDirectivening text inputi esa parent'dan berilmaydi — kerak bo'lsa alohida forward qilinishi kerak). Bu inheritance (extends) dan farqi — composition orqali faqat ataylab tanlangan yuzani ochish mumkin, butun API avtomatik meros olinmaydi.

Kod misoli

@Directive({
  selector: '[appTooltip]',
  standalone: true,
})
export class TooltipDirective {
  @Input('appTooltip') text = '';
  // tooltip logic...
}

@Directive({
  selector: '[appHighlight]',
  standalone: true,
})
export class HighlightDirective {
  @Input() highlightColor = 'yellow';
}

// Composition — ikkala directive bir component'da
@Component({
  selector: 'app-user-card',
  standalone: true,
  hostDirectives: [
    TooltipDirective,
    {
      directive: HighlightDirective,
      inputs: ['highlightColor'],
    },
  ],
  template: `<div>{{ user.name }}</div>`,
})
export class UserCardComponent {
  @Input() user!: User;
}

Imtihonda

• hostDirectives va template'da directive qo'yish farqi?
• Qachon composition API foydali?

Yodlash uchun

hostDirectives = directive'larni component'ga compile vaqtida qo'shish. DRY pattern.

Functional Guards va Resolvers

Nima bu?

Functional guards (CanActivateFn, CanMatchFn va h.k.) aslida Angular 14.2 da kiritilgan — class o'rniga oddiy funksiya, inject() bilan service chaqiriladi. Angular 15 da esa class-based guard interfeyslari (CanActivate va boshqalar) deprecated deb e'lon qilindi va functional yondashuv rasmiy tavsiya etilgan default'ga aylandi. Tree-shakable, test oson, kam boilerplate.

Kod misoli

import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = (route, state) => {
  const auth = inject(AuthService);
  const router = inject(Router);

  if (auth.isLoggedIn()) {
    return true;
  }
  return router.createUrlTree(['/login'], {
    queryParams: { returnUrl: state.url },
  });
};

export const adminGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.hasRole('admin') || inject(Router).createUrlTree(['/forbidden']);
};

// Routes
const routes: Routes = [
  {
    path: 'admin',
    canActivate: [authGuard, adminGuard],
    loadComponent: () => import('./admin.component'),
  },
];

Imtihonda

• Functional guard va class CanActivate farqi?
• Guard ichida Router qanday inject qilinadi?

Yodlash uchun

CanActivateFn + inject() = zamonaviy guard. UrlTree = redirect.

provideRouter, provideHttpClient

Nima bu?

provideRouter(routes) va provideHttpClient() — NgModule import o'rniga standalone bootstrap'da provider funksiyalar. Router va HTTP client'ni markaziy, tree-shakable tarzda ro'yxatdan o'tkazish. Interceptor, withFetch, withInterceptors ham shu API orqali.

Kod misoli

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import {
  provideHttpClient,
  withInterceptors,
  withFetch,
} from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withComponentInputBinding()),
    provideHttpClient(
      withFetch(), // fetch API (SSR uchun yaxshi)
      withInterceptors([authInterceptor, loggingInterceptor])
    ),
  ],
});

Imtihonda

• provideRouter va RouterModule.forRoot farqi?
• withFetch() nima uchun?

Yodlash uchun

provideRouter / provideHttpClient = standalone bootstrap provider'lari.