3. diel - Dokončenie kalkulačky v Angular frameworku

V minulej lekcii, Prvé aplikácie v Angular frameworku , sme začali tvorbu jednoduchej kalkulačky vo frameworku Angular. V dnešnom tutoriále na ňu nadviažeme a dokončíme ju. Minule sme teda skončili pri služieb a dnes na ne nadviažeme Angular komponentmi, takže bez ďalšieho otáľania ideme na to!

Komponenty

V rámci zachovania nejakej štruktúry si rozdelíme prácu s komponentmi na definície ich tried, ich šablóny a samozrejme štýly v podobe CSS.

Definícia

Začneme teda implementácií tried komponentov v TypeScriptu.

Src / app / app.component.ts

Zo všetkého najskôr sa opäť pozrieme na zúbok hlavnej komponente celej našej aplikácie, kde je okrem iného definovaný hlavnej nadpis našej stránky:

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

/**
 * Hlavní komponenta celé aplikace.
 * @export
 */
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Kalkulačka v Angular frameworku';
}

Tu už bolo všetko potrebné povedané v predchádzajúcich lekciách.

Pokračovať budeme implementáciou komponenty pre našu kalkulačku v rámci Angular. Opäť môžeme využiť Angular CLI a nechať si základ komponenty vygenerovať jediným príkazom:

ng generate component calculator

Src / app / calculator / calculator.com­ponent.ts

Ako ste si mohli všimnúť napr. V predošlej lekcii na obrázku, základom našej aplikácie je webový formulár pre kalkulačku. A práve táto komponenta bude mať na starosti tvorbu a obsluhu tohto formulára spolu s využitím služby pre výpočty, ktorú sme minule definovali. Poďme teda vytvoriť definíciu nášho formulára do našej komponenty:

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

import { CalculatorService } from '../services/calculator.service';
import { Operation } from '../services/operation';

/**
 * Komponenta kalkulačky.
 * @export
 */
@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent {

  /** Výsledek operace nebo null. */
  result: number | null = null;

  /** Formulář kalkulačky s jeho sestavením. */
  calculatorForm = this.formBuilder.group({
    x: [0, Validators.required],
    y: [0, Validators.required],
    operation: ['', Validators.required]
  });

  /**
   * Konstruktor s injektovanou službou pro sestavování formulářů a pro práci s operacemi kalkulačky.
   * @param formBuilder automaticky injektovaná služba pro sestavování formulářů
   * @param calculatorService automaticky injektovaná služba pro práci s operacemi kalkulačky
   */
  constructor(private formBuilder: FormBuilder, private calculatorService: CalculatorService) { }

  /** Getter pro existující operace kalkulačky. */
  get operations() { return Operation; }

  /** Funkce vykonaná při úspěšném odeslání formuláře kalkulačky, která zpracuje odeslané hodnoty. */
  onSubmit(): void {
    const values = this.calculatorForm.value; // Získání odeslaných hodnot z formuláře.
    const operation: keyof typeof Operation = values.operation; // Převod operace na hodnotu číselníku.
    // Necháme si vypočítat výsledek podle zvolené operace a zadaných hodnot.
    this.result = this.calculatorService.calculate(Operation[operation], values.x, values.y);
  }
}

Tu by som sa už na chvíľu zastavil. Najskôr si všimnite konstruktoru triedy, kde sa aplikuje princíp Dependency Injection (DI), ktorá nám umožňuje odovzdávať služby naprieč našou aplikáciou. Tá v Angular funguje naozaj skvele, keď v komponente potrebujeme používať nejakú službu, jednoducho si ju necháme frameworkom odovzdať. Stačí ju definovať ako parameter v rámci konstruktoru a je hotovo.

Ďalej sa tu definujú atribúty, ktoré budú zároveň fungovať v šablóne komponenty. To isté platí aj u metód, ktoré potom môžeme volať ako akcie zo šablón. Ak teda opäť jednoducho definujeme verejný atribút triedy, bude dostupný ako premenná aj v šablóne a zároveň spolu budú previazané - pri zmene jedného dôjde k zmene aj u druhého. Ostatne to za chvíľu uvidíte sami

Takže teda ako atribúty tu definujú výsledok operácie result, ktorý budeme zobrazovať a ďalej potom samotný formulár calculatorForm. Ten je tu zostavovaný pomocou špeciálne služby, ktorá súvisí s modulom pre reaktívne formuláre z minulej lekcie. Pomocou nej sú definované jednotlivé polia formulára aj so svojimi overovacími pravidlami. Ďalej je tu ešte getter operations(), ktorý vracia zoznam všetkých dostupných operácií. Spracovanie formulára potom rieši samostatná metóda onSubmit(), ktorú budeme volať pri jeho odoslaní a je detailne zdokumentovaná už v kóde

