3. diel - Prvé aplikácie v AngularJS

Vitajte pri sérii tutoriálov o tvorbe webových aplikácií v JavaScript frameworku AngularJS. V tomto tutoriále si ukážeme tvorbu prvé jednoduché aplikácie, na ktorej si vysvetlíme základnú štruktúru projektu, MVC prístup frameworku a zabrúsime trochu aj do spätnej kompatibility.

Voľba aplikácie

Výber vhodnej aplikácie, na ktoré by sme si mohli demonštrovať všetko potrebné, nebol úplne jednoduchý, ale nakoniec sa víťazom stala jednoduchá kalkulačka, ktorej screenshot vidíte nižšie. Takže keď už vieme v čom a čo budeme robiť, tak hurá do práce!

Inštalácia

Keďže sa jedná o JavaScript (JS) projekt len na strane klienta, v princípe stačí vytvoriť HTML súbor a odkázať na príslušné JS knižnice. To môžeme urobiť buď pomocou populárneho CDN (Content Delivery Network) alebo je odkázať priamo na ich lokálne stiahnutú verziu. Samozrejme s týmto vám pomôžu dobrá IDE, ale ja by som sem rád aspoň v stručnosti popísal "ručné" postup.

Html štruktúra

Začneme teda tým, že vytvoríme nejakú zložku pre náš nový projekt, do nej súbor index.html a v ňom základné HTML 5 štruktúru:

<!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 nie je nič, čo by vás malo nejako prekvapiť, keďže v tutoriálu sa počíta s vašou základnou znalosťou HTML a CSS. Ak náhodou tieto znalosti ešte nemáte, najskôr ich skúste dohnať vo tunajších kurzoch HTML & CSS

Štruktúra adresárov

Ďalej si vytvoríme základnú štruktúru adresárov projektu. Existujú nejaké základné pravidlá pre túto štruktúru, ale samozrejme každý vývojár si ju môže prispôsobiť svojim potrebám. Ja som ju pre tento projekt zvolil s ohľadom na architektúru MVC a vyzerá nasledovne:

app / - JS zdrojové kódy celej aplikácie. controllers / - Zdrojové kódy kontrolerov - kontrolná vrstva aplikácie (C).
services / - Zdrojové kódy služieb - model aplikácie (M).

calculator.module.js - Hlavný modul reprezentujúci celú aplikáciu.
controllers / - Zdrojové kódy kontrolerov - kontrolná vrstva aplikácie (C).
services / - Zdrojové kódy služieb - model aplikácie (M).
calculator.module.js - Hlavný modul reprezentujúci celú aplikáciu.
assets / - Ďalšie zdroje aplikácie (napr. CSS, externé JS i knižnice) css / - CSS kód aplikácie. calculator.css - Globálna CSS aplikácie.
lib / - Zložka pre externé knižnice. css / - CSS knižnice.

js / - JS knižnice.

css / - CSS kód aplikácie. calculator.css - Globálna CSS aplikácie.
calculator.css - Globálna CSS aplikácie.
lib / - Zložka pre externé knižnice. css / - CSS knižnice.
js / - JS knižnice.
css / - CSS knižnice.
js / - JS knižnice.
index.html - Hlavné HTML súbor aplikácie - šablóna / pohľad aplikácie (V).

Zdroje a externé knižnice

V prvom rade si vytvorte všetky súbory, ktoré vám chýba v adresárovej štruktúre. Zatiaľ je môžete nechať prázdne. Následne som sa pre vývoj aplikácie rozhodol používať moderné techniky, ale samozrejme nechcem zanevrieť na staršie prehliadače az toho dôvodu použijeme hneď niekoľko externých knižníc týkajúcich sa kompatibility. Ukážková aplikácia pre AngularJS používa HTML5 Boilerplate, tak u nej zostaneme. V priečinku lib / teda bude:

lib / css / main.css - HTML5 Boilerplate ( stiahnutie)
normalize.css - Normalize.css ( stiahnutie)

js / modernizr.min.js - Modernizr ( stiahnutie)
css / main.css - HTML5 Boilerplate ( stiahnutie)
normalize.css - Normalize.css ( stiahnutie)
main.css - HTML5 Boilerplate ( stiahnutie)
normalize.css - Normalize.css ( stiahnutie)
js / modernizr.min.js - Modernizr ( stiahnutie)
modernizr.min.js - Modernizr ( stiahnutie)

Kompatibilita

Ďalej doplníme načítanie týchto knižníc a ďalšie 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>

Ako vidíte, kompatibilita sa týka hlavne prehliadača Internet Explorer a jeho starších verzií.

Okrem stiahnutých knižníc sme tiež na konci pridali CDN od Googlu priamo na knižnicu AngularJS.

Modul aplikácie

Vo všeobecnosti môže mať AngularJS aplikácie hneď niekoľko modulov pre rôzne jej časti. Nám zatiaľ bude stačiť jeden.

App / calculator.module.js

Teraz je teda potrebné už v rámci JS inicializovať základný modul našej aplikácie. To urobíme v súbore calculator.module.js:

'use strict';

// Deklarace modulu aplikace.
var app = angular.module('calculator', []);

Všimnite si, že sa budem snažiť využívať JS strict mode, ak to prehliadač bude podporovať. Ak náhodou opäť nemáte dostatočné skúsenosti s jazykom JavaScript, najskôr sa skúste pozrieť napríklad do tunajšej kurzy JavaScriptu

Štýly

Ešte pred koncom dnešnej lekcie si doplňme CSS k projektu, ktorého účel sa však naplní až v lekcii budúci.

Assets / css / calculator.css

CSS zapíšeme do aplikačného súboru s globálnymi štýly 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 tejto lekcie je to teda všetko a nabudúce, v lekcii Dokončenie kalkulačky v AngularJS , sa pozrieme na sľubovanú implementáciu samotnej kalkulačky

Článok pre vás napísal Jindřich Máca

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

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