Lekce 5 - Jednoduchý redakční systém v AngularJS - Struktura projektu

V minulé lekci, Dokončení kalkulačky v AngularJS, jsme se zabývali modelem, kontrolerem a šablonou.

Dnes začneme nový projekt, kterým bude jednoduchý redakční systém s editorem článků. Na této webové aplikaci si můžeme vyzkoušet další věci, které nám AngularJS nabízí. Jedná se např. o komunikaci s API nebo práci s webovými formuláři. Dnešní lekce bude věnována struktuře našeho projektu a jeho základnímu nastavení.

Struktura projektu

Reálné komerční projekty obsahují velké množství kódu rozdělené do mnoha komponent a určitě bychom si v nich nevystačili pouze s rozdělením struktury projektu podle MVC. Mít v jedné složce desítky souborů je minimálně nepřehledné. Kód by se špatně spravoval a z vlastní zkušenosti mohu říci, že byste se dostali do bodu, kdy byste psali podobné metody znovu a znovu místo toho, abyste parametrizovali nějakou existující, protože byste zkrátka ani nevěděli, že v projektu nějaká podobná již je. A to je začátek konce Jak z toho ven?

Moduly

Celý kód rozdělíme ještě do logických skupin podle funkčnosti, tzv. modulů. Modulů je ve webové aplikaci v AngularJS obvykle poměrně vysoký počet a můžeme je chápat jako samostatné části, ze kterých se aplikace skládá. Další úhel pohledu je chápat moduly jako knihovny, které budeme využívat. Zkrátka všechna distribuovaná funkčnost bývá zabalena do nějakého modulu.

Navíc, pokud si jednou napíšeme nějaký modul, můžeme jej později dodat i do ostatních projektů, které na něm poté mohou stavět a to aniž bychom něco složitě upravovali. V každém projektu budou zároveň jen ty moduly, které jsou zapotřebí, aby nebyl příliš složitý nebo abychom zákazníkovi prostě nedávali veškeré naše know-how

V tomto projektu si na ukázku vytvoříme pouze jeden modul, který nazveme 'cms' (Content Management System, systém správy obsahu) a naši funkcionalitu umístíme do něj, ale zároveň budeme i využívat spousty dalších externích modulů, abychom si co nejvíce usnadnili práci.

• cms - Hlavní jádro, které dokáže spravovat články a později i uživatele.

Mimochodem, všimněte si, že jsem modul pojmenoval anglicky. Celý náš web budeme programovat v angličtině, čeština je v programování pouze pro začátečníky a v reálných aplikacích by se objevovat neměla. Důvodem je zejména fakt, že se angličtině v kódu nevyhneme (už jen samotný JavaScript je anglicky a budeme používat i další třídy třetích stran) a míchat 2 jazyky do sebe je nepřehledné. Ovšem pro čtenáře samozřejmě udělám výjimku a alespoň komentáře v kódu budu psát česky.

Nástroje

Pro spuštění našeho projektu budeme potřebovat pouze klasický webový prohlížeč, nejlépe nějaký novější s podporou JS standardů jako např. LocalStorage a postavíme ho na stejné struktuře jako předchozí kalkulačku. Dále je vhodné využít nějaké IDE, nejlépe s nápovědou přímo pro AngularJS, i když samozřejmě celý projekt lze napsat v poznámkovém bloku. Nechci dělat nikomu reklamu, ale já osobně používám WebStorm, ve kterém se AngularJS projekty píší velice dobře. Nyní tedy předpokládám, že máme nástroje nachystané a my se teď podíváme na základ projektu a jeho nastavení.

Příprava projektu

Nyní si tedy nachystáme projektovou strukturu základem velice podobnou té z projektu kalkulačky.

Struktura adresářů

Vytvoříme základní adresářovou strukturu. Opět jsem si ji zvolil s ohledem na architekturu MVC, ale obecně může vypadat i jinak.

• 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).
  • templates/ - Zdrojové kódy šablon/pohledů - view vrstva aplikace (V).
  • cms.module.js - Hlavní modul reprezentující celou aplikaci.
