2. diel - Prvé aplikácie v Angular frameworku

V minulej lekcii, Úvod do Angular frameworku , sme si nainštalovali a predstavili Angular framework. V dnešnom tutoriále si ukážeme tvorbu prvé jednoduché aplikácie, na ktorej si detailnejšie vysvetlíme základy tvorby aplikácií v tomto frameworku.

Voľba aplikácie

Výber vhodnej aplikácie, na ktoré by sme si mohli demonštrovať všetko potrebné, nebol úplne jednoduchý, ale nakoniec sa víťazom stala jednoduchá kalkulačka, ktorej screenshot vidíte nižšie. Takže keď už vieme v čom a čo budeme robiť, tak hurá do práce!

Kalkulačka v Angular frameworku - Základy Angular frameworku

Vytvorenie projektu

Tvorbu nového projektu v ANGULAR sme si už ukázali aj vysvetlili v predchádzajúcej lekcii. Pre dnešný aplikáciu môžete buď použiť štruktúru z minula alebo jednoducho založiť nový projekt pomocou príkazu:

ng new calculator

Html štruktúra

Src / index.html

Začneme tým, že sa pozrieme na zúbok súboru index.html a v ňom základné HTML 5 štruktúre:

<!DOCTYPE html>
<html lang="cs">
  <head>
    <!-- Úvodní informace pro prohlížeč. -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/">

    <!-- Popis a titulek aplikace. -->
    <meta name="description" content="Jednoduchá kalkulačka v Angular frameworku od ITnetwork.cz">
    <title>Kalkulačka | ITnetwork.cz</title>

    <!-- Angular ikona. -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Toto nie je nič, čo by vás malo nejako prekvapiť, keďže v tutoriálu sa počíta s vašou základnou znalosťou HTML a CSS. Ak náhodou tieto znalosti ešte nemáte, najskôr ich skúste dohnať vo tunajších kurzoch HTML & CSS

Modul aplikácie

Angular aplikácia môže mať všeobecne viac modulov pre rôzne jej časti. Nám zatiaľ bude stačiť jeden.

Src / app / app.module.ts

Pozrieme sa teraz na jeho definíciu zo základnej štruktúry projektu, pričom si tu doplníme jeden import modulu pre reaktívne formuláre v ANGULAR, ktorý v budúcnosti využijeme:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { CalculatorComponent } from './calculator/calculator.component';

/**
 * Modul aplikace.
 * @export
 */
@NgModule({
  declarations: [
    AppComponent,
    CalculatorComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ako vidíte, definícia modulu je v podstate len poskladanie všetkých dôležitých častí do fungujúceho kompletu, v našom prípade celej našej aplikácie. Je tu vidieť, aké komponenty modul implementuje, aké ďalšie moduly importuje, tj. Potrebuje k svojmu fungovaniu, alebo odkiaľ sa má začať aplikácia načítať.

Ak je vám náhodou niektorá z uvedenej syntaxe cudzie, tak pravdepodobne nemáte dostatočné skúsenosti s jazykom TypeScript. Najskôr sa teda skúste pozrieť treba opäť na tunajšie kurzy TypeScriptu

Služby

Teraz už začneme implementovať našu kalkulačku a to od jej služieb v podaní Angular. V našom prípade budeme mať jednu a tá sa bude starať o samotnej výpočty. Ako tradične by sme mohli vytvoriť nový súbor, kam službu definujeme, ale je tu aj lepšia možnosť a to využiť Angular CLI (príkazový riadok Angular). Tu totiž stačí napísať nasledujúci príkaz a základ služby bude vytvorený:

ng generate service services/calculator

Umiestnenie súboru závisí od definovanej ceste. Ja som napr. Zvyknutý súbory služieb oddeľovať do zložky services/, ale celkovo je to len na vás

Src / app / services / calculator.service.ts

Keď teraz máme základ pre našu službu, môžeme sa pustiť do programovania. Povedzme, že naša kalkulačka bude mať 4 základné operácie, tj. Sčítanie, odčítanie, násobenie a delenie. Tieto operácie teda umiestnime do našej služby:

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

/**
 * Model operací kalkulačky.
 * @export
 */
@Injectable({ providedIn: 'root' })
export class CalculatorService {

  /**
   * Sečte daná čísla a vrátí výsledek.
   * @param x první číslo
   * @param y druhé číslo
   * @returns výsledek sčítání
   */
  add(x: number, y: number): number { return x + y; }

  /**
   * Odečte druhé číslo od prvního a vrátí výsledek.
   * @param x první číslo
   * @param y druhé číslo
   * @returns výsledek odčítání
   */
  subtract(x: number, y: number): number { return x - y; }

  /**
   * Vynásobí daná čísla a vrátí výsledek.
   * @param x první číslo
   * @param y druhé číslo
   * @returns výsledek násobení
   */
  multiply(x: number, y: number): number { return x * y; }

  /**
   * Vydělí první číslo druhým bezezbytku a vrátí výsledek.
   * @param x první číslo
   * @param y druhé číslo
   * @returns výsledek dělení
   */
  divide(x: number, y: number): number { return x / y; }
}

Okrem pojmu služby vo frameworku by tu pre vás nemalo byť nič prekvapujúce. Skrátka sa jedná o štandardnú triedu písanú v TypeScriptu a doplnenú o Angular direktívu, ktorá z nej urobí službu.

Ďalej si bystrejší z vás určite všimli, že nie je ošetrené delenie nulou. To však technicky nie je chyba, pretože pre TS toto neskončí chybou, ale vracia číselnou hodnotou "nekonečno"

Takže základné operácie by sme mali, to však ešte nie je všetko. Keďže by naša kalkulačka mala byť do budúcnosti ľahko rozšíriteľná o ďalšie operácie, pridáme si ešte ďalšie jednoduchú funkcionalitu, ktorá nám to zabezpečí.

Src / app / services / operation.ts

Začneme definíciou číselníku (enum) pre jednotlivé operácie:

/**
 * Definice číselníku pro operace kalkulačky.
 * @export
 */
export enum Operation {
    ADD = 'Sčítání',
    SUBTRACT = 'Odčítání',
    MULTIPLY = 'Násobení',
    DIVIDE = 'Dělení'
}

Tu si súbor aj definíciu vytvoríme sami.

Src / app / services / calculator.service.ts

A teraz sa ešte vrátime k implementácii našej služby, kam doplníme nasledujúce metódu:

...
/**
 * Zavolá zadanou operaci a vrátí její výsledek.
 * @param operation zadaná operace
 * @param x první číslo pro operaci
 * @param y druhé číslo pro operaci
 * @returns výsledek operace
 */
calculate(operation: Operation, x: number, y: number): number {
  switch (operation) {
    case Operation.ADD: return this.add(x, y);
    case Operation.SUBTRACT: return this.subtract(x, y);
    case Operation.MULTIPLY: return this.multiply(x, y);
    case Operation.DIVIDE: return this.divide(x, y);
  }
  return null; // Sem by se nikdy nemělo dojít.
}

Nezabudnite pridať na začiatok aj príslušný import import { Operation } from './operation';

Teraz sme schopní pridať ďalšiu operáciu do našej služby a pritom nemusíme zmeniť v podstate nič ďalšie.

Z tejto lekcie je to teda všetko a nabudúce, v lekcii Dokončenie kalkulačky v Angular frameworku , sa pozrieme na implementáciu Angular komponentov pre našu kalkulačku

Článok pre vás napísal Jindřich Máca

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

Autor se věnuje převážně webovým technologiím, ale má velkou zálibu ve všem vědeckém, nejen ze světa IT. :-)

Aktivity

2. diel - Prvé aplikácie v Angular frameworku

Voľba aplikácie

Vytvorenie projektu

Html štruktúra

Src / index.html

Modul aplikácie

Src / app / app.module.ts

Služby

Src / app / services / calculator.ser­vice.ts

Src / app / services / operation.ts

Src / app / services / calculator.ser­vice.ts

Src / app / services / calculator.service.ts

Src / app / services / calculator.service.ts