Eng ko'p beriladigan 60+ Angular intervyu savollari (va javoblari)

Angular intervyusiga tayyorlanayotganda hamma narsani shunchaki yodlab olmang. Intervyu oluvchilar siz javoblarni tushunmasdan yoddan aytayotganingizni sezib qolishadi. Tajribangiz qancha bo'lishidan qat'i nazar, asosiy tushunchalarni bilishingiz kerak. Angular intervyu savollari ham asosiy, ham murakkab mavzularni qamrab oladi.

Masalan, intervyu oluvchilar sizga faqat "Angular component nima?" degan oddiy savolni berib qo'ya qolishmaydi. Buning o'rniga ular katta ilovalarda Angular component'larini qanday tuzish kerakligini tushuntirib berishingizni so'rashadi. OnPush change detection strategiyasi qachon o'rinli bo'lishini va memory leak'larning oldini qanday olishni muhokama qilasiz. RxJS operator'lari, routing guard'lari, lazy loading va unumdorlik bilan bog'liq debugging haqidagi savollarni ham kuting.

Maqsad — nimani qura olishingizni (amaliy ko'nikmalaringizni) emas, balki qanday fikrlashingizni baholash. Shuning uchun o'zingizni ishonchliroq his qilishingiz uchun ba'zi keng tarqalgan savollarni oldindan ko'rib chiqish yaxshi fikr.

TL;DR

Boshlang'ichdan murakkab darajagacha bo'lgan tushunchalarni qamrab olgan 60+ Angular intervyu savoli.

• Boshlang'ich tushunchalar: Web component'lar, Angular modullari (NgModule), data binding, directive'lar, pipe'lar, service'lar, formalar va TypeScript asoslari

• O'rta darajadagi tushunchalar: Dependency injection, lifecycle hook'lar, routing, RxJS, change detection, guard'lar, observable'lar va promise'lar farqi

• Murakkab tushunchalar: Change detection'ning ichki ishlashi, performance optimization, state management, memory leak'lar, xavfsizlik va testlash

Ushbu qo'llanmada tayyorlanishingizga yordam berish uchun eng ko'p beriladigan Angular intervyu savollari va javoblarini tajriba darajasi bo'yicha guruhlab ko'rib chiqaman. Standalone component'lar kabi asoslarni ham, state management kabi murakkabroq mavzularni ham yoritaman. Mashq qilish va yaxshiroq o'rganish uchun interaktiv flashcard'lardan ham foydalanishingiz mumkin. Agar Angular'ni o'rganishni boshlamoqchi bo'lsangiz, Angular roadmap'ga ko'z tashlang.

Angular intervyulariga tayyorlanish bo'yicha maslahatlar

Angular intervyulari umumiy frontend intervyulariga qaraganda freymvorkka ko'proq xos bo'ladi. Ular freymvorkning tuzilishi va ichki ishlashiga e'tibor qaratadi.

Quyida Angular intervyusiga tayyorlanishingizga yordam beradigan ba'zi best practice'lar keltirilgan:

• Angular'ning asosiy tushunchalarini, jumladan web component'lar, modullar va data binding'ni o'rganing.

• Intervyuda yaxshi tushuntirib bera olishingiz uchun tushunchalar ortidagi sabablarni tushuning.

• Angular'ning murakkabroq asosiy mavzularini, jumladan lifecycle hook'lar va dependency injection'ni o'rganing.

• Angular intervyu savollari va tushunchalarini o'rganish hamda mashq qilish uchun ushbu qo'llanmadan foydalaning. Imkoningiz bo'lsa, haqiqiy intervyuga o'xshashi va o'zingizga ishonchingiz ortishi uchun do'stingiz bilan mashq qiling.

• Kompaniya nima ustida ishlayotganini va Angular'dan qanday foydalanishini o'rganib chiqing.

• Kichik loyihalar quring va open source loyihalarga hissa qo'shing. Ko'nikmalaringizni GitHub yoki CodeSandbox kabi saytlarda namoyish eting.

Flashcard'lar bilan o'zingizni sinab ko'ring

Ushbu flashcard'lardan foydalanishingiz yoki savollarni ro'yxat ko'rinishida ko'rish uchun quyidagi savollar ro'yxati bo'limiga o'tishingiz mumkin.

Savollar ro'yxati

Agar savollarni ro'yxat ko'rinishida ko'rishni afzal ko'rsangiz, ularni quyida topasiz.

Dasturchilar uchun boshlang'ich darajadagi Angular intervyu savollari

Angular nima va u AngularJS'dan nimasi bilan farq qiladi?

Angular — veb-ilovalar yaratish uchun mo'ljallangan, TypeScript'ga asoslangan zamonaviy frontend freymvork. Google bu freymvorkni mobil veb-ilovalar va katta ilovalar ehtiyojlarini qondirish uchun 2016-yil 14-sentabrda chiqargan. U sizga kerak bo'ladigan barcha o'rnatilgan vositalar hamda yaxshi dependency injection tizimi bilan birga keladi. Angular kod ishga tushishidan oldin undagi xatolarni aniqlash uchun JavaScript'ning superset'i bo'lgan TypeScript'dan foydalanadi.

Quyida Angular va AngularJS'ning batafsil taqqoslash jadvali keltirilgan:

Jihat	Angular	AngularJS
Data binding	One-way (standart), Two-way (mavjud)	Two-way data binding
Til	TypeScript	JavaScript
Arxitektura	Component-based	MVC (Model-View-Controller)
Unumdorlik	Tezroq	Katta ilovalarda sekin
Mobil qo'llab-quvvatlash	Mobil va veb uchun yaratilgan	Mobil qurilmalarni cheklangan darajada qo'llab-quvvatlaydi
Qo'llab-quvvatlash holati	Faol	Endi qo'llab-quvvatlanmaydi

Angular — AngularJS'ning to'liq qayta yozilgan ko'rinishi bo'lib, 2-versiya va undan keyingi versiyalar sifatida chiqarilgan. AngularJS birinchi marta 2010-yil 20-oktabrda chiqarilgan va Angular'ning asl versiyasi hisoblanadi. U oddiy JavaScript yordamida yaratilgan va MVC (Model-View-Controller) design pattern'iga amal qiladi.

Google Angular'ni AngularJS'ning ba'zi jiddiy muammolarini hal qilish uchun yaratdi. Masalan, dasturchilar AngularJS'dan katta ilovalar qurishda foydalanganda unumdorlik muammolari yuzaga kelardi. Uning two-way data binding tizimi ilova kattalashgan sari uni sekinlashtirardi. Ana shu unumdorlik cheklovlari sababli Google 2021-yil 31-dekabrda AngularJS'ni qo'llab-quvvatlashni to'xtatdi.

Angular ilovasi qanday ishlaydi?

Quyida Angular ilovasi boshidan oxirigacha qanday ishlashi ko'rsatilgan:

• Angular ilovangiz main.ts fayli ishga tushib, AppModule deb ataladigan root modulni yuklaganda boshlanadi. Angular 14'dan boshlab standalone component'larni ham to'g'ridan-to'g'ri bootstrap qilishingiz mumkin.

• Keyin Angular AppModule'ni o'qiydi va siz qo'shgan barcha component'lar, service'lar va boshqa qismlarni yuklaydi.

• U AppComponent'dan boshlanadigan component tree'ni yaratadi va uning barcha child component'larini bir-biriga bog'laydi.

• Angular har bir component'ning template'ini HTML'ga aylantiradi va uni brauzeringizda ko'rsatadi.

• Kimdir ilovangizda bosganda yoki u bilan o'zaro ishlaganda, Angular buni tinglaydi va event binding yordamida javob beradi.

• Agar ma'lumotlaringiz o'zgarsa, Angular component tree'ni tekshiradi va view'ni yangilaydi, shu tufayli foydalanuvchilar doimo eng so'nggi ma'lumotni ko'radi.

Angular component'lari nima?

Angular component'lari — har qanday Angular ilovasini tashkil etuvchi muhim bo'laklar. Component'larni @Component decorator'i yordamida yaratasiz. Har birining o'z scope'i bor, shuning uchun uning ma'lumotlari va uslublari boshqalarnikidan alohida bo'ladi. Murakkab foydalanuvchi interfeyslarini qurish uchun component'larni qayta ishlatishingiz va bir-birining ichiga joylashtirishingiz mumkin. Angular component'i quyidagilardan iborat:

• Template: component'ingiz brauzerda qanday ko'rinishini boshqaradigan HTML

• Class: ma'lumotlarni saqlaydigan va bosish kabi foydalanuvchi harakatlarini qayta ishlaydigan TypeScript kodi

• Styles: component'ingiz template'ining tashqi ko'rinishini boshqaradigan CSS

• Metadata: Angular'ga component'ingizni qanday qayta ishlashni bildiradigan @Component decorator'i

Angular moduli nima?

Angular moduli o'zaro bog'liq component'lar, service'lar va boshqa imkoniyatlarni guruhlash imkonini beradi. Har bir Angular ilovasi AppModule deb ataladigan root moduldan boshlanadi.

Kattaroq ilovalar uchun o'xshash kodni bir joyda saqlash maqsadida feature modullar yaratasiz. Bu modullarni lazy loading yordamida kerak bo'lganda yuklashingiz mumkin, bu esa ilovangizni tezroq yuklanadigan qiladi.

Angular modullarini @NgModule decorator'i bilan yaratasiz. Modulga quyidagilarni kiritasiz:

• Declarations: bu modul uchun yaratgan component'laringiz, directive'laringiz va hokazolar.

• Imports: modulingiz bog'liq bo'lgan boshqa modullar.

• Providers: modulingiz taqdim etadigan service'lar.

• Bootstrap: ilovangizni ishga tushiradigan asosiy component (faqat root modulda ishlatiladi).

Quyidagi kod misolida modul qanday aniqlanishi ko'rsatilgan:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],      // Your components go here
  imports: [BrowserModule],           // Other modules you need
  providers: [],                      // Your services go here
  bootstrap: [AppComponent]           // Your starting component
})
export class AppModule { }

