Angular 14

Daraja:

Angular 14 — zamonaviy Angular arxitekturasining boshlang'ichi: Standalone component'lar, typed reactive forms va bootstrapApplication() NgModule'siz ilova yaratish imkonini berdi.

Standalone Components, Directives, Pipes

Middle

Nima bu?

Standalone — component, directive va pipe'ni NgModule'siz mustaqil ishlatish. standalone: true va to'g'ridan-to'g'ri imports: [CommonModule, RouterLink] orqali bog'liqliklar. Lazy loading soddalashtirildi — loadComponent bilan. Angular 17+ da yangi loyihalar default standalone.

Kod misoli

@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [CommonModule, RouterLink, ProductCardComponent, CurrencyPipe],
  template: `
    @for (product of products; track product.id) {
      <app-product-card [product]="product" />
    }
  `,
})
export class ProductListComponent {
  products: Product[] = [];
}

// Route lazy load — NgModule'siz
const routes: Routes = [
  {
    path: 'products',
    loadComponent: () =>
      import('./product-list.component').then((m) => m.ProductListComponent),
  },
];

Imtihonda

  • Standalone va NgModule farqi?
  • Standalone component qanday import qilinadi?

Yodlash uchun

standalone: true + imports = NgModule o'rniga. 17+ default pattern.

Typed Reactive Forms — FormControl<T>

Middle

Nima bu?

Angular 14 typed reactive forms — FormControl&lt;T&gt;, FormGroup&lt;{...}&gt;, FormArray&lt;T&gt; generic tiplar. value, valueChanges, get() compile vaqtida tip xavfsiz. nonNullable: true — null emas, default qiymat. Form xatolari va refactor xavfsizligi oshdi.

Kod misoli

interface LoginForm {
  email: FormControl<string>;
  password: FormControl<string>;
  remember: FormControl<boolean>;
}

@Component({ /* ... */ })
export class LoginComponent {
  form = new FormGroup<LoginForm>({
    email: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.email] }),
    password: new FormControl('', { nonNullable: true, validators: [Validators.minLength(8)] }),
    remember: new FormControl(false, { nonNullable: true }),
  });

  submit() {
    if (this.form.invalid) return;
    const { email, password, remember } = this.form.getRawValue();
    // email: string, password: string, remember: boolean — tip aniq
    this.auth.login({ email, password, remember });
  }
}

Imtihonda

  • nonNullable: true nima beradi?
  • Typed forms va oddiy FormControl farqi?

Yodlash uchun

FormControl<T> + nonNullable = null yo'q, tip aniq.

bootstrapApplication() — NgModule'siz

Middle

Nima bu?

bootstrapApplication() — root component'ni to'g'ridan-to'g'ri boot qilish, AppModule shart emas. Provider'lar providers: [...] orqali uzatiladi. Zamonaviy standalone ilova arxitekturasi shu yerda boshlanadi.

Kod misoli

// main.ts — Angular 14+
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    { provide: API_URL, useValue: environment.apiUrl },
  ],
}).catch((err) => console.error(err));

// Eski usul (AppModule) — hali ishlaydi, lekin yangi loyiha uchun emas
// platformBrowserDynamic().bootstrapModule(AppModule);

Imtihonda

  • bootstrapApplication va AppModule farqi?
  • Provider'lar qayerga qo'yiladi?

Yodlash uchun

bootstrapApplication(AppComponent, { providers }) = NgModule'siz boot.

inject() funksiyasi

Middle

Nima bu?

inject() — constructor DI o'rniga funksional injection. Component, directive, pipe va factory function ichida ishlatiladi. Inheritance muammolarini kamaytiradi, field initializer'da ishlatish qulay. Angular 14 dan stable, 15+ da functional guards/resolvers bilan keng qo'llaniladi.

Kod misoli

@Component({
  selector: 'app-dashboard',
  standalone: true,
  template: `...`,
})
export class DashboardComponent {
  private http = inject(HttpClient);
  private router = inject(Router);
  private destroyRef = inject(DestroyRef);

  users$ = inject(UserService).getAll();

  // Constructor kerak emas
  goToProfile() {
    this.router.navigate(['/profile']);
  }
}

// Factory provider
export const LOGGER = new InjectionToken<Logger>('LOGGER');

export function loggerFactory() {
  const config = inject(AppConfigService);
  return new ConsoleLogger(config.logLevel);
}

Imtihonda

  • inject() va constructor DI qachon ishlatiladi?
  • inject() qayerda chaqirilishi mumkin emas?

Yodlash uchun

inject() = constructor o'rniga. Injection context ichida (constructor, field init, factory).

inject() faqat injection context'da — oddiy method ichida chaqirib bo'lmaydi (DestroyRef/inject(DestroyRef) saqlab ishlatish mumkin).