Lekce 1 - Úvod do Angular frameworku

Vítejte u první lekce kurzu o tvorbě webových aplikací ve frameworku Angular. V dnešním tutoriálu si ho pořádně představíme a nainstalujeme. Nakonec si zkusíme i vytvořit naši první ukázkovou aplikaci v Angular.

Úvod do Angular

Angular je frontendový framework pro tvorbu webových aplikací. Staví na komponentové architektuře se službami a používá jazyk TypeScript (TS) namísto čistého JavaScriptu.

Angular vs. AngularJS

Možná jste jsi všimli, že zde na síti již existuje seriál o AngularJS. Tyto dva spolu úzce souvisí, AngularJS je předchůdce frameworku Angular. Původně se Angular framework dokonce označoval jako Angular 2, aby se nepletl se starším AngularJS. Ovšem dnes už se nachází v řádově vyšších verzích a nazývá se zkrátka jen Angular. Důležité je pak říct, že tyto dva frameworky jsou navzájem nekompatibilní, hlavně proto, že staví na jiných principech a dokonce na odlišném jazyku. Pokud nemáte důvod udržovat nějaký starý projekt, určitě začněte rovnou zde s Angular.

Architektura

Angular je zcela postaven na tzv. komponentách. Základem každé komponenty je programová třída (class) a tím pádem staví na základech objektově orientovaného programování (dále jen OOP). K této třídě pak Angular naváže vlastní HTML šablonu a dokonce i CSS pomocí tzv. direktiv. Tímto způsobem můžeme pak rozdělit webovou stránku na samostatné celky a poskládat ji právě pomocí principů OOP. Např. menu bude komponenta, komentáře na stránce budou komponenta a vlastně i celá stránka bude komponenta skládající se s dílčích celků. A stejně jako v objektovém programování mají tyto komponenty vlastní izolovanou funkcionalitu a snaží se být ideálně znovupoužitelné.

To tedy máme vykreslování a funkcionalitu na stránce. Co nám ale ještě chybí, je samotná logika aplikace. Pro tu se v Angularu používají tzv. služby. Ty slouží např. pro komunikaci a distribuci dat mezi klientskou aplikací v Angularu a serverovým API. Jednotlivé komponenty pak mohou využívat tyto služby pro svoji potřebu a získají je pomocí tzv. Dependency Injection (DI), kterou tento framework také obsahuje.

Na závěr je dobré říct, že komponenty i služby se pak dále dají logicky rozdělit do tzv. modulů. Nejlepší bude si to celé ukázat ještě na obrázku, který jsem si vypůjčil s oficiální dokumentace:

Požadavky

Angular je pokročilá technologie, vyžadující znalost hned několika jazyků a nástrojů. Ke všem máme zde na síti kurzy, pokud některý neznáte, absolvujte prosím nejdříve příslušný kurz.

Znalosti

Jelikož budeme tvořit webovou aplikaci, měli by jste mít představu o tom, jak takové aplikace fungují a znát věci jako HTML a CSS. Dále jste určitě již postřehli, že jako programovací jazyk budeme používat TypeScript. A tím je myšleno se vším všudy, takže bez znalosti tohoto jazyka nejprve pokračujte jeho kurzem. Na druhou stranu, pokud již znáte JavaScript, přechod na TS pro vás může být poměrně rychlý.

Nástroje

Pro tvorbu Angular aplikací se používají nástroje spjaté s Node.js, což znamená, že je potřeba ho mít nainstalované.

Dále si nainstalujeme Angular CLI, což je rozhraní pro příkazovou řádku, které nám umožní vytvořit i dále spravovat naše aplikace v Angularu. Toto rozhraní se instaluje pomocí balíčkovacího systému npm, který je součástí Node.js a v jeho kurzu je také vysvětlený. K instalaci použijeme následující příkaz:

npm install -g @angular/cli

Dále bych doporučil používat nějaké rozumné IDE např. WebStorm nebo textový editor s pokročilými funkcemi jako je Visual Studio Code. To vám obecně při programování velice usnadní práci.

Nyní bychom měli mít k dispozici vše, co potřebuje pro tvorbu naší první aplikace. Tak hurá na to!

První aplikace v Angular

Pojďme nyní zkusit vytvořit jednoduchou webovou aplikaci v Angularu. A co je vhodnější než osvědčené "Hello World"?

Vytvoření Angular projektu

