Lekce 2 - První aplikace v Angular frameworku
V minulé lekci, Úvod do Angular frameworku, jsme si nainstalovali a představili Angular framework.
V dnešním Angular 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! 
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
Pojďme si prvně ukázat HTML strukturu aplikace v Angular.
src/index.html
Začneme tím, že se podíváme na zoubek souboru index.html a
v něm základní HTML5 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.module.ts
Podíváme se teď na jeho definici ze základní struktury projektu,
přičemž si zde doplníme import modulu ReactiveFormsModule
(resp. vyměníme ho za AppRoutingModule, který v souboru
nalezneme) pro reaktivní formuláře v Angularu, který v budoucnu využijeme.
Tento modul importujeme na začátku souboru pomocí import a dále
pod @NgModule v poli za imports:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; /** * Modul aplikace. * @export */ @NgModule({ declarations: [ AppComponent ], 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 službu, která 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/services/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/services/operation.ts
Vytvoříme nový soubor operation.ts ve složce
services/. Zde 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/services/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 | null { 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.
Příště, v lekci Dokončení kalkulačky v Angular frameworku, se podíváme na implementaci Angular komponent
pro naši kalkulačku
