راه اندازی برنامه (App Bootstrap)

راه اندازی برنامه یعنی شروع کردن اپ با یک کامپوننت ریشه «استندالون (Standalone)». همچنین «پراوایدر (Provider)»ها را در جای درست ثبت می کنیم تا کارایی و تست پذیری بهتر شود.

اساس راه اندازی و پراوایدرها

با bootstrapApplication() اپ را بالا بیاور. سپس قابلیت ها را با provideRouter() و provideHttpClient() اضافه کن. «DI» یعنی تزریق وابستگی؛ پراوایدر می گوید هر توکن چگونه ساخته شود.

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

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

مشاهده در ادیتور

نمونه پایه: بوت استرپ و پراوایدرهای سراسری

ریشه را سبک نگه دار. سپس روتر و HttpClient را هنگام بوت استرپ اضافه کن تا همه جا در دسترس باشند.

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()
  ]
});

مشاهده در ادیتور

چرا این خوب است؟

• bootstrapApplication() اپ را با کامپوننت ریشه روشن می کند.
• provideRouter() روتر و مسیرها را ثبت می کند.
• provideHttpClient() HttpClient را سراسری فعال می کند.

پراوایدرهای محدوده دار (Feature-Scoped)

همه چیز را سراسری نکن. بنابراین فقط همان فیچر نیازمند، پراوایدر بگیرد. نتیجه، شروع سریع تر و تست ساده تر است.

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)]
});

مشاهده در ادیتور

نکته: محدوده دادن می تواند نمونه جدید سرویس بسازد. بنابراین این رفتار را آگاهانه انتخاب کن.

تنظیم HttpClient در بوت استرپ

کافی است یک بار در همان محدوده هدف، provideHttpClient() را ثبت کنی. سپس این کار HttpClient را در همانجا فعال می کند.

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

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

مشاهده در ادیتور

گام های عملی سریع

1. کامپوننت ریشه استندالون بساز.
2. bootstrapApplication() را فراخوانی کن.
3. روتر و HttpClient را با provide* اضافه کن.
4. پراوایدرها را تا حد ممکن محدوده دار کن.

جمع بندی سریع

• بوت استرپ با bootstrapApplication ساده و سریع است.
• پراوایدرها، ساخت وابستگی ها را مدیریت می کنند.
• محدوده درست، کارایی و تست را بهتر می کند.
• ریشه را سبک نگه دار و تنظیمات را آنجا انجام بده.

مسیر مرتبط: استایل دهی انگولار و کنترل جریان. همچنین جست وجو کن: روتر انگولار برای مسیرها.