Hogyan működik az "any provider" szórás az Angular alkalmazásokban?

Az "any provider" szórás egy olyan egyedi mechanizmus az Angular-ban, amely lehetővé teszi, hogy modulonként egy-egy példányban biztosítsunk függőségeket. A rendszer lényege, hogy a gyökérmodul – általában az AppModule – és minden olyan Angular modul, amelyet statikus importálás révén töltenek be, egy közös példányt használnak. Ezzel szemben a késleltetve betöltött Angular modulok, valamint azok a modulok, amelyek azokat statikusan importálják, egy külön függőségi példányt kapnak. Ha több ilyen késleltetett betöltésű modul is létezik, mindegyik saját példányt fog megosztani az importált Angular modulokkal.

Az "any provider" szórás használata specifikus alkalmazásokhoz ideális, például állapotfüggő szolgáltatások kezelésére, amelyek különböznek a késleltetve betöltött Angular modulok között. Használható továbbá analitikai eszközökhöz, konfigurációkhoz, naplózáshoz és egyéb metrikákhoz is. Ezen kívül a következő esetekben is ajánlott alternatívaként:

• Az Angular szolgáltatás modulok és azok szolgáltatásainak a kezelésére.

• A forRoot-forChild mintázatban történő függőségi példányok biztosítására.

• Lazy-loaded Angular feature modulokhoz.

Fontos, hogy bár az "any provider" szórás egy rugalmas és dinamikus megoldás, csak nagyon specifikus esetekben érdemes alkalmazni. A következőkben egy példát mutatok be arra, hogyan használhatjuk ezt a megoldást egy backend konfigurációs szolgáltatás kezelésére.

Az ábrán látható, hogy a BankAccountsModule injector példányosítja a BackendService-t, amely a BankAccountsComponent számára elérhető. Mivel ebben a modulban nincs saját backend konfiguráció, a gyökérmodul injector által biztosított konfigurációra esik vissza. A SharesModule azonban saját backend konfigurációval rendelkezik, amelyet a backendConfigurationToken segítségével biztosít, és ezt az új BackendService példány kapja a SharesComponent számára.

A következőkben bemutatom a megvalósítás legfontosabb részeit:

1. A Backend konfiguráció forma meghatározása
   A backend konfiguráció egy interface formájában kerül definiálásra, amely tartalmazza a szükséges paramétereket:

   typescript
   Copy code
   export interface BackendConfiguration {
     readonly baseUrl: string;
     readonly retryAttempts: number;
     readonly retryIntervalMs: number;
   }
   

2. A Backend szolgáltatás implementálása
   A BackendService az Angular HttpClient szolgáltatását használja, és a konfigurált alap URL-t hozzáfűzve, valamint egy újrapróbálkozási stratégiát alkalmazva küldi el a kéréseket:

   typescript
   Copy code
   @Injectable({
   
     providedIn: 'any',
   })
   export class BackendService {
     constructor(
       @Inject(backendConfigurationToken) private configuration: BackendConfiguration,
       private http: HttpClient
     ) {}
     get(url: string, options: BackendGetOptions = {}): Observable<any> {
       return this.http
         .get(`${this.configuration.baseUrl}/${url}`, { ...options, responseType: 'json' })
         .pipe(
           retryWithDelay(this.configuration.retryAttempts, this.configuration.retryIntervalMs)
         );
     }
   }
   

3. A "retryWithDelay" operátor
   A hibák újrapróbálásához egy olyan operátor kerül alkalmazásra, amely a megadott késleltetéssel próbálkozik újra a válasz megérkezése előtt:

   typescript
   Copy code
   export const retryWithDelay = (retries: number, delayMs: number) =>
     retryWhen((errors) =>
       concat(errors.pipe(delay(delayMs), take(retries)), throwError(`Failed after ${retries} retries.`))
     );
   

4. A gyökérmodul és konfigurációk beállítása
   Az AppModule gyökérmodulban a backend konfigurációt biztosítjuk, amely minden olyan késleltetve betöltött modul számára elérhető, amely nem biztosít saját konfigurációt:

   typescript
   Copy code
   const backendConfiguration: BackendConfiguration = {
   
     baseUrl: 'https://api01.example.com',
     retryAttempts: 4,
     retryIntervalMs: 250,
   };
   