Angular CLI nima?

Angular CLI — Angular Command Line Interface'ning qisqartmasi. Bu component'lar yaratish, ilovangizni ishga tushirish va konfiguratsiyani boshqarish kabi vazifalarni avtomatlashtirish orqali Angular ilovalarini yaratishga yordam beradigan command-line interface vositasi.

Angular CLI ishlab chiqishning har bir qismi uchun buyruqlarni taqdim etadi:

• ng new project-name: yangi Angular loyihasini yaratish.

• ng serve: development server'ni ishga tushirish.

• ng generate service auth yoki ng g s auth: service yaratish.

• ng add: kutubxonalarni qo'shish (masalan, ng add @angular/material)

• ng lint: kod sifatini tekshirish.

@Input() va @Output() o'rtasidagi farq nima?

@Input() parent component'larga child component'larga ma'lumot uzatish imkonini beradi. Child @input yordamida o'ziga qanday ma'lumot kerakligini e'lon qiladi, parent esa uni Angular template'larida property binding orqali taqdim etadi.

// Child Component
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>Received: {{ message }}</p>
    <button (click)="sendData()">Send to the Parent</button>
  `
})
export class ChildComponent {
  @Input() message: string;  // Receives data from parent
  @Output() notify = new EventEmitter<string>();  // Sends data to parent

  sendData() {
    this.notify.emit('Hello from the child!');
  }
}

// Parent Component
@Component({
  selector: 'app-parent',
  template: `
    <app-child 
      [message]="parentMessage" 
      (notify)="handleNotification($event)">
    </app-child>
    <p>From child: {{ childMessage }}</p>
  `
})
export class ParentComponent {
  parentMessage = 'Hello child!';
  childMessage = '';

  handleNotification(data: string) {
    this.childMessage = data;
  }
}

1. Boshqa tomondan, @Output() child component'larga parent component'larga ma'lumot yuborish imkonini beradi. Child @Output() bilan EventEmitter e'lon qiladi, parent esa uni event binding yordamida tinglaydi. Child'da tugma bosilishi yoki forma yuborilishi kabi biror narsa sodir bo'lganda, child parent qayta ishlay oladigan event'ni emit qiladi.

Angular'da data binding nima?

Data binding component sinfingizdagi ma'lumotlarni component'ingiz template'i bilan bog'laydi. U data model'dagi yangilanishlarni ularni dolzarb holda saqlash uchun qo'shimcha kod yozmasdan ko'rish imkonini beradi.

Ilovangizda ma'lumotlar qanday harakatlanishini boshqarish uchun Angular'da data binding'ning uchta asosiy turi mavjud:

• One-way data binding: component'ingiz ma'lumotni template'ingizga yuboradi, template esa uni ekranda ko'rsatadi. Qiymatlar ekranda qo'sh jingalak qavslar {{ value }} yordamidagi interpolation orqali paydo bo'ladi. Element property'larini o'rnatish uchun kvadrat qavslar [ property ] bilan property binding'dan foydalanasiz.

• Event binding: template'ingiz foydalanuvchi harakatlarini ushlab oladi va ularni component sinfingizga yuboradi. Bosish kabi event'larni oddiy qavslar ( event ) yordamida ushlaysiz.

• Two-way data binding: ma'lumotlar component sinfingiz va uning template'i o'rtasida ikki yo'nalishda oqadi. Ularni sinxron holda saqlash uchun [(ngModel )]'dan foydalanasiz, bu formalar uchun foydali.

Data binding'ning turli turlariga misol:

// Your Angular component
export class AppComponent {
  username = 'Cess';
  isDisabled = false;

  handleClick() {
    console.log('Button clicked!');
  }
}

<!-- Your Angular template -->
<!-- Interpolation: Display data -->
<h1>Hello, {{ username }}!</h1>

<!-- Property binding: Bind to element property -->
<button [disabled]="isDisabled">Click me</button>

<!-- Event binding: Manage user actions -->
<button (click)="handleClick()">Click me</button>

<!-- Two-way data binding: Sync form input -->
<input [(ngModel)]="username">

Data binding Angular ilovangizni interaktiv qiladi. Ma'lumotlaringiz o'zgargan har safar DOM elementlarini yangilash uchun qo'shimcha kod yozishingiz shart emas. Angular ma'lumotlaringizdagi o'zgarishlarni aniqlaydi va view'ni yangilaydi, shunda foydalanuvchilar yangi qiymatlarni ko'radi.

Angular expression'lari va JavaScript expression'lari o'rtasidagi farq nima?

Angular expression'lari — ma'lumotlarni ko'rsatish va bog'lash uchun component'ingiz template'ida yozadigan expression'laringiz. Ma'lumotni ekranda ko'rsatish uchun Angular expression'larini qo'sh jingalak qavslar {{ }} ichiga, child component'lar yoki HTML elementlari uchun qiymat o'rnatish uchun esa property binding'lar [] ichiga joylashtirasiz.

Angular expression'larining sintaksisi standart JavaScript'nikiga qaraganda soddaroq, bu ularni template'lar uchun xavfsizroq qiladi. Ular oddiy JavaScript expression'lariga qaraganda undefined qiymatlarga nisbatan kechirimliroq, lekin runtime xatolari baribir yuz berishi mumkin. Biroq ular sikllar, assignment'lar yoki global o'zgaruvchilar (window yoki document) kabi murakkab mantiqni qo'llab-quvvatlamaydi.

@Component({
  template: `
    <!-- Angular expressions -->
    <p>{{ username }}</p>
    <p>{{ items.length }}</p>
    <p>{{ price | currency }}</p>
    <div *ngIf="isLoggedIn">Angular Interview questions</div>
  `
})
export class AppComponent {
  username = 'Cess';
  items = [1, 2, 3];
  price = 100;
  isLoggedIn = true;

  // JavaScript expressions
  processData() {
    let x = 5;           // Valid JavaScript expressions
    this.count++;        // Valid JavaScript expressions
    return new Date();   // Valid JavaScript expressions
  }
}

JavaScript expression'lari esa component sinflaringiz, service'laringiz yoki TypeScript fayllaringizda ishlaydigan standart JavaScript kodidir. Ular to'liq JavaScript sintaksisini hech qanday cheklovsiz qo'llab-quvvatlaydi va brauzer vositalaridan to'liq foydalana oladi. JavaScript expression'lari qat'iy: yetishmayotgan bitta qiymat ilovangiz ishlashdan to'xtashiga sabab bo'lishi mumkin.

Angular directive'lari nima?

Directive'lar — Angular template'laringizdagi DOM elementlariga qo'shadigan maxsus ko'rsatmalar. Ular bu elementlarni, jumladan ularning qanday ishlashi, qanday ko'rinishi va umuman ko'rinish-ko'rinmasligini boshqaradi. Directive'lar yordamida DOM'ni o'zgartirish uchun o'zingiz kod yozmasdan HTML'ingizni boshqarishingiz mumkin.

Quyida template'laringizda Angular directive'laridan qanday foydalanishga misol keltirilgan:

<!-- Structural directive: Shows or hides DOM elements based on condition -->
<p *ngIf="isLoggedIn">How are you Cess?</p>

<!-- Structural directive: Repeats element for each item -->
<li *ngFor="let item of items">{{ item }}</li>

<!-- Attribute directive: Adds or removes classes from DOM elements -->
<div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }">Content</div>

<!-- Attribute directive: Changes the style -->
<p [ngStyle]="{ 'color': textColor, 'font-size': fontSize }">Styled text</p>

Angular'da directive'larning nechta turi bor va ular qaysilar?

Angular directive'larining uchta turi bor: component'lar, structural directive'lar va attribute directive'lar. Bu qo'llanmada Angular component'lariga alohida bo'lim ajratilgan, shuning uchun bu yerda qolgan turlarga to'xtalaman:

• Structural directive'lar: structural directive'lar template'ingizga DOM elementlarini qo'shadi yoki ulardan olib tashlaydi. Ulardan ekranda nima ko'rinishini hal qilish uchun foydalanasiz. Ularning nomi oldida yulduzcha * turadi. Misollar: *ngIf (ko'rsatish/yashirish), *ngFor (takrorlash) va *ngSwitch (bitta variantni tanlash).

• Attribute directive'lar: ular mavjud DOM elementlarini olib tashlamasdan o'zgartiradi. Ulardan elementlarning qanday ko'rinishini (rang, o'lcham, shrift) yoki qanday ishlashini (sichqoncha bosilishiga qanday javob berishini) o'zgartirish uchun foydalanasiz. Misollar: ngClass (class'larni boshqaradi), ngStyle (uslublarni boshqaradi) va ngModel (forma ma'lumotlarini bog'laydi).

Child component parent'dan keladigan input qiymatlari o'zgarganini qanday aniqlaydi?

Child component parent'dan keladigan input qiymatlari o'zgarganini quyidagicha aniqlaydi:

// Parent Component
export class ParentComponent {
  count = 0;

  increment() {
    this.count++;
  }
}

// Parent Template
<app-child [counter]="count"></app-child>
<button (click)="increment()">Increment</button>

// Child Component
export class ChildComponent implements OnChanges {
  @Input() counter: number;

  ngOnChanges(changes: SimpleChanges) {
    console.log('Counter changed:', changes['counter'].currentValue);
  }
}

Angular pipe'lari nima?

Pipe'lar — Angular template'larida ko'rsatish uchun ma'lumotlarni o'zgartiradigan funksiyalar. Ular kirish qiymatlarini qabul qiladi va asl ma'lumotni o'zgartirmasdan siz xohlagan chiqish formatini qaytaradi. Ulardan sonlar, sanalar, string'lar va boshqalarni formatlash uchun foydalanishingiz mumkin.

Angular date, uppercase, currency va json kabi o'rnatilgan pipe'larni taqdim etadi. O'rnatilgan pipe'lar qamrab olmaydigan har qanday mantiq uchun custom pipe'lar ham yaratishingiz mumkin. Angular pipe'larining sintaksisi juda oddiy. Interpolation qavslari ichida pipe operator'idan (vertikal chiziq |) foydalanasiz:

{{ value | pipeName }}
        or
{{ value | pipeName:parameter }}

PipeTransform interfeysi nima?

PipeTransform — Angular'dagi interfeys bo'lib, undan custom pipe'lar yaratish uchun foydalanasiz. U kirish qiymatlarini sizga kerakli formatga o'giradigan transform() metodini talab qiladi.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'multiply' })
export class MultiplyPipe implements PipeTransform {
  // PipeTransform requires this method
  transform(value: number, multiplier: number = 1): number {
    return value * multiplier;
  }
}

// Example: {{ 5 | multiply:3 }} returns 15

Reactive forms va template-driven forms o'rtasida qanday farqlar bor?

Reactive forms forma tuzilmasini component sinfingizda TypeScript yordamida belgilaydi. Formangizni ifodalovchi FormGroup va FormControl obyektlarini yaratasiz. So'ngra validation qoidalarini o'rnatish, qiymat o'zgarishlarini qayta ishlash va forma state'ini boshqarish — hammasini kodda bajarasiz. Reactive forms sizga TypeScript faylingiz ichida to'liq nazorat beradi, bu esa formalaringizni testlashni juda osonlashtiradi.

Template-driven forms esa forma tuzilmasi va validation'ni component'ingiz template'ida HTML directive'lari yordamida belgilaydi. Two-way binding uchun ngModel'dan, validation qoidalari uchun esa required va email kabi HTML attribute'laridan foydalanasiz. Angular HTML'ingiz asosida siz uchun form control'larni yaratadi.

Angular'da decorator'lar nima?

Decorator'lar — Angular'da sinflar va ularning a'zolariga metadata qo'shadigan TypeScript funksiyalari. Ular har bir sinf, property yoki metod oldida @ belgisi bilan boshlanadi. Decorator'lar Angular'ga sinf haqida va kodingizni qanday qayta ishlash haqida qo'shimcha ma'lumot beradi.

Angular kompilyatsiyaning nechta turini taqdim etadi?

Angular'da kompilyatsiyaning ikki turi bor:

• Just-in-Time (JIT) kompilyatsiya: u foydalanuvchilar ilovangizni yuklaganda kodingizni brauzerda kompilyatsiya qiladi. Sahifa yuklanganda brauzer uchta narsani yuklab oladi: Angular kompilyatori, Angular template'laringiz va TypeScript kodingiz. Ilovangiz ishlashi uchun brauzer ularning barchasini runtime'da kompilyatsiya qiladi. JIT'dan development jarayonida ng serve bilan foydalanasiz, chunki u tez build qiladi va o'zgarishlarni sodir bo'lishi bilanoq ko'rish imkonini beradi. Biroq foydalanuvchilar uchun ilova yuklanishi ko'proq vaqt olishi mumkin.

• Ahead-of-Time (AOT): ilovangiz deploy qilishdan oldin sizning mashinangizda (kompyuteringizda) kompilyatsiya qilinadi. ng build'ni production rejimida ishga tushirganingizda Angular standart holatda AOT kompilyatsiyadan foydalanadi. Angular template'laringiz va TypeScript kodingizni build jarayonida kompilyatsiya qiladi. Kompilyator brauzer ko'rishidan oldin hamma narsani optimallashtirilgan JavaScript kodiga aylantiradi.

Angular 9'dan beri Ivy kompilyatori ham JIT, ham AOT kompilyatsiyani bajaradi. U tezlikni oshiradi va yakuniy bundle'ni kichikroq saqlaydi.

Angular'da interceptor'larning roli qanday?

Interceptor'lar — HTTP so'rovlari va javoblarini bitta markaziy joyda tekshirish va o'zgartirish imkonini beradigan service'lar. Ular Angular ilovangiz va backend server o'rtasida turadi. Bu kodni hamma joyda takrorlash o'rniga umumiy vazifalarni bir joyda bajarishga yordam beradi. Bunday vazifalarga so'rovlarga authorization token'larini qo'shish va tarmoq nosozliklarida error handling kiradi.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Modify HTTP requests by adding auth token
    const token = localStorage.getItem('token');
    const authReq = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${token}`)
    });

    // Send changed request
    return next.handle(authReq);
  }
}

