Angular
Angular je framework, který velmi usnadňuje práci programátora. Je to JS knihovna, kterou jednoduchým způsobem přidáme do naší aplikace a pak s výhodou používáme její schopnosti.
Aplikace
Mám na mysli hybridní aplikaci pro chytrý telefon, tablet či podobné zařízení.
Zatímco nativní aplikace pro Android se programují v Javě, u hybridních si vystačíme pouze s trojkombinací HTML + CSS + JS. Pro použití v zařízení s Androidem se provede "překlad" do souboru s příponou apk.
Aplikace se obvykle skládá ze tří souborů (může jich být podstatně více), typicky jde o:
- index.html - HTML stránka
- style.css - definice kaskádových stylů
- app.js - JS kód aplikace
HTML spolu s CSS tvoří vizuální podobu aplikace (to co vidí uživatel) a JS má na starosti chování aplikace (reakce na vstup uživatele, ...).
Výchozím souborem je HTML stránka index.html, ve které jsou uvedeny odkazy na CSS soubor s definicí kaskádových stylů a JS knihovny. Typicky vypadá (zatím ještě prázdná) HTML část aplikace takto:
Na 3. až 8. řádku je hlavička <head>...</head>, na 9. až 11. řádku je tělo <body>...</body>. V hlavičce jsou uvedeny odkazy na CSS soubor ionic.min.css (ř. 6) a JS soubor ionic.bundle.js (ř. 7). V tomto případě se jedná o Ionic, který je založen na Angularu. Náš vlastní JS kód by byl v souboru app.js, na který by byl opět odkaz v hlavičce (podobně jako na ř. 7).
Pro využití funkcí Angularu je nezbytné použít na správném místě direktivu (atribut) ng-app. Může být uvedena v tagu <html> (ř. 2) nebo až v tagu <body> (ř. 9).
HTML + CSS
Mezi tagy <body> a </body> doplníme obsah naší aplikace v HTML kódu, tj. vizuální podobu; v případě potřeby upravíme vzhled použitím kaskádových stylů CSS.
Část HTML stránky mezi tagy <body>...</body> obsluhuje jeden nebo více controllerů. Je to JS funkce, kterou Angular propojí JS kód s HTML kódem. V controlleru typicky deklarujeme proměnné a funkce.
Controller má svůj název a alias. Obojí použijeme v HTML kódu. Potřebujeme-li zobrazit obsah proměnné, zapíšeme její název do dvojitých složených závorek {{}}, ale před název proměnné předřadíme alias controlleru:
JS
V JS části umístíme deklarace proměnných a funkcí do controlleru. Proměnné se uvedou s předřazením this. Controller má v JS části název (ale už ne alias).
Žádné komentáře:
Okomentovat