1. diel - Úvod do Angular frameworku

Vitajte u prvej lekcie kurzu o tvorbe webových aplikácií vo frameworku Angular. V dnešnom tutoriále si ho poriadne predstavíme a nainštalujeme. Nakoniec si skúsime aj vytvoriť našu prvú ukážkovú aplikáciu v Angular.

Úvod do Angular

Angular je frontendový framework pre tvorbu webových aplikácií. Stavia na komponentovej architektúre so službami a používa jazyk TypeScript (TS) namiesto čistého JavaScriptu.

Angular vs. AngularJS

Možno ste si všimli, že tu na sieti už existuje seriál o AngularJS. Tieto dva spolu úzko súvisia, AngularJS je predchodca frameworku Angular. Pôvodne sa Angular framework dokonca označoval ako Angular 2, aby sa neplietol so starším AngularJS. Avšak dnes už sa nachádza v rádovo vyšších verziách a nazýva sa skrátka len Angular. Dôležité je potom povedať, že tieto dva frameworky sú navzájom nekompatibilné, hlavne preto, že stavia na iných princípoch a dokonca na odlišnom jazyku. Ak nemáte dôvod udržiavať nejaký starý projekt, určite začnite rovno tu s Angular.

Architektúra

Angular je úplne postavený na tzv. Komponentoch. Základom každej komponenty je programová trieda (class) a tým pádom stavia na základoch objektovo orientovaného programovania (ďalej len OOP). K tejto triede potom Angular nadviaže vlastné HTML šablónu a dokonca aj CSS pomocou tzv. Direktív. Týmto spôsobom môžeme potom rozdeliť webovú stránku na samostatné celky a poskladať ju práve pomocou princípov OOP. Napr. menu bude komponenta, komentáre na stránke budú komponenta a vlastne aj celá stránka bude komponenta skladajúci sa s čiastkových celkov. A rovnako ako v objektovom programovaní majú tieto komponenty vlastné izolovanú funkcionalitu a snaží sa byť ideálne znovu použiteľné.

To teda máme vykresľovanie a funkcionalitu na stránke. Čo nám ale ešte chýba, je samotná logika aplikácie. Pre tú sa v Angular používajú tzv. Služby. Tie slúžia napr. Pre komunikáciu a distribúciu dát medzi klientskou aplikáciou v ANGULAR a serverovým API. Jednotlivé komponenty potom môžu využívať tieto služby pre svoju potrebu a získajú je pomocou tzv. Dependency Injection (DI), ktorú tento framework tiež obsahuje.

Na záver je dobré povedať, že komponenty i služby sa potom ďalej dajú logicky rozdeliť do tzv. Modulov. Najlepšie bude si to celé ukázať ešte na obrázku, ktorý som si požičal s oficiálnou dokumentácie:

Požiadavky

Angular je pokročilá technológia, ktorá si vyžaduje znalosti hneď niekoľkých jazykov a nástrojov. Ku všetkým máme tu na sieti kurzy, ak niektorý nepoznáte, absolvujte prosím najskôr príslušný kurz.

Znalosti

Keďže budeme tvoriť webovú aplikáciu, mali by ste mať predstavu o tom, ako takéto aplikácie fungujú a poznať veci ako HTML a CSS. Ďalej ste určite už postrehli, že ako programovací jazyk budeme používať TypeScript. A tým je myslené so všetkým, takže bez znalosti tohto jazyka najprv pokračujte jeho kurzom. Na druhú stranu, ak už poznáte JavaScript, prechod na TS pre vás môže byť pomerne rýchly.

Nástroje

Pre tvorbu Angular aplikácií sa používajú nástroje späté s Node.js, čo znamená, že je potrebné ho mať nainštalované.

Ďalej si nainštalujeme Angular CLI, čo je rozhranie pre príkazový riadok, ktoré nám umožní vytvoriť aj ďalej spravovať naše aplikácie v Angular. Toto rozhranie sa inštaluje pomocou balíčkovacieho systému NPM, ktorý je súčasťou Node.js a v jeho kurzu je tiež vysvetlený. K inštalácii použijeme nasledujúci príkaz:

npm install -g @angular/cli

Ďalej by som odporučil používať nejaké rozumné IDE napr. Webstore alebo textový editor s pokročilými funkciami ako je Visual Studio Code. To vám všeobecne pri programovaní veľmi uľahčí prácu.

Teraz by sme mali mať k dispozícii všetko, čo potrebuje pre tvorbu našej prvej aplikácie. Tak hurá na to!

Prvé aplikácie v Angular

Poďme teraz skúsiť vytvoriť jednoduchú webovú aplikáciu v Angular. A čo je vhodnejšie ako osvedčené "Hello World"?

Vytvorenie Angular projektu

Začneme tým, že si pomocou CLI vygeneruje kostru našej aplikácie. K tomu stačí spustiť jediný príkaz v priečinku, kam chcete umiestniť projekt as parametrom názvu projektu:

ng new hello-world

Inštalátor sa môže pýtať na rôzne nastavenia aplikácie. Pre naše účely stačí všetko potvrdiť pomocou klávesu Enter.

