DEV Community

Juraj Chovan
Juraj Chovan

Posted on

Vytvorenie kostry aplikácie v Ionic framework (ver.5)

V nasledujúcom postupe je ukázané ako si vytvoriť kostru (resp.úplne najzákladnejšiu) aplikáciu vo framework-u Ionic (vo verzii 5).

Pre vývoj aplikácie v Ionic framework-u je potrebné mať nainštalovaný runtime modul (asynchronný JavaScript event driven) "Node.js", a package-ovací manažér "npm".
Zistiť, či toto už mám zinštalované na svojom stroji, možno príkazom:

node -v
Enter fullscreen mode Exit fullscreen mode

Image description
a podobne pre "npm":

npm -v
Enter fullscreen mode Exit fullscreen mode

Image description

Samozrejme, musí byť zinštalovaný aj samotný Ionic. Overiť, či ho mám, cez príkaz:

ionic -v
Enter fullscreen mode Exit fullscreen mode

Image description

V Ionic je možné vytvoriť tri typy kostry aplikácie:

  1. úplne najjednoduchšia, prázdna - blank
  2. s bočným menu - sidemenu
  3. s (spodnými) tab-mi - tabs

Pre tento prípad vytvorím najjednoduchšiu verziu, prázdnu aplikáciu. Príkazom:

ionic start Test000 blank --type=angular
Enter fullscreen mode Exit fullscreen mode

vytvorím takúto kostru Ionic aplikácie s podporou Angular framework-u.

Image description

Image description

V prípade ak by som chcel vytvoriť kostru Ionic aplikácie s bočným menu, použiť príkaz:

ionic start Test000 sidemenu --type=angular
Enter fullscreen mode Exit fullscreen mode

resp.v prípade aplikácie so (spodnými) tab-mi:

ionic start Test000 tabs --type=angular
Enter fullscreen mode Exit fullscreen mode

Týmto je Ionic aplikácia (základná kostra) vytvorená. Je potrebné sa teraz prepnúť do vytvoreného adresára aplikácie (kde príkaz vytvorenia Ionic aplikácie vytvoril potrebnú štruktúru adresárov a súborov):

Image description

V adresári Ionic aplikácie spustiť príkaz na štart developovacieho servra:

ionic serve
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

V prehliadači si teraz spustiť URL:

http://localhost:8100/
Enter fullscreen mode Exit fullscreen mode

a zobrazí sa táto Ionic aplikácia:

Image description

Top comments (0)