5. A SharesModule egyedi beállításai
   A SharesModule különböző API URL-t használ, és más újrapróbálkozási intervallumot, illetve nagyobb számú újrapróbálkozási kísérletet alkalmaz, figyelembe véve, hogy a részvények adatai gyakrabban változnak:

   typescript
   Copy code
   const backendConfiguration: BackendConfiguration = {
     baseUrl: 'https://api02.example.com',
     retryAttempts: 7,
     retryIntervalMs: 100,
   };
   

Hogyan alkalmazhatjuk a CSS egyedi változókat a dinamikus témák létrehozásához Angular alkalmazásokban?

A CSS egyedi változók (más néven CSS Custom Properties) egy rendkívül hasznos eszközként jelentek meg a modern webfejlesztésben, különösen akkor, amikor dinamikus témákat és interaktív megjelenítést kell alkalmazni. Az Angular alkalmazásokban való használatuk különösen fontos lehet, mivel lehetővé teszik az alkalmazás stílusainak rugalmas kezelését anélkül, hogy bonyolult preprocesszorokat kellene alkalmazni, mint az SCSS. Az alábbiakban részletesen bemutatjuk, hogyan használhatók a CSS egyedi változók az Angular keretrendszerben, hogy dinamikus témákat és interaktív felhasználói élményt biztosítsunk.

A CSS egyedi változókat alapvetően úgy alkalmazzuk, hogy azokat közvetlenül a stíluslapokon vagy komponensekben definiáljuk. Az egyik előnye ennek az, hogy az értékeket futásidőben módosíthatjuk, anélkül hogy újra kellene fordítanunk vagy újra kellene generálnunk a CSS fájlokat. Az ilyen típusú dinamikus változók használata különösen hasznos lehet olyan alkalmazásokban, ahol a felhasználók interakcióba lépnek a megjelenéssel, például témaválasztók vagy egyéb testreszabási lehetőségek formájában.

A következő példában egy olyan alkalmazást veszünk alapul, mint az Angular Academy, ahol a felhasználók választhatják a fejléc háttérszínét egy egyszerű témaválasztó segítségével. A választott színt a rendszer tárolhatja helyben, például a localStorage-ban, és a változások az alkalmazás különböző részein érvényesülnek.

css
Copy code
.mycomponent {
   background: var(--headerbackground, white);
}

A következő lépésben a témaválasztó működését az Angular keretrendszeren belül implementálhatjuk. A komponensben a választott színt egy változóval köthetjük össze, amit a @HostBinding dekorátor segítségével bindelhetünk a komponens stílusához. Például:

typescript
Copy code
@HostBinding('style.--background')
background: string;
@HostBinding('style.--headerbackground')
headerBackground: string;
@HostBinding('style.--tilebackground')
tileBackground: string;

Ez a megoldás lehetővé teszi, hogy a felhasználó választásait dinamikusan alkalmazzuk az alkalmazás szintjén, közvetlenül a HTML-ben található stílusokban. Az Angular komponens logikáját a ThemeService segíthet kezelni, amely tárolja és visszaadja a témaválasztásokat, például a localStorage használatával. Ez egy egyszerű, de erőteljes megoldás a témák kezelésére, amelyet később bővíthetünk más tárolómechanizmusokkal is.

Egy ilyen megoldás nemcsak a színek módosítását teszi lehetővé, hanem a különböző elemek elhelyezését is befolyásolhatjuk a képernyőn. Ha például szeretnénk, hogy a videók szövegei kiemelkedjenek, miközben csökkentjük a videók helyigényét, ezt könnyen megoldhatjuk a CSS Grid segítségével. A Grid elrendezést dinamikusan módosíthatjuk a CSS egyedi változók segítségével, így a felhasználók számára testreszabott megjelenést biztosíthatunk.

A téma kezelésén túl, a CSS egyedi változók az alkalmazás különböző részein is alkalmazhatók, és más típusú interaktivitást is lehetővé tesznek. Ha a felhasználó például egyedi betűtípusokat vagy szövegméreteket választ, azokat szintén tárolhatjuk a helyi tárolóban, és dinamikusan alkalmazhatjuk a CSS-ben. Ez különösen hasznos lehet olyan alkalmazásokban, ahol a felhasználói élmény fontos, és a személyre szabott dizájn kiemelt szerepet kap.

