Lekce 3 - První aplikace v AngularJS
V předchozí lekci, AngularJS filtry&moduly, jsme si prozradili, jak filtrovat výstup v AngluarJS pomocí vestavěných filtrů a taky jsme si ukázali, jak takový filtr vytvořit a používat i mimo šablonu.
V tomto tutoriálu si ukážeme tvorbu první jednoduché aplikace, na níž si vysvětlíme základní strukturu projektu, MVC přístup frameworku a zabrousíme trochu i do zpětné kompatibility.
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!

Instalace
Jelikož se jedná o JavaScript (JS) projekt pouze na straně klienta, v principu stačí vytvořit HTML soubor a odkázat na příslušné JS knihovny. To můžeme udělat buď pomocí populárního CDN (Content Delivery Network) nebo je odkázat přímo na jejich lokálně staženou verzi. Samozřejmě s tímto vám pomohou dobrá IDE, ale já bych sem rád alespoň ve stručnosti popsal "ruční" postup.
HTML struktura
Začneme tedy tím, že vytvoříme nějakou složku pro náš nový projekt,
do ní soubor index.html
a v něm základní HTML 5 strukturu:
<!DOCTYPE html> <head> <!-- Úvodní meta informace pro prohlížeč. --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Popis a titulek aplikace. --> <meta name="description" content="Jednoduchá kalkulačka v AngularJS od ITnetwork.cz"> <title>Kalkulačka | ITnetwork.cz</title> <!-- AngularJS ikona. --> <link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="https://angularjs.org/favicon.ico" type="image/x-icon"> </head> <body> <div id="wrapper"></div> </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
Struktura adresářů
Dále si vytvoříme základní strukturu adresářů projektu. Existují nějaká základní pravidla pro tuto strukturu, ale samozřejmě každý vývojář si ji může přizpůsobit svým potřebám. Já jsem ji pro tento projekt zvolil s ohledem na architekturu MVC a vypadá následovně:
- app/ - JS zdrojové kódy celé aplikace.
- controllers/ - Zdrojové kódy kontrolerů - kontrolní vrstva aplikace (C).
- services/ - Zdrojové kódy služeb - model aplikace (M).
- calculator.module.js - Hlavní modul reprezentující celou aplikaci.
- assets/ - Další zdroje aplikace (např. CSS, externí JS i
knihovny)
- css/ - CSS kód aplikace.
- calculator.css - Globální CSS aplikace.
- lib/ - Složka pro externí knihovny.
- css/ - CSS knihovny.
- js/ - JS knihovny.
- css/ - CSS kód aplikace.
- index.html - Hlavní HTML soubor aplikace - šablona/pohled aplikace (V).
Zdroje a externí knihovny
V první řadě si vytvořte všechny soubory, které vám chybí v adresářové struktuře. Zatím je můžete nechat prázdné. Následně jsem se pro vývoj aplikace rozhodl používat moderní techniky, ale samozřejmě nechci zanevřít na starší prohlížeče a z toho důvodu použijeme hned několik externích knihoven týkajících se kompatibility. Ukázková aplikace pro AngularJS používá HTML5 Boilerplate, tak u ní zůstaneme. V složce lib/ tedy bude:
- lib/
- css/
- main.css - HTML5 Boilerplate (stažení)
- normalize.css - Normalize.css (stažení)
- js/
- css/
Kompatibilita
Dále doplníme načítání těchto knihoven a další kompatibilní prvky
do index.html
:
<!DOCTYPE html> <!-- Kompatibilita se staršími prohlížeči. --> <!--[if lt IE 7]> <html lang="cs" ng-app="calculator" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html lang="cs" ng-app="calculator" class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html lang="cs" ng-app="calculator" class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="cs" ng-app="calculator" class="no-js"> <!--<![endif]--> <head> <!-- Úvodní meta informace pro prohlížeč. --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Popis a titulek aplikace. --> <meta name="description" content="Jednoduchá kalkulačka v AngularJS od ITnetwork.cz"> <title>Kalkulačka | ITnetwork.cz</title> <!-- AngularJS ikona. --> <link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="https://angularjs.org/favicon.ico" type="image/x-icon"> <!-- CSS pro zajištění zpětné kompatibility. --> <link rel="stylesheet" href="assets/lib/css/normalize.css"> <link rel="stylesheet" href="assets/lib/css/main.css"> <!-- Globální styly aplikace. --> <link rel="stylesheet" href="assets/css/calculator.css"> <!-- JavaScript pro zajištění zpětné kompatibility. --> <script src="assets/lib/js/modernizr.min.js"></script> </head> <body> <!-- Upozornění na aktualizaci u starších prohlížečů. --> <!--[if lt IE 7]> <p class="browsehappy"> Používáte <strong>zastaralý</strong> prohlížeč. Prosím <a href="http://browsehappy.com/">aktualizujte svůj prohlížeč</a>, abyste mohli naplno využít poskytované služby. </p> <![endif]--> <div id="wrapper"></div> <!-- AngularJS CDN --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <!-- JS kód aplikace --> <script src="app/calculator.module.js"></script> </body> </html>
Jak vidíte, kompatibilita se týká hlavně prohlížeče Internet Explorer a jeho starších verzí.
Kromě stažených knihoven jsme také na konci přidali CDN od Googlu přímo na knihovnu AngularJS.
Modul aplikace
Obecně může mít AngularJS aplikace hned několik modulů pro různé její části. Nám zatím bude stačit jeden.
app/calculator.module.js
Nyní je tedy potřeba již v rámci JS inicializovat základní modul naší aplikace. To uděláme v souboru calculator.module.js:
'use strict'; // Deklarace modulu aplikace. var app = angular.module('calculator', []);
Všimněte si, že se budu snažit využívat JS strict mode, pokud to
prohlížeč bude podporovat. Pokud náhodou opět nemáte dostatečné
zkušenosti s jazykem JavaScript, nejdříve se zkuste podívat třeba do zdejší kurzy JavaScriptu
Styly
Ještě před koncem dnešní lekce si doplňme CSS k projektu, jehož účel se však naplní až v lekci příští.
assets/css/calculator.css
CSS zapíšeme do aplikačního souboru s globálními styly
calculator.css
:
/* AngularJS CSS pro maskování elementů před načtením stránky. */ [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } /* Globální CSS aplikace. */ label { display: block; clear: both; margin: 10px 0; } label > input { float: right; margin-left: 5px; } input[type="submit"] { display: block; margin: 0 auto; } #wrapper { display: flex; flex-direction: column; align-items: center; } #result { font-size: 1.5em; font-weight: bold; margin: 10px 0; }
Z této lekce je to tedy vše.
V další lekci, Dokončení kalkulačky v AngularJS, se budeme zabývat modelem, kontrolerem a šablonou.