• assets/ - Další zdroje aplikace (např. CSS, externí JS i knihovny).
  • css/ - CSS kód aplikace.
    • cms.css - Globální CSS aplikace.
  • lib/ - Složka pro externí knihovny.
    • css/ - CSS knihovny.
      • main.css - HTML5 Boilerplate (stažení)
      • normalize.css - Normalize.css (stažení)
    • js/ - JS knihovny.
      • modernizr.min.js - Modernizr (stažení)
• index.html - Hlavní HTML soubor aplikace.

Připomínám, že opět budeme používat nějaké ty externí knihovny kvůli kompatibilitě.

index.html

Začneme znovu od přípravy kořenového souboru celé aplikace a jeho základ bude vypadat následovně:

<!DOCTYPE html>
<!-- Kompatibilita se staršími prohlížeči. -->
<!--[if lt IE 7]> <html lang="cs" ng-app="cms" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="cs" ng-app="cms" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="cs" ng-app="cms" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="cs" ng-app="cms" 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ý redakční systém v AngularJS">
        <title>Jednoduchý redakční systém v AngularJS</title>

        <!-- AngularJS ikona. -->
        <link rel="icon" href="//angularjs.org/favicon.ico" type="image/x-icon">
        <link rel="shortcut icon" href="//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/cms.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>,
            aby jste mohli naplno využít poskytované služby.
        </p>
        <![endif]-->

        <!-- HTML + AngularJS kód aplikace. -->

        <!-- AngularJS CDN -->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-mocks.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.js"></script>

        <!-- Hlavní modul aplikace. -->
        <script src="app/cms.module.js"></script>
    </body>
</html>

Jak vidíte, od kalkulačky se toho moc nezměnilo. Pouze přibyly další moduly pro AngularJS. Framework samotný totiž využívá své modularity a kromě jádra je rozdělen na spousty dalších knihoven právě v podobě samostatných modulů. Rovnou jsem sem tedy opět pomocí CDN od Googlu nalinkoval moduly, které budeme později využívat

assets/css/cal­culator.css

Než se vrhneme na definici modulu, ještě si předpřipravíme globální CSS, které opět využijeme až v průběhu tutoriálu, ale už na něj nebudeme muset myslet.

/* 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. */
body {
    font-family: verdana, serif;
    font-size: 14px;
    width: 900px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    color: #444444;
    text-shadow: 3px 3px 3px #aaaaaa;
}

footer {
    font-size: 11px;
    text-align: center;
    padding-top: 20px;
}

article {
    text-shadow: 3px 3px 3px #aaaaaa;
}

/* Navigační menu. */
nav ul {
    list-style-type: none;
}

nav li {
    float: left;
    margin-right: 15px;
}

nav a {
    background: #6FA4F8;
    color: white;
    padding: 5px 10px;
    border-radius: 10px;
    text-decoration: none;
    border: none;
}

nav a:hover {
    background: #2976f8;
    color: #EEEEEE;
    text-decoration: none;
}

/* Formuláře. */
.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
}

.form-group p {
    color: #F44336;
    font-style: italic;
    text-shadow: none;
}

input[type="text"], input[type="url"], input[type="email"], input[type="password"] {
    width: 250px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    padding: 0.3em;
}

textarea {
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    width: 483px;
    height: 90px;
}

button[type="submit"] {
    display: block;
    color: white;
    background: #6FA4F8;
    font-weight: bold;
    border: 0;
    border-radius: 10px;
    padding: 10px 25px;
    margin: 20px auto 0;
    }

button[type="submit"]:hover {
    background: #2976f8;
    color: #EEEEEE;
    cursor: pointer;
}

button[type="submit"]:disabled {
    background: #ccc;
    color: #444444;
    cursor: not-allowed;
}

app/cms.module.js

Na závěr dnešní lekce si definujeme náš CMS modul již s propojením na výše uvedené AngularJS moduly.

'use strict';

// Deklarace modulu aplikace.
var app = angular.module('cms', ['ngRoute', 'ngResource', 'ngMockE2E', 'ngSanitize', 'ngMessages']);

Tady vidíte, že skládání modulů je opravdu velice jednoduché.

Tímto tedy dnešní lekce AngularJS končí

V další lekci, Jednoduchý redakční systém v AngularJS - API článků, se vrhneme na programování. A nezačneme ničím menším než definicí API a služeb pro jeho obsluhu v rámci cms modulu.