V Angular všeobecne existujú hneď dva nezávislé spôsoby, ako pracovať s webovými formulármi - reaktívne a šablónovacích. K tomu sa ešte dajú u oboch riešiť rôzne veci trochu inými spôsobmi, takže celkovo by sa tento formulár dal napísať viac ako dvoma úplne validnými alternatívami Ďalej v kurze si ich ukážeme.

Šablóny

Pokračovať budeme doplnením implementácia šablón pre naše komponenty, čo je vlastne mix hlavne HTML a Angular kódu.

Src / app / app.component.html

Začneme opäť šablónou pre hlavné komponent našej aplikácie, ktorú upravíme nasledovne:

<div style="text-align: center;">
  <h1>{{ title }}</h1>
  <app-calculator></app-calculator>
</div>

Vidíte, že tu iba pozmeníme titulok a miesto obsahu vložíme našu komponent kalkulačky. Nič viac tu nie je potrebné.

Src / app / calculator / calculator.com­ponent.html

Ďalej budeme pokračovať so šablónou našej komponenty pre kalkulačku:

<form [formGroup]="calculatorForm" (ngSubmit)="onSubmit()">
  <label for="x">
    První číslo: <input id="x" type="number" required formControlName="x">
  </label>
  <label for="y">
    Druhé číslo: <input id="y" type="number" required formControlName="y">
  </label>
  <label for="operation">
    Operace:
    <select id="operation" required formControlName="operation">
      <option value="">--Vyberte operaci--</option>
      <option *ngFor="let operation of operations | keyvalue" [value]="operation.key">{{ operation.value }}</option>
    </select>
  </label>
  <input type="submit" [disabled]="!calculatorForm.valid" value="Spočítej">
</form>
<div id="result" [hidden]="result == null">Výsledek je: {{ result }}</div>

Poďme si tento kód zas trochu rozobrať. Jeho základ tvorí HTML formulár, to by malo byť jasné. Ten je previazaný na formulár definovaný v našej komponente pomocou direktívy formGroup, vďaka ktorej potom máme prístup k jeho poliam. Tie sú potom zviazané s ich HTML definíciou pomocou formControlName.

Následne je tu vidieť tiež mapovanie odoslaní formulára (ngSubmit) na metódu našej komponenty onSubmit().

Ďalšou vecou je generovanie možností pre HTML <select> pomocou *ngFor, ktoré ich vytvára priamo z odovzdaných hodnôt komponenty.

Za zmienku tiež stojí dynamická validácie formulára na tlačidle pre jeho odoslanie, ktorá ho zneprístupní v prípade, že je formulár nevalidný.

Na konci je potom vidieť zobrazenie výsledku pomocou štandardného frameworkového zápisu {{ ... }}. Výsledok bude vidieť, len ak je result iný ako null. Ten sa vďaka ANGULAR dynamicky mení v závislosti na aktuálnom výpočtu.

Štýly

Týmto je práca na šablónach hotová, ale my si ešte na záver doplňme CSS k našim komponentom, aby aspoň trochu vyzerali.

Src / app / calculator / calculator.com­ponent.css

Tu bude stačiť štýl k našej komponente kalkulačky, pretože u hlavné komponenty nie je v podstate čo štylizovať:

:host {
    display: flex;
    flex-direction: column;
    align-items: center;
}

label {
    display: block;
    clear: both;
    margin: 10px 0;
}

label > input {
    float: right;
    margin-left: 5px;
}

input[type="submit"] {
    display: block;
    margin: 0 auto;
}

#result {
    font-size: 1.5em;
    font-weight: bold;
    margin: 10px 0;
}

O CSS v ANGULAR je tu treba povedať dve veci. Po prvé, všetky štýly sú izolované v rámci jednotlivých komponentov. Tzn. že tunajšie štýl pre label nijako neovplyvní tento element vo vnútri iných komponentov.

A druhá vec, ak chceme naopak ovplyvňovať aspoň čiastočne okolité CSS, musíme použiť špeciálne angularovské notácie ako napr. Uvedený :host. Ten zariadi, aby naše komponenta ako taká tj. <app-calculator>, mala nejaký predvolený štýl.

A tým je naša práca na celom projekte dokončená. Ak sa teraz pozriete na príslušnú URL, mali by ste vidieť funkčné kalkulačku a môžete na nej vyskúšať všetky chytáky, ktoré vás napadnú

Ak vám nie je čokoľvek jasné, stiahnite si projekt z prílohy a prejdite si ho. Kódu v aplikácii toľko nemáme, po chvíli by ste sa v princípe mali zorientovať.

V prílohe nie sú nainštalované moduly, kvôli ich veľkosť. Je teda potrebné pred spustením aplikácie použiť príkaz npm install.

To je pre túto lekciu naozaj všetko. Nabudúce začneme úplne novú poriadnu aplikáciu v Angular. A čo to bude, to sa nechajte prekvapiť!

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.