// Register in module
import { HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule { }

Angular CLI yordamida yangi Angular loyihasini qanday yaratasiz?

Quyida Angular CLI yordamida Angular loyihasini yaratishning oddiy qadamlari keltirilgan:

• Agar Angular CLI o'rnatilmagan bo'lsa, uni global o'rnatish uchun npm install -g @angular/cli buyrug'ini ishga tushiring.

• Terminalingizni oching va ng new project-name buyrug'ini ishga tushiring ("project-name" o'rniga o'zingiz xohlagan nomni yozing).

• Angular CLI routing va styling afzalliklaringiz bo'yicha sozlash savollarini beradi.

• Tugagach, Angular CLI foydalanishga tayyor to'liq loyiha tuzilmasini yaratadi.

• cd project-name bilan loyiha papkangizga o'ting va development server'ni ishga tushirish uchun ng serve buyrug'ini bajaring.

Angular Material nima?

Angular Material — Google'ning Angular ilovalari uchun foydalanuvchi interfeysi component kutubxonasi. U tugmalar, formalar, dialog'lar va navigatsiya menyulari kabi tayyor component'larni taqdim etadi. Bu component'larni noldan yaratish o'rniga ilovangizda darhol ishlatishingiz mumkin.

Angular loyihangiz papkasi ichida terminalingizni ochib, ushbu CLI buyrug'idan foydalaning:

ng add @angular/material

Angular Material'da responsive design yaratishga yordam beradigan layout vositalari ham bor. Barcha component'lar accessible, mobil qurilmalarga mos va theme'lar yordamida moslashtiriladigan.

Constructor va ngOnInit o'rtasidagi farq nima?

Constructor — dependency injection uchun TypeScript imkoniyati. U Angular component'ingizni sozlashni tugatishidan oldin ishlaydi. ngOnInit esa Angular'ning lifecycle hook imkoniyati. U constructor'dan keyin, Angular component'ning input'larini tayyorlab, ma'lumotlar va mantiqni sozlashingiz uchun tayyor bo'lgandan so'ng ishlaydi.

Angular production deploy'lari uchun qaysi kompilyatsiya rejimidan foydalanish kerak va nima uchun?

AOT production build'lari uchun standart va tavsiya etilgan yondashuv. U ilovangizni tezroq qiladi, kichikroq bundle'lar yaratadi, Angular template'laringizdagi xatolarni erta aniqlaydi va xavfsizlikni yaxshilaydi. Tez development uchun JIT'dan, production unumdorligi uchun esa AOT'dan foydalaning.

Angular'da component template'ini belgilashning qanday ikki usuli bor?

Component decorator'ining template konfiguratsiyasi component template'ini belgilashning ikki usulini taklif qiladi:

HTML'ni component fayli ichida backtick'lar bilan inline belgilash uchun template property'sidan foydalaning:

@Component({
  selector: 'app-greeting',
  template: `<h1>Hello, {{ name }}!</h1>`
})
export class GreetingComponent {
  name = 'Cess';
}

Alohida HTML fayl yarating va unga templateUrl property'si yordamida bog'laning:

// greeting.component.ts
@Component({
  selector: 'app-greeting',
  templateUrl: './greeting.component.html'
})
export class GreetingComponent {
  name = 'Cess';
}

// Separate HTML file
<!-- greeting.component.html -->
<h1>Hello, {{ name }}!</h1>

Angular'da string interpolation nima va u qanday ishlaydi?

Angular string interpolation'ni ifodalash uchun qo'sh jingalak qavslar {{ }}'dan foydalanadi. Qavslar orasidagi matn component property'sining nomi bo'ladi. Angular bu nomni tegishli component property'sining string qiymati bilan almashtiradi.

Angular'da HttpClient nima?

HttpClient — HTTP so'rovlarini yuborish va API'larni chaqirish uchun Angular'ning o'rnatilgan service'i. Undan get(), post(), put() va delete() kabi metodlar yordamida API'lardan ma'lumot olish, ularga ma'lumot yuborish yoki ular bilan ishlash uchun foydalanasiz.

Quyidagi kod brauzerda ma'lumotni qanday ko'rsatishini tushuntiring:

@Component({
  selector: 'app-user-profile',
  template: `<h1>Welcome, {{ fullName }}!</h1>`
})
export class UserProfileComponent {
  fullName = 'Angular Developer'; // String value
}

Angular component'dan fullName property'sini o'qiydi. U string qiymatni ('Angular Developer') oladi. So'ngra {{ fullName }}'ni shu qiymat bilan almashtiradi va brauzeringizda "Welcome, Angular Developer" matnini ko'rsatadi.

Quyida o'rta darajadagi tushunchalarga oid ba'zi Angular intervyu savollari keltirilgan:

Dasturchilar uchun o'rta darajadagi Angular intervyu savollari

Angular'da dependency injection qanday ishlaydi?

Dependency injection (DI) — obyektlar o'z dependency'larini o'zlari yaratish o'rniga tashqi manbalardan oladigan design pattern. Angular service'lar va dependency'larni Angular component'laringizga aynan shu yo'l bilan yetkazib beradi.

Angular'da dependency injection siz service yaratib, uni @Injectable decorator'i bilan belgilaganingizda ishlaydi. So'ngra uni Angular ilovalaringiz bo'ylab mavjud qilish uchun providedIn: 'root' qiymatini o'rnatasiz. Angular bitta instance yaratadi va uni butun ilovangiz bo'ylab ulashadi.

Angular component'ingizga service kerak bo'lganda, uni constructor'ga parametr sifatida qo'shasiz. Angular dependency'ni ko'radi va service instance'ini component'ingizga inject qiladi. Quyidagi kod dependency injection qanday ishlashini ko'rsatadi:

// Create a service
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Available throughout the app
})
export class UserService {
  getUser() {
    return { name: 'Cess', email: 'Cess@angularexample.com' };
  }
}