To je všetko. Teraz si jednoducho otvoríte projekt vo vami vybranom IDE alebo textovom editore a môžeme sa pustiť do programovania.

Štruktúra projektu

Než sa pustíme do samotného kódu, nebolo by zlé trochu si popísať štruktúru projektu, s ktorou budeme pracovať:

• e2e/ - Tu sú umiestnené automatické testy našej aplikácie. To nás v tejto chvíli nemusí zaujímať.
• node_modules/ - Nainštalované moduly našej aplikácie, ktoré si ukladá NPM.
• src/ - Zdrojové kódy našej aplikácie. Tu budeme programovať! app/ - Hlavné modul našej aplikácie obsahujúce nateraz jedinou komponent AppComponent. S tou budeme za chvíľu pracovať.

  assets/ - Komponent umiestňovanie ďalších zdrojov, napr. obrázkov a pod.

  environments/ - Nastavenie prostredia pre vývoj. Momentálne máme dve - produkčné a vývojové. S tými si opäť zatiaľ vystačíme.

  index.html - Hlavný vstupný súbor do webovej aplikácie. Obsahuje hlavne kostru nášho HTML.

  main.ts - Hlavný súbor TS časti našej aplikácie, ktorý zavádza aj Angular.

  style.css - Globálna CSS štýly aplikácie, ktoré nijak nepatria k jednotlivým komponentom. Zatiaľ je prázdny.

  ... - Ďalšie konfiguračné súbory konkrétnejšie pre našu aplikáciu. Momentálne nás nijako nezaujímajú.

• app/ - Hlavné modul našej aplikácie obsahujúce nateraz jedinou komponent AppComponent. S tou budeme za chvíľu pracovať.
• assets/ - Komponent umiestňovanie ďalších zdrojov, napr. obrázkov a pod.
• environments/ - Nastavenie prostredia pre vývoj. Momentálne máme dve - produkčné a vývojové. S tými si opäť zatiaľ vystačíme.
• index.html - Hlavný vstupný súbor do webovej aplikácie. Obsahuje hlavne kostru nášho HTML.
• main.ts - Hlavný súbor TS časti našej aplikácie, ktorý zavádza aj Angular.
• style.css - Globálna CSS štýly aplikácie, ktoré nijak nepatria k jednotlivým komponentom. Zatiaľ je prázdny.
• ... - Ďalšie konfiguračné súbory konkrétnejšie pre našu aplikáciu. Momentálne nás nijako nezaujímajú.
• ... - Konfiguračné súbory projektu pre TypeScript, Angular i NPM. Zatiaľ si bohato vystačíme s predvolenými nastaveniami projektu.

Editácia projektu

Poďme sa teraz pustiť do drobných úprav a hlavne sa pozrime na zdrojový kód.

Src / index.html

Začneme s hlavnou HTML kostrou našej aplikácie:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello World</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>

Ako vidíte, všetko to zodpovedá klasickej HTML aplikáciu až do chvíle, než narazíme na <app-root>. To je práve to miesto, kam vkladáme našu hlavnú Angular komponent is jej špecifickú šablónou. Čiže sem sa vykreslí to, čo definuje ona komponenta.

Src / app / app.component.ts

A rovno sa pozrieme na definíciu onej 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áklade je naozaj klasická TS trieda. Tá je ďalej obohatená o prvky Angular komponenty pomocou direktívy @Component. Tu je definovaný jej názov app-root, ktorý už dobre poznáme, a ďalej tiež jej HTML šablóna a CSS.

Vnútri triedy je potom definovaný atribút title s názvom našej aplikácie. Ten si môžete skúsiť ľubovoľne zmeniť

Src / app / app.component.html

Na záver sa ešte pozrieme na HTML šablónu samotnej komponenty:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="...">
</div>

...

Opäť tu nie je nič moc prekvapivého, len je tu vidieť použitie spomínaného atribútu title. Jeho hodnota sa dosadí na ono miesto vďaka obojsmernému previazanie triedy komponenty a jej šablóny, čo za nás opäť zariadi Angular.

CSS súborom sa tu venovať už nebudeme, pretože sú všetky v podstate prázdne.

Spustení aplikácie

Nakoniec nám nezostáva nič iné ako aplikáciu spustiť a pozrieť sa na výsledok. To urobíme opäť pomocou príkazu:

ng serve --open

Ten nám aplikáciu preloží (z TS do JS), spustí štandardne na adrese http://localhost:4200/ a vďaka parametra --open rovno aj otvorí v predvolenom prehliadači. Výsledok by mal potom vyzerať nejako takto:

Príkaz ng serve zostane bežať aj po spustení aplikácie a bude strážiť zmeny v jej súboroch. Ak sa niečo zmení, automaticky aplikáciu znova načíta. Nám potom stačí iba obnovovať stránku v prehliadači a instantne vidíme výsledky našich zmien v kóde.

To je z dnešného úvodného tutoriálu všetko. Nabudúce, v lekcii Prvé aplikácie v Angular frameworku , sa začneme s tvorbu vlastnej webové aplikácie v Angular frameworku. Prezradím, že pôjde o jednoduchú kalkulačku