Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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! :)

Kalkulačka v AngularJS - AngularJS

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.mo­dule.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.
  • 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:

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.mo­dule.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/cal­culator.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.


 

Předchozí článek
AngularJS filtry&moduly
Všechny články v sekci
AngularJS
Přeskočit článek
(nedoporučujeme)
Dokončení kalkulačky v AngularJS
Článek pro vás napsal Jindřich Máca
Avatar
Uživatelské hodnocení:
2 hlasů
Autor se věnuje převážně webovým technologiím, ale má velkou zálibu ve všem vědeckém, nejen ze světa IT. :-)
Aktivity