// Inject the service into a component
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-profile',
  template: `<h2>{{ userName }}</h2>`
})
export class ProfileComponent implements OnInit {
  userName: string;

  // Angular injects UserService for you
  constructor(private userService: UserService) {}

  ngOnInit() {
    const user = this.userService.getUser();
    this.userName = user.name;
  }
}

Angular lifecycle hook'lari nima?

Lifecycle hook'lar — component'ingiz lifecycle'ining muhim lahzalarida kod ishga tushirishga yordam beradigan metodlar. Har bir Angular component'i uch bosqichdan o'tadi: yaratilish, yangilanish va yo'q qilinish. Lifecycle hook'lar har bir bosqichni qayta ishlash uchun kod ishga tushirish imkonini beradi.

Quyida eng ko'p ishlatiladigan ikki lifecycle hook — OnInit va OnDestroy'dan foydalanilgan kod misoli keltirilgan:

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-message',
  template: `<p>{{ message }}</p>`
})
export class MessageComponent implements OnInit, OnDestroy {
  message: string;

  ngOnInit() {
    // Angular component created: The set up
    this.message = 'Hello! Angular Component is ready.';
    console.log('Component created');
  }

  ngOnDestroy() {
    // Destroyed Angular component
    // This is where you call .unsubscribe() to prevent memory leaks
    console.log('Component destroyed');
  }
}

Har bir Angular dasturchisi bilishi kerak bo'lgan asosiy lifecycle hook'lar qaysilar?

Siz foydalanadigan eng muhim lifecycle hook'lar:

• ngOnInit: Angular component'ingiz yuklangandan keyin ishlaydi. Bu dasturchilar eng ko'p ishlatadigan hook bo'lib, sozlash kodingizning ko'p qismi shu yerga yoziladi.

• ngOnChanges: bu lifecycle hook parent component'dan keladigan input ma'lumotlari (@Input property'lari deb ataladi) o'zgargan har safar ishlaydi.

• ngOnDestroy: bu Angular component'ingizni DOM'dan olib tashlashidan biroz oldin ishlaydi.

• ngAfterViewInit: bu Angular component'ingiz view'ini initsializatsiya qilgandan keyin ishlaydi. Undan @ViewChild orqali child component'larga yoki DOM elementlariga murojaat qilish uchun foydalaning.

Loyihangizda Angular render qilgandan keyin projected content'ga murojaat qilishingiz kerak. Qaysi lifecycle hook'dan foydalanish kerak va nima uchun?

ngAfterContentInit()'dan foydalaning, chunki u Angular tashqi content'ni component view'iga project qilgandan keyin bir marta chaqiriladi. U projected content'ga murojaat qilish yoki uni o'zgartirishga urinishingizdan oldin u mavjud bo'lishini ta'minlaydi.

Angular'da routing qanday ishlaydi?

Routing foydalanuvchilarga sahifani qayta yuklamasdan turli view'lar o'rtasida o'tish imkonini beradi. Angular Router brauzer URL'idagi o'zgarishlarni tinglaydi va har bir URL uchun to'g'ri component'ni yuklaydi.

Angular'da routing siz Routes massivida path'larni component'larga moslab route'larni belgilaganingizda ishlaydi. Har bir route Angular'ga muayyan URL uchun qaysi component'ni ko'rsatishni bildiradi, masalan, URL /home bo'lganda HomeComponent'ni ko'rsatish. Zamonaviy Angular (v14+) provideRouter() yordamida standalone component'lar bilan route'larni sozlashni ham qo'llab-quvvatlaydi.

Route'larni qanday belgilashga kod misoli:

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductsComponent } from './products/products.component';

// Define routes: map paths to components
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'products', component: ProductsComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

// Configure the Angular Router module with your routes
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Route'larni belgilab, Angular Router modulini sozlaganingizdan keyin routerLink yordamida navigatsiya havolalarini qo'shib, template'ingizda navigatsiyani sozlaysiz. Shuningdek, template'ingizga Angular mos kelgan component'larni ko'rsatadigan <router-outlet>'ni joylashtirasiz.

Navigatsiya va router outlet'ni qanday qo'shishga kod misoli:

<!-- app.component.html -->
<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/products">Products</a>
</nav>

<!-- Matched Angular component displays here -->
<router-outlet></router-outlet>

Foydalanuvchilar havolangizni bosganda Angular Router URL'ni yangilaydi. So'ngra u mos component'ni topadi va sahifani yangilamasdan uni router outlet'da ko'rsatadi. Har bir route URL'ga qarab boshqa component'ni ko'rsatishi mumkin. Bu foydalanuvchilarga ilovangizning turli bo'limlari o'rtasida bemalol o'tish imkonini beradi.

Bootstrapping modul nima?

Bootstrapping modul — ilovangizni ishga tushiradigan root Angular modul. Bu ilovangiz ishga tushganda Angular yuklaydigan birinchi modul. Bu modul Angular'ga qayerdan boshlash va ekranda birinchi bo'lib qaysi component'ni (odatda AppComponent) ko'rsatishni bildiradi.

Ko'pchilik Angular ilovalari bootstrapping uchun AppModule'dan foydalanadi. Angular bu modulni ishga tushirganda root component'ni yaratadi va uni index.html faylingizga qo'shadi. Angular 14 va undan yuqori versiyalar modullar o'rniga standalone component'lardan foydalanish imkonini beradi. Ilovangizni ishga tushirish uchun bootstrapApplication()'dan foydalaning, shunda sizga bootstrapping modul kerak bo'lmaydi.

ViewChild va ContentChild o'rtasidagi farq nima?

ViewChild — component'ingiz template'i ichidagi elementlarni topadigan decorator. Undan view yuklangandan keyin bu elementlarga reference olish va murojaat qilish uchun foydalanasiz.

ContentChild esa component'ga tashqaridan project qilingan elementlarni topadigan decorator. U parent component'lar ng-content orqali component tag'laringiz orasiga joylashtiradigan elementlarni topadi.

ViewChild va ContentChild'ga kod misoli:

import { Component, ViewChild, ContentChild, AfterViewInit, AfterContentInit } from '@angular/core';

// Simple child
@Component({
  selector: 'app-child',
  template: `<p>Child Component</p>`
})
export class ChildComponent {
  data = 'Child data';
}

// ViewChild example
@Component({
  selector: 'app-parent',
  template: `<app-child></app-child>`
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) child: ChildComponent;

  ngAfterViewInit() {
    console.log(this.child.data); // Accesses child from own template
  }
}

// ContentChild example
@Component({
  selector: 'app-container',
  template: `<div><ng-content></ng-content></div>`
})
export class ContainerComponent implements AfterContentInit {
  @ContentChild(ChildComponent) projected: ChildComponent;

  ngAfterContentInit() {
    console.log(this.projected.data); // Accesses projected content
  }
}

// showing the difference
@Component({
  template: `
    <!-- ViewChild: child in component's own template -->
    <app-parent></app-parent>

    <!-- ContentChild: child projected from parent -->
    <app-container>
      <app-child></app-child>
    </app-container>
  `
})
export class AppComponent {}

Angular service'larining vazifasi nima va ular component'lar ichida qanday ishlatiladi?

Angular service'lari — ilovangizga kerak bo'lgan mantiq va ma'lumotlarni boshqaradigan, qayta ishlatiladigan sinflar. Ular biznes mantiqni, API chaqiruvlarini va state management'ni ilovangiz bo'ylab markazlashtiradi. Service'lar turli component'larda kod takrorlanishining oldini oladi. Mantiqni service'da bir marta yozasiz va unga muhtoj bo'lgan bir nechta component'ga inject qilasiz.

Service yaratish uchun @Injectable({ providedIn: 'root' }) decorator'ini qo'shing. Component'lar service'ni o'z constructor'i orqali inject qiladi va Angular har bir component'ga bir xil instance'ni taqdim etadi.

Service'lar qanday ishlashiga kod misoli:

// Angular service
@Injectable({ providedIn: 'root' })
export class DataService {
  private data: string[] = [];

  addData(item: string) {
    this.data.push(item);
  }

  getData(): string[] {
    return this.data;
  }
}

// Using the Angular service in a component
@Component({
  selector: 'app-display',
  template: `<div *ngFor="let item of items">{{ item }}</div>`
})
export class DisplayComponent implements OnInit {
  items: string[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.items = this.dataService.getData();
  }
}

Eager loading va lazy loading nima?

Eager loading — Angular ilovalarining standart yuklash usuli. U ilovangiz ishga tushganda barcha modullar va component'larni yuklaydi. Angular hamma narsani, hatto foydalanuvchilar hech qachon kirmasligi mumkin bo'lgan feature'larni ham, birdaniga yuklaydi va sozlaydi. Bu birinchi bundle katta bo'lishi va uni yuklab olish ko'proq vaqt olishini anglatadi. Foydalanuvchilar ilova ishga tushishini uzoqroq kutishadi, lekin u yuklangandan keyin sahifalar o'rtasidagi o'tishlar tez bo'ladi.

const routes: Routes = [
  // Eager loading: load immediately
  { path: 'home', component: HomeComponent },

  // Lazy loading: load on demand
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  },
  {
    path: 'reports',
    loadChildren: () => import('./reports/reports.module').then(m => m.ReportsModule)
  }
];

Lazy loading esa modullar va component'larni faqat foydalanuvchilarga kerak bo'lganda yuklaydi. Angular ilovangizni kichikroq bo'limlarga ajratadi va har bir feature'ni talab bo'yicha yuklab oladi. Bu fayl hajmi kichikroq bo'lishini, shuning uchun uni yuklab olish kamroq vaqt olishini anglatadi. Lazy-loaded feature'ga kirishda foydalanuvchilar biroz kutishi mumkin, lekin ilova dastlab ancha tezroq yuklanadi.

RxJS nima va u Angular'da nima uchun ishlatiladi?

RxJS — Reactive Extensions for JavaScript'ning qisqartmasi. Bu Observable'lar yordamida asinxron data stream'lar bilan ishlash uchun kutubxona. Observable'lar HTTP javoblari kabi asinxron ma'lumotlarni qayta ishlash imkonini beradi. Ular vaqt davomida nol, bitta yoki bir nechta qiymatni emit qilishi, kerak bo'lganda bekor qilinishni qo'llab-quvvatlashi mumkin va ma'lumotlarni o'zgartirishga yordam beradigan o'rnatilgan operator'larga ega.

RxJS operator'lari murakkab mantiqni kichik, o'qilishi oson qadamlarga bo'lib bajarish imkonini beradi. RxJS'ga kod misoli:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-users',
  template: `
    <h3>User List</h3>
    <div *ngFor="let user of users$ | async">
      {{ user.name }}
    </div>
  `
})
export class UsersComponent {

        users$ = this.http.get<any[]>('https://jsonplaceholder.typicode.com/users');

  constructor(private http: HttpClient) {}
}

HttpClient yordamida API'dan ma'lumot olganingizda sizga Observable qaytariladi. Foydalanuvchilar reactive forms'da matn kiritganda Angular sizga ularning input o'zgarishlaridan iborat Observable beradi. Router NavigationStart va NavigationEnd kabi navigatsiya event'lari uchun Observable'lar yuboradi. Ana shu bir xil asinxron pattern Angular ilovalarini oldindan bashorat qilinadigan va boshqarishga osonroq qiladi.

Observable va Promise o'rtasidagi farq nima?

Promise'lar ham, Observable'lar ham Angular ilovalarida asinxron ma'lumotlarni qayta ishlaydi. Biroq ular qiymatlarni qanday yuborishi va data flow ustidan sizga qanchalik nazorat berishi bilan farq qiladi.

Jihat	Promise	Observables
Qiymatlar soni	Bitta qiymat qaytaradi	Bir nechta qiymat emit qilishi mumkin
Bajarilish	Yaratilgandan so'ng darhol boshlanadi (eager)	Faqat subscribe qilganingizda boshlanadi (lazy)
Operator'lar	Cheklangan (then, catch)	Operator'larga ega (map, filter, debounce va h.k.)
Bekor qilish	Boshlangandan keyin bekor qilib bo'lmaydi	unsubscribe() yordamida bekor qilish mumkin

Promise'lar bir marta resolve bo'ladigan yagona asinxron qiymatlarni qayta ishlaydi. U resolve bo'lgandan (muvaffaqiyatli tugagandan) yoki reject bo'lgandan (muvaffaqiyatsiz tugagandan) keyin u yakunlangan hisoblanadi. Promise yaratganingizda u darhol ishlay boshlaydi, ya'ni u eager. Promise ishlay boshlagandan keyin uni bekor qilish yoki to'xtatish mumkin emas. Foydalanuvchi profili ma'lumotlarini olish kabi bir marta bajariladigan vazifalar uchun Promise'dan foydalaning.

Observable esa uzoq vaqt davomida bir nechta qiymat emit qilishi mumkin (stream). Observable yaratganingizda u darhol ishlay boshlamaydi; u faqat siz .subscribe() qilganingizda boshlanadi, ya'ni ular lazy. Observable ishlay boshlagandan keyin uni unsubscribe qilish (.unsubscribe()) orqali bekor qilishingiz mumkin. Foydalanuvchilar matn kiritgan sari yangilanadigan qidiruv takliflari kabi bekor qilishni talab qiladigan vazifalar uchun Observable'dan foydalaning.

Angular elements nima?

