Angular ilovani ishga tushirish (bootstrap)

Bootstrap ilovangizni mustaqil root komponenti bilan ishga tushiradi va provayderlarni (Router, HttpClient va h.k.) unumdorlik va sinovdan o‘tish uchun to‘g‘ri miqyosda ro‘yxatdan o‘tkazadi.

Ilovani ishga tushirish (bootstrap) asoslari

Boshlash: Mustaqil root komponentini ishga tushirish uchun bootstrapApplication() dan foydalaning.
Xususiyatlarni taqdim eting: bootstrap-da provideRouter(), provideHttpClient() va boshqalarni qo‘shing.
DI: Provayder qaramlik in’ektsiyasiga token uchun qiymatni qanday yaratish yoki yetkazib berish kerakligini aytadi.
Qo‘llash doirasi: Ishlash va sinovdan o‘tish uchun eng kichik foydali doirada (xususiyat/marshrut) ro‘yxatdan o‘ting.

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

bootstrapApplication(App, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

Eslatmalar:

Tegishli: Router, HttpClient va Services & DI-ga qarang.
Ishlash va sinovdan o‘tishni yaxshilash uchun provayderlarni eng kichik foydali doirada (xususiyat yoki marshrut) ro‘yxatdan o‘tkazing.
Ilova tezroq ishga tushishi uchun provideRouter() bilan birga kechiktirib yuklanadigan (lazy) marshrutlardan foydalaning.

Asosiy Bootstrap va global provayderlar

Ilova bo‘ylab mavjudligi uchun Router va HttpClient bilan yuklash.
Root komponentini minimal darajada saqlang; bootstrap-da provayderlarni sozlang.

bootstrapApplication(App, { providers: [ provideRouter(routes), provideHttpClient() ] });

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { Routes, provideRouter, RouterOutlet } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

@Component({
  selector: 'home-page',
  standalone: true,
  template: `<p>Home works</p>`
})
class Home {}

const routes: Routes = [
  { path: '', component: Home }
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `<router-outlet></router-outlet>`
})
class App {}

bootstrapApplication(App, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

bootstrapApplication(Application): Ilovani mustaqil root komponenti bilan ishga tushiradi.
provideRouter(marshrutlar): Router va marshrutlarni ro‘yxatdan o‘tkazadi.
provide HttpClient(): HttpClient ilovasini yoqadi.
RouterOutlet: Faol marshrut komponentini ko‘rsatadi.

Eslatmalar:

Root yengil bo‘lib qoladi: root komponentini minimal darajada saqlang; bootstrapApplication() da provayderlarni sozlang.
Funksiyalardan foydalaning: Eski modullar o‘rniga provideRouter() va provideHttpClient() dan foydalaning.
Avvalo kechiktirilgan yuklash: dastlabki bundle hajmini kamaytirish va ishga tushishni tezlashtirish uchun kechiktirib yuklanadigan (lazy) marshrutlarni afzal ko‘ring.

Xususiyat ko‘lamli provayderlar

Keraksiz globallardan qochish uchun faqat kerak bo‘lganda xizmatlarni taqdim eting.
Xususiyat/marshrut provayderlari ishga tushirish va sinovdan o‘tish imkoniyatini yaxshilashi mumkin.

const routes = [
  { path: 'admin', providers: [provideHttpClient()], loadComponent: () => import('./admin').then(m => m.Admin) }
];
bootstrapApplication(App, { providers: [provideRouter(routes)] });

Misol

import { Routes, provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

const routes: Routes = [
  {
    path: 'admin',
    providers: [provideHttpClient()],
    loadComponent: () => import('./admin.component').then(m => m.AdminComponent)
  }
];

bootstrapApplication(App, { providers: [provideRouter(routes)] });

Faqat administrator hududi qo‘shimcha provayderlarni oladi.

Ilovaning qolgan qismi ozg‘in bo‘lib qoladi.

Misol tushuntirildi

marshrutdagi provayderlar: provideHttpClient() ni faqat /admin ga biriktiradi.
loadComponent: Lazy navigatsiyada administrator komponentini yuklaydi.
Qo‘llanilish doirasi: Boshqa marshrutlar root nurini saqlab, ushbu provayderlarni qabul qilmaydi.

Eslatmalar:

Ehtiyotkorlik bilan qamrab oling: keraksiz global singletonlardan qochish uchun provayderlarni faqat ularga kerak bo‘lgan xususiyatlarga qo‘shing.
Takrorlashdan saqlaning: skanerlash provayderlari yangi misollar yaratishi mumkinligini yodda tuting; bu mo‘ljallanganligiga ishonch hosil qiling.

HttpClient sozlamalari

provideHttpClient() ni kerakli doirada bir marta qo‘shing.
Ushbu doira uchun HttpClientni yoqadi; kerak bo‘lganda tutqichlarni qo‘shing.
Interceptors kichik va diqqat markazida bo‘ling.

bootstrapApplication(App, { providers: [provideHttpClient()] });

Misol

import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(App, {
  providers: [provideHttpClient()]
});

Eslatmalar:

Mustaqil ravishda qulay: Mustaqil ilovalarda HttpClientModule import qilish uchun provideHttpClient() dan foydalaning.
Kesish: autentifikatsiya/jirga olish uchun tutqichlardan foydalaning; ularni tegishli doirada bir marta ro‘yxatdan o‘tkazing.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish