Java týden Java týden
Pouze tento týden sleva až 80 % na celý Java e-learning!
Brno? Vypsali jsme pro vás nové termíny školení OOP v Brně!

Lekce 2 - První aplikace v Angular frameworku

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Úvod do Angular frameworku, jsme si nainstalovali a představili Angular framework. V dnešním tutoriálu si ukážeme tvorbu první jednoduché aplikace, na níž si detailněji vysvětlíme základy tvorby aplikací v tomto frameworku.

Volba aplikace

Výběr vhodné aplikace, na které bychom si mohli demonstrovat vše potřebné, nebyl úplně snadný, ale nakonec se vítězem stala jednoduchá kalkulačka, jejíž screenshot vidíte níže. Takže když již víme v čem a co budeme dělat, tak hurá do práce! :)

Kalkulačka v Angular frameworku

Vytvoření projektu

Tvorbu nového projektu v Angularu jsme si již ukázali i vysvětlili v předchozí lekci. Pro dnešní aplikaci můžete buď použít strukturu z minula nebo jednoduše založit nový projekt pomocí příkazu:

ng new calculator

HTML struktura

src/index.html

Začneme tím, že se podíváme na zoubek souboru index.html a v něm základní HTML 5 struktuře:

<!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 není nic, co by vás mělo nějak překvapit, jelikož v tutoriálu se počítá s vaší základní znalostí HTML a CSS. Pokud náhodou tyto znalosti ještě nemáte, nejdříve je zkuste dohnat ve zdejších kurzech HTML & CSS :)

Modul aplikace

Angular aplikace může mít obecně více modulů pro různé její části. Nám zatím bude stačit jeden.

src/app/app.mo­dule.ts

Podíváme se teď na jeho definici ze základní struktury projektu, přičemž si zde doplníme jeden import modulu pro reaktivní formuláře v Angularu, který v budoucnu 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 { }

Jak vidíte, definice modulu je v podstatě pouze poskládání všech důležitých částí do fungujícího kompletu, v našem případě celé naší aplikace. Je zde vidět, jaké komponenty modul implementuje, jaké další moduly importuje, tj. potřebuje ke svému fungování, nebo odkud se má začít aplikace načítat.

Pokud je vám náhodou některá z uvedené syntaxe cizí, tak pravděpodobně nemáte dostatečné zkušenosti s jazykem TypeScript. Nejdříve se tedy zkuste podívat třeba opět na zdejší kurzy TypeScriptu :)

Služby

Nyní už začneme implementovat naši kalkulačku a to od jejích služeb v podání Angularu. V našem případě budeme mít jednu a ta se bude starat o samotné výpočty. Jako tradičně bychom mohli vytvořit nový soubor, kam službu definujeme, ale je tu i lepší možnost a to využít Angular CLI (příkazovou řádku Angular). Zde totiž stačí napsat následující příkaz a základ služby bude vytvořený:

ng generate service services/calculator

Umístění souboru závisí na definované cestě. Já jsem např. zvyklý soubory služeb oddělovat do složky services/, ale celkově je to jen na vás :)

src/app/servi­ces/calculator­.service.ts

Když teď máme základ pro naši službu, můžeme se pustit do programování. Řekněme, že naše kalkulačka bude mít 4 základní operace, tj. sčítání, odčítání, násobení a dělení. Tyto operace tedy umístíme do naší 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; }
}

Kromě definice služby ve frameworku by zde pro vás nemělo být nic překvapivého. Zkrátka se jedná o standardní třídu psanou v TypeScriptu a doplněnou o Angular direktivu, která z ní udělá službu.

Dále si bystřejší z vás určitě všimli, že není ošetřeno dělení nulou. To však technicky není chyba, protože pro TS toto neskončí chybou, ale vrací číselnou hodnotou "nekonečno" :)

Takže základní operace bychom měli, to však ještě není všechno. Jelikož by naše kalkulačka měla být do budoucna snadno rozšiřitelná o další operace, přidáme si ještě další jednoduchou funkcionalitu, která nám to zajistí.

src/app/servi­ces/operation­.ts

Začneme definicí číselníku (enum) pro jednotlivé operace:

/**
 * 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í'
}

src/app/servi­ces/calculator­.service.ts

A teď se ještě vrátíme k implementaci naší služby, kam doplníme následující metodu:

...
/**
 * 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.
}

Nezapomeňte přidat na začátek i příslušný import import { Operation } from './operation';

Nyní jsme schopni přidat další operaci do naší služby a přitom nemusíme změnit v podstatě nic dalšího.

Z této lekce je to tedy vše a příště, v lekci Dokončení kalkulačky v Angular frameworku, se podíváme na implementaci Angular komponent pro naši kalkulačku :)


 

 

Článek pro vás napsal Jindřich Máca
Avatar
Jak se ti líbí článek?
4 hlasů
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. :-)
Předchozí článek
Úvod do Angular frameworku
Všechny články v sekci
Základy Angular frameworku
Miniatura
Následující článek
Dokončení kalkulačky v Angular frameworku
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!