Začneme tím, že si pomocí CLI vygeneruje kostru naší aplikace. K tomu stačí spustit jediný příkaz ve složce, kam chcete umístit projekt a s parametrem názvu projektu:

ng new hello-world

Instalátor se může ptát na různá nastavení aplikace. Pro naše účely stačí vše potvrdit pomocí klávesy Enter.

To je vše. Nyní si jednoduše otevřete projekt ve vámi vybraném IDE nebo textovém editoru a můžeme se pustit do programování.

Struktura projektu

Než se pustíme do samotného kódu, nebylo by špatné trochu si popsat strukturu projektu, se kterou budeme pracovat:

• e2e/ - Zde jsou umístěné automatické testy naší aplikace. To nás v tuto chvíli nemusí zajímat.
• node_modules/ - Nainstalované moduly naší aplikace, které si ukládá npm.
• src/ - Zdrojové kódy naší aplikace. Zde budeme programovat!
  • app/ - Hlavní modul naší aplikace obsahující prozatím jedinou komponentu AppComponent. S tou budeme za chvíli pracovat.
  • assets/ - Složka pro umisťování dalších zdrojů, např. obrázků apod.
  • environments/ - Nastavení prostředí pro vývoj. Momentálně máme dvě - produkční a vývojové. S těmi si opět zatím vystačíme.
  • index.html - Hlavní vstupní soubor do webové aplikace. Obsahuje hlavně kostru našeho HTML.
  • main.ts - Hlavní soubor TS části naší aplikace, který zavádí i Angular.
  • style.css - Globální CSS styly aplikace, které nijak nespadají k jednotlivým komponentám. Zatím je prázdný.
  • ... - Další konfigurační soubory konkrétnější pro naši aplikaci. Momentálně nás nijak nezajímají.
• ... - Konfigurační soubory projektu pro TypeScript, Angular i npm. Prozatím si bohatě vystačíme s výchozím nastavením projektu.

Editace projektu

Pojďme se teď pustit do drobných úprav a hlavně se podívejme na zdrojový kód.

src/index.html

Začneme s hlavní HTML kostrou naší aplikace:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HelloWorld</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Jak vidíte, všechno to odpovídá klasické HTML aplikaci až do chvíle, než narazíme na <app-root>. To je právě to místo, kam vkládáme naši hlavní Angular komponentu i s její specifickou šablonou. Neboli sem se vykreslí to, co definuje ona komponenta.

src/app/app.component.ts

A rovnou se podíváme na definici oné komponenty:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'hello-world';
}

Vidíte, že v základu je opravdu klasická TS třída. Ta je dále obohacena o prvky Angular komponenty pomocí direktivy @Component. Zde je definován její název app-root, který už dobře známe, a dále také její HTML šablona a CSS.

Uvnitř třídy je pak definován atribut title s názvem naší aplikace. Ten si můžete zkusit libovolně změnit

src/app/app.component.html

Na závěr se ještě podíváme na HTML šablonu samotné komponenty:

<span>{{ title }} app is running!</span>
...

Opět zde není nic moc překvapivého, pouze je zde vidět použití zmiňovaného atributu title. Jeho hodnota se dosadí na ono místo díky obousměrnému provázání třídy komponenty a její šablony, což za nás opět zařídí Angular.

CSS souborům se tady věnovat již nebudeme, jelikož jsou všechny v podstatě prázdné.

Spuštění aplikace

Nakonec nám nezbývá nic jiného než aplikaci spustit a podívat se na výsledek. V terminálu vstoupíme do složky našeho projektu (hello-world/) a zadáme příkaz:

ng serve --open

Ten nám aplikaci přeloží (z TS do JS), spustí standardně na adrese http://localhost:4200/ a díky parametru --open rovnou i otevře ve výchozím prohlížeči. Výsledek by měl poté vypadat nějak takto:

Příkaz ng serve zůstane běžet i po spuštění aplikace a bude hlídat změny v jejích souborech. Pokud se něco změní, automaticky aplikaci znovu načte. Nám pak stačí pouze obnovovat stránku v prohlížeči a instantně vidíme výsledky našich změn v kódu.

To je z dnešního úvodního tutoriálu vše.

Příště, v lekci První aplikace v Angular frameworku, začneme s tvorbou vlastní webové aplikace v Angular frameworku. Prozradím, že půjde o jednoduchou kalkulačku