Jak používat rozsahy poskytovatelů v Angularu pro konfiguraci témat

V Angularu, jakmile se rozhodnete implementovat dynamickou změnu témat v aplikaci, může být užitečné nastavit různé rozsahy poskytovatelů pro různé části aplikace. Tento přístup umožňuje flexibilní a efektivní správu vzhledu a chování aplikace bez nutnosti jejího přetěžování statickými konfiguracemi. Rozsah poskytovatelů je mechanizmus, který určuje, jak jsou poskytovatelé závislostí (services, konfigurace, atd.) vázány na určité části aplikace. V tomto článku se zaměříme na konfiguraci služeb pro téma a ukážeme, jak přistupovat k různým nastavením pro různé moduly pomocí poskytovatelů v rámci aplikace Angular.

V základní aplikaci Angular se často používají globální nastavení, která se definují na úrovni hlavního modulu. V našem případě se podíváme na příklad, jak implementovat téma, které je možné dynamicky měnit na různých úrovních aplikace.

typescript
Copy code
@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [
    { provide: themeToken, useValue: theme },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Pokud ale chceme mít jiná témata pro různé části aplikace, například pro specifické moduly, můžeme použít „lazy loading“ a předefinovat téma přímo v těchto modulech. Takto si můžeme přizpůsobit vzhled pro každou část aplikace. Příklad pro modul přihlášení by mohl vypadat takto:

typescript
Copy code
@NgModule({

  declarations: [LoginComponent],
  imports: [
    CommonModule,
    MaterialModule,
    FormsModule,
    ReactiveFormsModule,
    LoginRoutingModule,
  ],
  providers: [
    { provide: themeToken, useValue: metallicTheme },
  ],
})
export class LoginModule {}

V tomto příkladu jsme definovali vlastní téma pro LoginModule, které bude použito pouze pro tento modul. Tímto způsobem můžeme dynamicky měnit téma pro jednotlivé části aplikace, což poskytuje uživatelsky přívětivý a flexibilní zážitek.

Dynamická změna témat ve službách

Pokud máme více modulů s různými tématy, můžeme téma měnit dynamicky přímo v komponentách, které ho potřebují. Například v komponentě pro přihlášení můžeme použít mechanizmus @HostBinding pro přiřazení hodnoty pozadí z konfigurace tématu do CSS proměnné:

typescript
Copy code
@Component({
  selector: 'workspace-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent {

  @HostBinding('style.--background') background: string;

  loginForm: FormGroup;
  constructor(
    public fb: FormBuilder,
    public authService: AuthService,
    private themeService: ThemeService
  ) {
    this.background = themeService.getSetting('background');

    this.loginForm = this.fb.group({

      name: [''],
      password: [''],
    });
  }
  loginUser(): void {
    this.authService.login(this.loginForm.value);
  }
}

V tomto příkladu získáváme hodnotu pro pozadí přímo ze služby ThemeService, která vrací aktuální nastavení podle zvoleného tématu. Tato hodnota je následně přiřazena do proměnné CSS a tím se dynamicky mění vzhled komponenty.

Sdílení informací mezi aplikacemi

Jedním z dalších užitečných způsobů použití poskytovatelů v Angularu je sdílení dat mezi různými aplikacemi nebo moduly. Pokud například chceme, aby informace o uživatelském přihlášení byly přístupné i mimo samotnou aplikaci, můžeme použít rozsah poskytovatelů na platformě. To nám umožní sdílet informace mezi komponentami a aplikacemi, které běží nezávisle na sobě.

typescript
Copy code
this.authService.loginEvent.subscribe((token: string) => {
  const courseId: string | null = this.preferenceService.getCourseId();
  if (courseId) {
    router.navigate(['/course', courseId]);
  } else {
    router.navigate(['/schools']);
  }
});

Tento mechanismus poskytuje silný nástroj pro interakci mezi různými komponentami a umožňuje bezproblémovou navigaci v aplikaci.

Je důležité si uvědomit, že i když rozsahy poskytovatelů umožňují flexibilní a dynamické nastavení aplikace, mohou také přinést složitost v případě špatně navržené struktury. Každý modul, který používá své vlastní téma nebo konfiguraci, by měl být důkladně navržen tak, aby byl konzistentní a snadno spravovatelný, což usnadní údržbu a rozšiřování aplikace v budoucnosti.

Jak modernizovat kód s využitím nových funkcí TypeScriptu a Angularu?

V posledních verzích TypeScriptu a Angularu byly představeny nové, velmi silné jazykové funkce, které výrazně zjednodušují a zefektivňují vývoj aplikací. Mezi ně patří volitelné řetězení (?.), operátor pro slučování s hodnotou nullish (??) a nativní privátní členy tříd (#). Tyto funkce se stávají nezbytnou součástí moderního vývoje v Angularu a TypeScriptu, a porozumění jejich využití je klíčové pro pochopení efektivních příkladů, které se objevují v této knize.

Volitelné řetězení (?.)

Představme si situaci, kdy máme komplexní strukturu objektu, která může obsahovat několik úrovní vnořených objektů. Pokud potřebujeme přistoupit k určité vlastnosti, která může, ale nemusí existovat, bez volitelného řetězení bychom museli každý přístup podmínit ověřením, zda daná vlastnost není null nebo undefined. Tímto způsobem by náš kód vypadal například takto:

typescript
Copy code
const ublVersion = (invoice.Invoice[0].UBLVersionID && invoice.Invoice[0].UBLVersionID[0] && invoice.Invoice[0].UBLVersionID[0].IdentifierContent) || '2.1';

S využitím volitelného řetězení můžeme výrazně zjednodušit tento zápis:

typescript
Copy code
const ublVersion = invoice.Invoice[0].UBLVersionID?.[0]?.IdentifierContent || '2.1';

Tento zápis je přehlednější a méně náchylný k chybám. Volitelné řetězení nejen že zkracuje kód, ale také zvyšuje jeho čitelnost a snižuje riziko chyb při změně struktury dat.

Volitelné řetězení lze použít nejen pro přístup k vlastnostem objektů, ale také k volání metod a přístupu k prvkům polí. Pokud například máme volitelný zpětný volací mechanismus v API, můžeme volání metody zjednodušit pomocí tohoto operátoru:

typescript
Copy code
onError?.(error);

Tímto způsobem zajistíme, že metoda bude zavolána pouze v případě, že je definována, což nám ušetří zbytečné podmínky.

Operátor pro slučování s hodnotou nullish (??)

Dalším velmi užitečným operátorem, který byl představen v TypeScriptu, je operátor ??, který slouží k návratu hodnoty, pokud první operand je null nebo undefined. Tento operátor je užitečný v případech, kdy chceme zpracovat hodnoty, které mohou být buď platné, nebo mohou být "nepřítomné" (nullish).

Představte si, že máme proměnnou, která může mít hodnotu null nebo undefined, a chceme jí přiřadit náhradní hodnotu, pokud je tato proměnná nepřítomná:

typescript
Copy code
const value = userInput ?? 'default';

V tomto případě value dostane hodnotu userInput, pokud není null nebo undefined. Pokud je ale userInput neexistující (tedy null nebo undefined), pak bude value nastaveno na 'default'.

Nativní privátní členy tříd (#)

Další významnou novinkou ve TypeScriptu a Angularu jsou nativní privátní členy tříd, které byly představeny jako součást návrhu ECMAScript. Pomocí symbolu # můžeme definovat privátní vlastnosti a metody přímo v těle třídy, což zjednodušuje práci s kapsulací a ochranou dat v třídách. Tato funkce je přínosná, protože zabraňuje náhodnému přístupu k interním datům třídy zvenčí a posiluje principy objektově orientovaného programování.

typescript
Copy code
class MyClass {

  #privateMember: string;
  constructor(value: string) {
    this.#privateMember = value;
  }
  getPrivateMember() {
    return this.#privateMember;
  }
}

V tomto příkladu je vlastnost #privateMember skrytá před vnějším přístupem, a to i v rámci dědičných tříd. K přístupu k ní je potřeba využít veřejné metody, což zajišťuje lepší kontrolu nad stavem objektu.

Optimalizace testování s novými API a silnějšími typy

Angular Ivy přinesl vylepšení nejen v samotné funkcionalitě aplikací, ale také v testování. Zlepšená podpora pro silné typy v testování a nové API pro integraci komponent poskytují vývojářům lepší nástroje pro tvorbu spolehlivých a přesných testů. Testování komponent se stalo efektivnějším díky novému přístupu, který umožňuje snadnější manipulaci s mocky a simulacemi.

Závěrem