Angular elements component'larni custom element'larga (web component'larga) aylantiradi. U Angular component'larini istalgan JavaScript freymvorkida yoki oddiy HTML'da ishlaydigan standart HTML elementlari sifatida paketlash imkonini beradi.

Angular element'iga kod misoli:

import { createCustomElement } from '@angular/elements';
import { Injector } from '@angular/core';

@NgModule({
  declarations: [MyComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    const element = createCustomElement(MyComponent, { injector });
    customElements.define('my-element', element);
  }
}

// Use anywhere:
// <my-element> </my-element>

Angular'da pure va impure pipe'lar o'rtasidagi farq nima?

Pure pipe'lar faqat Angular primitive input qiymatida (String, Number, Boolean, Symbol) yoki obyekt reference'ida o'zgarishni aniqlaganda ishlaydi. Standart holatda Angular'da siz yaratadigan har bir pipe pure pipe bo'ladi.

Impure pipe'lar esa faqat input qiymatlari o'zgarganda emas, balki Angular yangilanishlarni tekshirgan har safar ishlaydi. Ular faqat reference'lardagi emas, obyektlar va massivlardagi o'zgarishlarni ham aniqlaydi. Impure pipe'ni @Pipe decorator'iga pure: false qo'shish orqali yaratasiz.

Angular'da change detection qanday ishlaydi?

Change detection component'ingiz view'ini model ma'lumotlaringiz bilan sinxron saqlaydi va property'lar o'zgarganda foydalanuvchi interfeysi yangilanishini ta'minlaydi. Angular ilovangizda biror event sodir bo'lganda, masalan, foydalanuvchi tugmani bosganda, Angular bunga javob beradi. U event'dan keyin yangilanishlarni tekshirish uchun change detection siklini boshlaydi.

Bu siklda u biror qiymat o'zgargan-o'zgarmaganini aniqlash uchun har bir component property'sini tekshiradi. U root component'dan boshlaydi va har bir child component'ni tekshiradi. Agar Angular o'zgarishlarni topsa, brauzerdagi component view'ini yangilaydi.

Change detection strategiyalari qanday ishlashiga kod misoli:

import { Component, ChangeDetectionStrategy } from '@angular/core';

// Default change detection
@Component({
  selector: 'app-user',
  template: `
    <h2>{{ userName }}</h2>
    <button (click)="updateName()">Change my name</button>
  `
})
export class UserComponent {
  userName = 'Cess';

  updateName() {
    // Angular detects this change and updates your component's view
    this.userName = 'Success';
  }
}

// OnPush change detection (optimized)
@Component({
  selector: 'app-profile',
  template: `<p>{{ userEmail }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProfileComponent {
  @Input() userEmail: string;

  // It checks this Angular component when userEmail input changes
}

Angular'da change detection strategiyalarining qanday turlari bor?

Ilovangizning foydalanuvchi interfeysini ikki xil change detection strategiyasi yordamida yangilashingiz mumkin:

• Default strategiya: change detection sikli har safar ishlaganda Angular barcha component'larni tekshiradi. Bu eng oson strategiya, lekin katta Angular ilovalarida sekin ishlashi mumkin. U ma'lumotlar tez-tez o'zgaradigan va mantiqni kuzatish oson bo'lgan kichik ilovalar yoki oddiy component'lar uchun yaxshi ishlaydi.

• OnPush strategiya: Angular component'ni faqat uning input property'lari o'zgarganda tekshiradi. Shuningdek, component ichida biror narsa, masalan, click event sodir bo'lsa ham uni yangilaydi. Bu keraksiz tekshiruvlarni o'tkazib yuborish orqali ilovangizni tezlashtiradi. U ma'lumotlar kamroq o'zgaradigan va sizga yaxshiroq unumdorlik kerak bo'lgan katta ilovalar yoki murakkab component'lar uchun yaxshi ishlaydi.

Loyihangizda tugma bosilgandan keyin foydalanuvchi interfeysi o'z-o'zidan yangilanishini payqadingiz. Angular view'ni qachon yangilash kerakligini qanday biladi?

Angular asinxron operatsiyalar va tugma bosilishi kabi DOM event'larini kuzatish uchun zone.js'dan foydalanadi. Bu operatsiyalar tugagach, zone.js Angular'ga change detection'ni bajarishni bildiradi. Shundan so'ng Angular component property'laringizni tekshiradi va view'ni yangilaydi.

Angular change detection mexanizmi standart holatda OnPush strategiyasiga nisbatan qanday ishlaydi? Qanday vaziyatlarda change detection'ni qo'lda ishga tushirasiz?

Standart holatda Angular change detection mexanizmi biror o'zgarish sodir bo'lgan har safar barcha component'larni tekshiradi. Ammo OnPush strategiyasida Angular faqat Input property'lari o'zgarganda yoki event'lar ishlaganda tekshiradi.

Bu yondashuv unumdorlikni oshiradi, lekin Angular ba'zi tekshiruvlarni o'tkazib yuborgani sababli u barcha property yangilanishlarini ilg'amasligi mumkin. Bunday vaziyatlarda change detection'ni qo'lda ishga tushirish uchun ChangeDetectorRef'dan foydalanasiz. O'zgarishlarni darhol aniqlash uchun detectChanges()'dan yoki component'ni keyingi detection siklida tekshirish uchun belgilash maqsadida markForCheck'dan foydalaning

Angular qanday DOM'dan foydalanadi?

Angular React kabi Virtual DOM'dan emas, Real DOM'dan (Browser DOM deb ham ataladi) foydalanadi. Ma'lumotlaringiz o'zgarganda Angular buni change detection tizimi yordamida aniqlaydi va keyin DOM'ni yangilaydi. U avval virtual nusxa yaratish o'rniga brauzerdagi haqiqiy DOM elementlarini o'zgartiradi.

Biroq component'larga uslub berish masalasida Angular turli ViewEncapsulation rejimlarini taklif qiladi:

• ViewEncapsulation.Emulated: standart variant.

• ViewEncapsulation.ShadowDom: brauzerning Shadow DOM imkoniyatidan foydalanadi.

• ViewEncapsulation.None: uslublar izolyatsiya qilinmaydi (uslublar boshqa component'larga ta'sir qilishi mumkin).

Angular'da ViewEncapsulation.ShadowDom va ViewEncapsulation.Emulated o'rtasidagi farq nima?

Angular ilovalarini yaratayotganda component uslublari uchun turli ViewEncapsulation variantlarini tanlashingiz mumkin. ViewEncapsulation.ShadowDom alohida DOM tree yaratadi, shuning uchun uslublar boshqa component'larga ta'sir qilmaydi.

Standart variant bo'lgan ViewEncapsulation.Emulated bu xatti-harakatni brauzerning to'liq qo'llab-quvvatlashini talab qilmasdan takrorlaydi. U component ichidagi DOM elementlarini aniqlash uchun ularga maxsus attribute'lar qo'shadi. So'ngra uslublar shu component doirasida qolishi uchun CSS selector'larini yangilaydi.

Elvis operator nima?

Elvis operator safe navigation operator deb ham ataladi. Elvis operator'ni so'roq belgisi va undan keyin nuqta (?.) bilan yozasiz. U obyekt null yoki undefined bo'lganda (ya'ni qiymat mavjud bo'lmaganda) xatolarning oldini oladi.

Undan Angular template'larida person?.age kabi property'larga murojaat qilish uchun foydalanasiz. Angular "person"ning qiymati bor-yo'qligini tekshiradi; agar u null yoki undefined bo'lsa, xato chiqarish o'rniga undefined qaytaradi.

Angular HTTP so'rovlaridagi xatolarni qanday qayta ishlaysiz?

HTTP xatolarini service yoki component'ingizda RxJS operator'lari yordamida qayta ishlashingiz mumkin. HTTP so'rovlaridan kelgan xatolarni qayta ishlash uchun pipe ichida catchError operator'idan foydalaning.

Server xatolarini foydalanuvchilar tushuna oladigan xabarlarga aylantiring. Kerakligiga qarab muvaffaqiyatsiz so'rovlarni qayta urinib ko'ring, standart ma'lumotlarni taqdim eting yoki foydalanuvchilarni boshqa sahifaga yo'naltiring. Butun ilovangiz bo'ylab error handling'ni markazlashtirish uchun HTTP interceptor yarating.

Angular'da ahead-of-time (AOT) kompilyatsiya nima?

Ahead-of-time (AOT) kompilyatsiya Angular ilovangizni deploy qilishdan oldin, build jarayonida kompilyatsiya qiladi. AOT Angular component'lari va template'larini optimallashtirilgan JavaScript'ga kompilyatsiya qiladi. U production bundle'ingizda og'ir kompilyator bo'lishi zaruratini yo'qotadi, bu esa xotirani tejaydi va yuklanish vaqtini qisqartiradi.

Ahead-of-time kompilyatsiyadan foydalanishning ba'zi afzalliklari:

• Ilovalar tezroq yuklanadi, chunki brauzer template'larni kompilyatsiya qilmaydi.

• Angular kompilyatorisiz production bundle'lar kichikroq bo'ladi.

• Oldindan kompilyatsiya qilingan template'lar hujumchilarning runtime'da ilovangizga zararli kod inject qilishining oldini oladi.

• Template xatolarini production'da emas, build vaqtida aniqlaysiz.

ng build'ni ishga tushirganingizda Angular standart kompilyatsiya rejimi sifatida AOT'dan foydalanadi. Angular kodingiz va template'laringizni development mashinangizda yoki build server'ida o'zgartiradi. Foydalanuvchilar brauzerda kompilyatsiya qilinmasdan darhol ishlaydigan, tayyor, bajariladigan kodni yuklab oladi.

Parent va child component'lar o'rtasida two-way data binding'ni qanday amalga oshirasiz?

Two-way data binding'ni @Input() va @Output() decorator'larini birgalikda ishlatish orqali amalga oshirasiz:

// Child Component
export class ChildComponent {
  @Input() value: string;
  @Output() valueChange = new EventEmitter<string>();

  updateValue(newValue: string) {
    this.value = newValue;
    this.valueChange.emit(newValue);
  }
}

// Parent Component
export class ParentComponent {
  parentValue = 'Initial value';
  // In template: <app-child [(value)]="parentValue"></app-child>
}

switchMap, mergeMap va concatMap o'rtasidagi farq nima?

switchMap yangi so'rov boshlanganda eski so'rovlarni tashlab yuboradi va faqat eng so'nggi so'rovni saqlab qoladi. Undan autocomplete qidiruvlari kabi faqat eng so'nggi natija sizni qiziqtirgan holatlarda foydalaning.

mergeMap oldingi so'rovlarni kutmasdan yoki bekor qilmasdan bir vaqtning o'zida bir nechta so'rovni qayta ishlaydi. Undan batch processing'dagi kabi har bir operatsiya mustaqil ravishda tugashi kerak bo'lgan holatlarda foydalaning.

concatMap esa so'rovlarni ketma-ket bajaradi: keyingisini boshlashdan oldin har birining tugashini kutadi. Undan xabarlarni yuborish yoki to'lovlarni birma-bir qayta ishlash kabi vazifalar belgilangan tartibga rioya qilishi kerak bo'lgan holatlarda foydalaning.

import { Component } from '@angular/core';
import { switchMap, mergeMap, concatMap } from 'rxjs/operators';
import { fromEvent, of } from 'rxjs';

@Component({
  selector: 'app-operators',
  template: `<input #searchBox>`
})
export class OperatorsComponent {

  // switchMap - cancels previous, only latest matters
  searchWithSwitch() {
    fromEvent(this.searchBox.nativeElement, 'input').pipe(
      switchMap(() => this.http.get('/api/search'))
    ).subscribe(results => console.log(results));
    // Types "abc" fast → only "c" search completes, "a" and "b" cancelled
  }

  // mergeMap - all run in parallel, no cancellation
  saveMultipleWithMerge() {
    const items = [1, 2, 3];
    of(...items).pipe(
      mergeMap(item => this.http.post('/api/save', item))
    ).subscribe(result => console.log(result));
    // All 3 POST requests run at same time
  }

  // concatMap - waits for each to finish, maintains order
  processQueueWithConcat() {
    const tasks = [1, 2, 3];
    of(...tasks).pipe(
      concatMap(task => this.http.post('/api/process', task))
    ).subscribe(result => console.log(result));
    // Task 2 waits for task 1, task 3 waits for task 2
  }
}

Angular'dagi dynamic component'larni tushuntiring

Dynamic component'lar oldindan emas, faqat ilovangizga kerak bo'lganda yuklanadi. Angular ularni foydalanuvchi harakatlari kabi shartlarga qarab yuklaydi. Qaysi component'ni ko'rsatishni kod yozayotganingizda emas, ilova ishlayotgan paytda hal qilasiz.

Dynamic component'lar pop-up'lar va modal'lar kabi foydalanuvchi ehtiyojlariga moslashadigan interfeyslarni yaratishga yordam beradi. Template'ingizga placeholder sifatida ViewContainerRef'ni inject qilasiz, so'ngra kerak bo'lganda o'sha placeholder'ga component joylashtirish uchun createComponent()'ni chaqirasiz.

Quyida siz bilishingiz kerak bo'lgan murakkab tushunchalarga oid Angular intervyu savollari keltirilgan:

Dasturchilar uchun murakkab darajadagi Angular intervyu savollari

Angular va React o'rtasidagi farq nima?

Angular — veb-ilovalar yaratish uchun to'liq freymvork. U routing, formalar va HTTP client kabi barcha zarur vositalarni o'z ichiga oladi. State management uchun NgRx kabi tashqi kutubxonalardan yoki RxJS bilan service'lardan foydalanishingiz mumkin. Angular'ni Google qo'llab-quvvatlaydi va u standart holatda TypeScript'dan foydalanadi. Angular opinionated tuzilmaga amal qiladi, ya'ni u ilovangizni qanday tuzish kerakligini sizga aytib beradi.

React esa foydalanuvchi interfeyslarini yaratishga qaratilgan JavaScript kutubxonasi. Uni Facebook yaratgan va u JavaScript'dan foydalanadi (TypeScript ixtiyoriy). React moslashuvchan va unopinionated, ya'ni ilovangizni o'zingiz xohlagancha tuzishingiz mumkin.

Angular ilovasi unumdorligini qanday optimallashtirasiz?

Angular ilovangizni quyidagi asosiy qadamlarga amal qilib optimallashtirishingiz mumkin:

• Lazy loading'dan foydalaning: ilovangizni feature modullarga, masalan, Admin moduliga ajrating. So'ngra ularni faqat kerak bo'lganda yuklash uchun route'laringizni, masalan, /admin'ni loadChildren yordamida sozlang.

• OnPush change detection: Angular component'ingizni ChangeDetectionStrategy.OnPush bilan sozlang. Angular component'ni faqat input reference'lari o'zgarganda, component ichida event'lar sodir bo'lganda yoki async pipe yangi qiymatlar olganda tekshiradi. Bu usul tez-tez o'zgarmaydigan ko'plab component'larga ega ilovalarda vaqtni tejaydi.

• Ro'yxatlar uchun TrackBy: component'ingiz template'ida ngFor'dan foydalanayotganda trackBy funksiyalarini qo'shing. U o'zgargan elementlarni topadi va butun ro'yxatni qayta qurishni o'tkazib yuboradi.

• Build optimization: AOT kompilyatsiyani yoqish uchun ng build bilan build qiling. U bundle'ingizdan development kodini va ishlatilmaydigan dependency'larni olib tashlaydi.

Angular ilovasini qanday optimallashtirishga kod misoli:

// Lazy loading in routes
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

// OnPush change detection
@Component({
  selector: 'app-user-list',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<div *ngFor="let user of users; trackBy: trackByUserId">{{ user.name }}</div>`
})
export class UserListComponent {
  @Input() users: User[];

  trackByUserId(index: number, user: User): number {
    return user.id; // Track by unique ID
  }
}

Angular component va custom element o'rtasidagi farq nima?

Angular component'lari — Angular ilovalarining freymvorkka bog'liq qismlari. Ular Angular'ning change detection, dependency injection va lifecycle tizimidan foydalanadi. Component'lar @Input() decorator'i orqali component input property'larini qabul qiladi, bu esa parent component'larga ma'lumot uzatish imkonini beradi.

// Angular component
@Component({
  selector: 'app-counter',
  template: `
    <button (click)="increment()">Count: {{ count }}</button>
  `
})
export class CounterComponent {
  @Input() count = 0;
  @Output() countChange = new EventEmitter<number>();

  increment() {
    this.count++;
    this.countChange.emit(this.count);
  }
}

// Convert to custom element
@NgModule({
  declarations: [CounterComponent],
  imports: [BrowserModule]
})
export class AppModule {
  constructor(injector: Injector) {
    const counter = createCustomElement(CounterComponent, { injector });
    customElements.define('app-counter', counter);
  }
}

// Use anywhere:

Custom element'lar esa veb standartlariga mos keladigan, freymvorkdan mustaqil web component'lar. Ular istalgan JavaScript freymvorki bilan yoki vanilla JavaScript muhitida ishlaydi. Angular Angular elements yordamida component'ni custom element'ga aylantira oladi. U istalgan joyda ishlatishingiz mumkin bo'lgan, unga bog'langan custom element tag'iga ega standalone component yaratadi.

Angular'da memory leak'larni qanday hal qilasiz?

Memory leak'lar Angular component'laringiz yo'q qilingandan keyin ham resurslarni ushlab turganda yuzaga keladi. Ilovangiz endi mavjud bo'lmagan component'ga yangilanishlar yuborishda davom etadi. Bu keraksiz xotira sarfiga olib keladi va ilovangizni sekinlashtiradi.

Memory leak'larning oldini olish uchun quyidagi best practice'larga amal qiling:

• Memory leak'larning oldini olish uchun ngOnDestroy'da Observable'lardan unsubscribe qiling. Qo'lda subscription qilish o'rniga Angular template'larida async pipe'dan ham foydalanishingiz mumkin.

• Ko'p subscription'larga ega component'lar uchun takeUntilDestroyed operator'idan foydalaning.

• Angular component'ni yo'q qilganda timer'larni to'xtatish uchun ngOnDestroy'da clearInterval() va clearTimeout()'dan foydalaning.

• Component instance'larini uzoq yashaydigan service'lar ichida saqlamang.

• Eski event handler'lardan kelib chiqadigan memory leak'larning oldini olish uchun ngOnDestroy'da removeEventListener yordamida event listener'larni olib tashlang.

Angular'da memory leak'larni qanday hal qilishga kod misoli:

import { Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-profile',
  template: `<div>{{ userName }}</div>`
})
export class ProfileComponent {
  userName: string;

  constructor(private userService: UserService) {
    // Angular handles the cleanup 
    this.userService.getUser()
      .pipe(takeUntilDestroyed())
      .subscribe(user => {
        this.userName = user.name;
      });
  }
}

Katta Angular ilovalarida state'ni qanday boshqarasiz?

State management ma'lumotlar bir nechta component o'rtasida qanday oqishini boshqaradi. State — bu ilova eslab qolishi kerak bo'lgan ma'lumotlar, masalan, forma ma'lumotlari. State yaxshi boshqarilmasa, ilovani debug qilish qiyinlashadi va component'lar bir-biri bilan sinxronligini yo'qotishi mumkin.

Katta Angular ilovalarida state'ni boshqarish uchun quyidagi best practice'larga amal qiling:

• State'ni saqlash va uni turli component'lar o'rtasida ulashish uchun service yarating.

• State reactive bo'lishi va qo'lda yangilamasdan sinxron qolishi uchun service'laringizda BehaviorSubject yoki ReplaySubject'dan foydalaning.

• State'ni yangilayotganda mavjud obyektlarni o'zgartirish o'rniga har doim yangi obyektlar yarating.

• Ilovangiz state'ni ulashadigan ko'plab component'lar bilan kattalashib ketganda NgRx'dan (state management kutubxonasi) foydalaning.

• Parent-child component'lar uchun @Input va @Output'dan, sibling yoki bir-biridan uzoq component'lar uchun esa umumiy service'lardan foydalaning.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class StateService {
  private state = new BehaviorSubject<AppState>({ items: [], loading: false });
  state$ = this.state.asObservable();

  updateState(newState: Partial<AppState>) {
    this.state.next({ ...this.state.value, ...newState });
  }
}

// Angular component using the service
@Component({
  template: `<div>{{ (state$ | async)?.items.length }} items</div>`
})
export class ListComponent {
  state$ = this.stateService.state$;
  constructor(private stateService: StateService) {}
}

Angular'da NgModule'ning vazifasi nima?

NgModule o'zaro bog'liq Angular component'lari, service'lari va directive'larini modullarga guruhlash orqali ilovangizni tartibga soladi. U kompilyatsiya kontekstini belgilaydi, qaysi component'lar bir-biridan foydalana olishini nazorat qiladi, dependency injection scope'ini boshqaradi va export'lar orqali boshqa modullarga nima ko'rinishini aniqlaydi.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],  // Components in your module
  imports: [BrowserModule],       // modules you need
  providers: [],                  // Services
  bootstrap: [AppComponent]       // Starting component
})
export class AppModule { }

Dasturchilar hali ham NgModule'dan foydalanishadi, lekin Angular uni ixtiyoriy qilgan. Zamonaviy Angular (v14+) endi NgModule talab qilmaydigan standalone component'larni qo'llab-quvvatlaydi. Standalone component'lar barcha yangi Angular component'lari uchun ancha soddaroq sozlashni taqdim etadi.

Angular'da differential loading nima?

Differential loading — Angular'dagi imkoniyat bo'lib, u build jarayonida ilovaning ikki versiyasini yaratadi. Biri arrow function'lar kabi yangiroq JavaScript (ES2015+) imkoniyatlariga ega zamonaviy brauzerlar uchun. Ikkinchisi eski brauzerlarda ishlaydigan eskiroq JavaScript sintaksisi — ES5'dan foydalanadi. Bu eski brauzerlar bilan moslikni saqlagan holda yangiroq brauzerlar uchun unumdorlikni optimallashtiradi.

Angular Signals nima?

Angular Signals — state management uchun yangi reactive primitive. Ular ma'lumotlarni saqlaydi va qiymatlar o'zgarganda Angular'ni xabardor qiladi, bu esa foydalanuvchi interfeysining yangilanishiga imkon beradi.

Signal'larni signal() funksiyasi bilan yaratasiz va ularni set() yoki update() bilan yangilaysiz. Hosila qiymatlar uchun computed()'dan, side effect'lar uchun esa effect()'dan foydalaning.

import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count() }}</p>
    <p>Double: {{ doubleCount() }}</p>
    <button (click)="increment()">Increment</button>
  `
})
export class CounterComponent {
  // Create signal
  count = signal(0);

  // Computed signal (derived value)
  doubleCount = computed(() => this.count() * 2);

  constructor() {
    // Effect runs when signal changes
    effect(() => {
      console.log('Count changed to:', this.count());
    });
  }

  // Update signal
  increment() {
    this.count.update(value => value + 1);
    // or: this.count.set(this.count() + 1);
  }
}

// Example with object mutation
@Component({
  selector: 'app-user',
  template: `
    <p>{{ user().name }} - {{ user().age }}</p>
    <button (click)="updateAge()">Birthday</button>
  `
})
export class UserComponent {
  user = signal({ name: 'Cess', age: 25 });

  updateAge() {
    // Use update for transformation
    this.user.update(current => ({ ...current, age: current.age + 1 }));

    // Or use mutate for direct mutation
    this.user.mutate(current => current.age++);
  }
}

Angular ilovalarini qanday samarali debug qilasiz?

Quyida Angular ilovalarini debug qilish usullari keltirilgan:

• Component ierarxiyasi va state'ini ko'rish uchun Angular DevTools brauzer kengaytmasidan foydalaning.

• Bajarilishni to'xtatib turish va o'zgaruvchilarni tekshirish uchun brauzer DevTools'ida (masalan, Chrome'da) breakpoint'lar qo'ying.

• Data flow va component xatti-harakatini kuzatish uchun console.log() ifodalarini qo'shing.

• Observable ma'lumotlarini log qilish uchun tap() operator'i kabi RxJS debugging vositalaridan foydalaning.

• Xato xabarlari va stack trace'lar uchun brauzer konsolini tekshiring.

Angular'da Progressive Web App (PWA) imkoniyatlarini qanday amalga oshirasiz?

Quyida Angular'da Progressive Web App (PWA) imkoniyatlarini amalga oshirish qadamlari keltirilgan:

• PWA qo'llab-quvvatlashini o'rnatish uchun ng add @angular/pwa buyrug'ini ishga tushiring; u service worker, manifest fayli va ikonkalarni qo'shadi.

• Asset'lar va ma'lumotlar uchun keshlash qoidalarini belgilash maqsadida ngsw-config.json'ni o'zgartiring.

• manifest.webmanifest'ni nomi, theme rangi va ikonkalari kabi ilovangiz tafsilotlari bilan yangilang.

• Ilovangizni production uchun ng build bilan build qiling.

• Service worker'ni ro'yxatdan o'tkazishni yoqish uchun ilovangizni HTTPS orqali taqdim eting.

Angular Ivy nima?

Angular Ivy — Angular'ning eng yangi rendering engine'i va kompilyatori. U Angular 9'da oldingi kompilyator (View Engine) o'rnini egalladi va standart kompilyatorga aylandi.

Ivy Angular component'laringizni kichikroq va tezroq JavaScript kodiga kompilyatsiya qiladi. U fayllaringizdan ishlatilmaydigan kodni olib tashlash uchun yaxshiroq tree-shaking kabi imkoniyatlarni ta'minlaydi. Agar pipe yoki directive kabi biror Angular imkoniyatidan foydalanmasangiz, Ivy kompilyatori uni yakuniy bundle'dan olib tashlaydi.

Angular schematics nima?

Schematics — Angular loyihalarida kod generatsiya qiladigan template'lar va qoidalar. Ular component'lar yaratish, kutubxonalar qo'shish va loyiha konfiguratsiyalarini yangilash kabi vazifalarni avtomatlashtiradi. Angular CLI ng add yoki ng generate kabi buyruqlarni ishga tushirganingizda schematics'dan foydalanadi. Ular Angular konvensiyalariga amal qiladigan kod yozishingizga va loyihani yaxshi tuzilgan holda saqlashga yordam beradi.

Yakuniy so'z

Angular intervyusiga tayyorlanish chuqur bilim va loyiha tajribasini talab qiladi. Siz freymvork tuzilishini tushunishingiz va u bilan katta ilovalarni qanday qurishni bilishingiz kerak. O'sish mashq va mehnat talab qiladi, ammo to'g'ri yondashuv katta farq qiladi. Ushbu qo'llanmadagi savollardan mashq qilish uchun foydalaning, loyihalar quring va tez-tez takrorlab turing.

Javoblaringizni tushunish oson bo'lishi uchun ularni tushuntirib berishni mashq qiling. Intervyu oluvchilar murakkab mavzularni tushunarli so'zlar bilan tushuntira oladigan dasturchilarni izlashadi. Asosiy g'oyalarni tushuning hamda ularning afzallik va kamchiliklarini, kundalik loyihalarda qanday qo'llanilishini muhokama qilishga tayyor bo'ling.

Endi mashq qilish navbati sizda. Angular intervyu savollari bo'yicha bilimingizni sinab ko'rish uchun quyidagi AI Tutor'imizdan so'rang.

Agar ko'p variantli va ochiq javobli savollarga ega interaktivroq viktorina tajribasini afzal ko'rsangiz, maxsus AI Tutor sahifasiga kiring. O'rganganlaringizni eslab qolishingiz va Angular intervyulariga tayyorlanishingizga yordam berish uchun har bir savol bo'yicha tezkor fikr-mulohaza va shaxsiylashtirilgan tushuntirishlar oling.

Agar ba'zi savollar qiyin tuyulsa, xavotir olmang: har bir mutaxassis yangi boshlovchi sifatida boshlagan. Yaxshiyamki, biz bu yo'lda sizga yordam berish uchun shu yerdamiz. Bilimingizdagi bo'shliqlarni aniqlash va ko'nikmalaringizni bosqichma-bosqich rivojlantirishda davom etish uchun Angular Roadmap'ga ko'z tashlang.