PHP, Praha? Mám pro Tebe tu práci cos chtěl a 15.000,- kč bonus. Napiš mi na [email protected] nebo klikni sem. Lucka

3. díl - První aplikace v AngularJS

JavaScript Angular První aplikace v AngularJS

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Vítejte u série tutoriálů o tvorbě webových aplikací v JavaScript frameworku AngularJS. 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

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 a příště, v lekci Dokončení kalkulačky v AngularJS, se podíváme na slibovanou implementaci samotné kalkulačky :)


 

 

Článek pro vás napsal Jindřich Máca
Avatar
Jak se ti líbí článek?
1 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. :-)
Miniatura
Předchozí článek
AngularJS filtry&moduly
Miniatura
Všechny články v sekci
Angular
Miniatura
Následující článek
Dokončení kalkulačky v AngularJS
Aktivity (3)

 

 

Komentáře

Avatar
Jakub Rychlý:5. února 16:40

Super článek :) jen u toho poslední máš chybu hned na prvním řádku, chybí ti tam lomítko u komentáře ;)

Odpovědět  +1 5. února 16:40
Čím víc toho vím, tím víc zjišťuju, že vlastně nic nevím.
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Jakub Rychlý
Jindřich Máca:5. února 18:14

Jsem rád, že se líbí, chybku už jsem opravil. ;)

Editováno 5. února 18:14
 
Odpovědět  +1 5. února 18:14
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.