Fontos megjegyezni, hogy a CSS egyedi változók nemcsak a színeket, hanem más vizuális elemeket is befolyásolhatnak. Az ilyen típusú testreszabások gyorsan integrálhatók az alkalmazásba, miközben megőrzik annak teljesítményét és skálázhatóságát. Az Angular és a CSS egyedi változók kombinációja lehetőséget ad arra, hogy interaktív és felhasználóbarát alkalmazásokat hozzunk létre, amelyek könnyen kezelhetők és széleskörű testreszabási lehetőségeket biztosítanak.

Hogyan használjuk az Angular szolgáltatásokat és biztosítóképességeket a hatékony komponensfejlesztésben?

A következő szakaszban részletesen bemutatjuk, hogyan alakítható ki és használható az Angular komponens tesztelésekor a VideoHarness, és miként alkalmazható a függőség-injektálás új biztosítóképességei, különös figyelmet fordítva az egyedi és új konfigurációs beállítások kezelésére.

Az alábbi tesztkód segítségével ellenőrizzük, hogy a VideoHarness komponens valóban rendelkezik a megfelelő videoId-val, amikor a videó renderelésre kerül:

javascript
Copy code
it('should have the videoId available when rendering the video', async() => {

  const renderedVideos = await loader.getAllHarnesses(VideoHarness);

  renderedVideos.forEach( async(video: VideoHarness) => {
    const videoId = await video.getVideoId();
    expect(videoId).toBeTruthy();
  })
})

A teszt során a VideoHarness komponens minden példányának elérjük az azonosítóját, hogy meggyőződhessünk róla, hogy minden videóelem valóban tartalmazza azt. A VideoHarness kódja a következőképpen alakul:

typescript
Copy code
export class VideoHarness extends ComponentHarness {

  static hostSelector = 'workspace-video';
  protected getTextElement = this.locatorFor('.text');

  protected getVideoElement = this.locatorFor(YoutubePlayerHarness);

  async getText(): Promise<string> {

    const textElement = await this.getTextElement();

    return textElement.text();
  }
  async getVideoId(): Promise<string> {

    const videoElement = await this.getVideoElement();

    return videoElement.getVideoId();
  }
  textEquals(video: IVideo, text: string): boolean {
    return text?.toLowerCase().trim().includes(video.title.trim().toLowerCase());
  }
}

Ezek után az Angular szolgáltatások kezelésére és az új biztosítóképességek használatára térünk át. Az Angular különböző biztosítóképességeket biztosít, amelyek lehetővé teszik, hogy egyes szolgáltatások specifikus példányait adjuk vissza a különböző alkalmazási szinteken. Az egyik ilyen új lehetőség az any biztosítóképesség, amely lehetővé teszi, hogy különböző konfigurációkat biztosítsunk minden egyes modul számára.

Az Angular alkalmazásokban a szolgáltatásokat gyakran a root biztosítóképességgel biztosítjuk, amely singletonként működik, és ugyanazt az egy példányt adja vissza minden egyes komponenshez. Azonban előfordulhat, hogy különböző példányokra van szükség különböző használati esetekhez. A any biztosítóképesség lehetőséget ad arra, hogy az alkalmazás különböző szintjein egyedi példányokat biztosítsunk a szolgáltatások számára.

Az alábbiakban bemutatunk egy példát, amelyben a ThemeService szolgáltatás használata történik az any biztosítóképességgel:

typescript
Copy code
@Injectable({
  providedIn: 'any',
})
export class ThemeService {
  constructor(@Inject(themeToken) private theme: ITheme) {}
  public setSetting(name: string, value: string): void {
    this.setItem(name, value);
  }

  public getSetting(name: string): string {

    switch (name) {
      case 'background':
        return this.getItem(name) ?? this.theme.background;
      case 'tileBackground':
        return this.getItem(name) ?? this.theme.tileBackground;
      case 'headerBackground':
        return this.getItem(name) ?? this.theme.headerBackground;
      case 'textSize':
        return this.getItem(name) ?? this.theme.textSize;
      case 'videoSize':
        return this.getItem(name) ?? this.theme.videoSize;
    }
    return 'white';
  }
  private setItem(name: string, value: string): void {
    localStorage.setItem(this.prefix(name), value);
  }

  private getItem(name: string): string | null {

    return localStorage.getItem(this.prefix(name));
  }

  private prefix(name: string): string {

    return this.theme.id + '_' + name;
  }
}

Az Angular új biztosítóképességei lehetővé teszik, hogy az alkalmazás hatékonyan és rugalmasan kezelje a szolgáltatásokat, és biztosítsa, hogy minden modul és komponens pontosan azt a konfigurációt kapja, amelyre szüksége van.