5. diel - Jednoduchý redakčný systém v AngularJS - Štruktúra projektu

Vítam všetky stredne pokročilých a pokročilých programátorov u pokračovanie on-line kurzu tutoriálov o tvorbe webových aplikácií v javascriptové frameworku AngularJS. V minulej lekcii, Dokončenie kalkulačky v AngularJS , ktorá bola venovaná skôr začiatočníkom, sme dokončili prvú jednoduchú aplikáciu - kalkulačku. Dnes by som sa tak chcel posunúť ďalej. Začneme nový projekt, ktorým bude jednoduchý redakčný systém s editorom článkov. To je už zaujímavejšie webová aplikácia, na ktoré si môžeme vyskúšať ďalšie veci, ktoré nám AngularJS ponúka. Jedná sa napr. O komunikáciu s API alebo prácu s webovými formulármi. Dnešná lekcia bude venovaná štruktúre nášho projektu a jeho základnému nastaveniu.

Štruktúra projektu

Reálne komerčné projekty obsahujú veľké množstvo kódu rozdelené do mnohých komponentov a určite by sme si v nich nevystačili len s rozdelením štruktúry projektu podľa MVC. Mať v jednej zložke desiatky súborov je minimálne neprehľadné. Kód by sa zle spravoval az vlastnej skúsenosti môžem povedať, že by ste sa dostali do bodu, kedy by ste písali podobné metódy znovu a znovu namiesto toho, aby ste parametrizovali nejakú existujúcu, pretože by ste skrátka ani nevedeli, že v projekte nejaká podobná už je. A to je začiatok konca Ako z toho von?

Moduly

Celý kód rozdelíme ešte do logických skupín podľa funkčnosti, tzv. Modulov. Modulov je vo webovej aplikácii v AngularJS zvyčajne pomerne vysoký počet a môžeme ich chápať ako samostatné časti, z ktorých sa aplikácia skladá. Ďalšie uhol pohľadu je chápať moduly ako knižnice, ktoré budeme využívať. Skrátka všetky distribuovaná funkčnosť býva zabalená do nejakého modulu.

Navyše, ak si raz napíšeme nejaký modul, môžeme ho neskôr dodať aj do ostatných projektov, ktoré na ňom potom môžu stavať a to bez toho aby sme niečo zložito upravovali. V každom projekte budú zároveň len tie moduly, ktoré sú potrebné, aby nebol príliš zložitý alebo aby sme zákazníkovi jednoducho nedávali všetko naše know-how

V tomto projekte si na ukážku vytvoríme iba jeden modul, ktorý nazveme 'cms' (C ontent M anagement S YSTÉM, systém správy obsahu) a našu funkcionalitu umiestnime do neho, ale zároveň budeme aj využívať hŕbu ďalších externých modulov, aby sme si čo najviac uľahčili prácu.

• cms - Hlavné jadro, ktoré dokáže spravovať články a neskôr i užívateľov.

Mimochodom, všimnite si, že som modul pomenoval anglicky. Celý náš web budeme programovať v angličtine, Čeština je v programovaní len pre začiatočníkov a v reálnych aplikáciách by sa objavovať nemala. Dôvodom je najmä fakt, že sa angličtine v kóde nevyhneme (už len samotný JavaScript je anglicky a budeme používať aj ďalšie triedy tretích strán) a miešať 2 jazyky do seba je neprehľadné. Ovšem pre čitateľa samozrejme urobím výnimku a aspoň komentáre v kóde budem písať po slovensky.

Nástroje

Pre spustenie nášho projektu budeme potrebovať iba klasický webový prehliadač, najlepšie nejaký novší s podporou JS štandardov ako napr. LocalStorage a postavíme ho na rovnakej štruktúre ako "javascript/angular/js/dokonceni-kalkulacku-v-angularjs > predchádzajúcej kalkulačku. Ďalej je vhodné využiť nejaké IDE, najlepšie s nápovedou priamo pre AngularJS , aj keď samozrejme celý projekt možno napísať v poznámkovom bloku. Nechcem robiť nikomu reklamu, ale ja osobne používam webstore, v ktorom sa AngularJS projekty píšu veľmi dobre. teraz teda predpokladám, že máme nástroje nachystané a my sa teraz pozrieme na základ projektu a jeho nastavenia.

Príprava projektu

Teraz si teda nachystáme projektovú štruktúru základom veľmi podobnú tej z projektu kalkulačky.

Štruktúra adresárov

Vytvoríme základnú adresárovú štruktúru. Opäť som si ju zvolil s ohľadom na architektúru MVC, ale všeobecne môže vyzerať aj inak.

• 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).

  templates/ - Zdrojové kódy šablón / pohľadov - view vrstva aplikácie (V).

  cms.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).
• templates/ - Zdrojové kódy šablón / pohľadov - view vrstva aplikácie (V).
• cms.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. cms.css - Globálna CSS aplikácie.

  lib/ - Zložka pre externé knižnice. css/ - CSS knižnice. main.css - HTML5 Boilerplate ( stiahnutie)

  normalize.css - Normalize.css ( stiahnutie)

  js / - JS knižnice. modernizr.min.js - Modernizr ( stiahnutie)

• css/ - CSS kód aplikácie. cms.css - Globálna CSS aplikácie.
• cms.css - Globálna CSS aplikácie.
• lib/ - Zložka pre externé knižnice. css/ - CSS knižnice. main.css - HTML5 Boilerplate ( stiahnutie)

  normalize.css - Normalize.css ( stiahnutie)

  js / - JS knižnice. modernizr.min.js - Modernizr ( stiahnutie)

• css/ - CSS knižnice. main.css - HTML5 Boilerplate ( stiahnutie)

  normalize.css - Normalize.css ( stiahnutie)

• main.css - HTML5 Boilerplate ( stiahnutie)
• normalize.css - Normalize.css ( stiahnutie)
• js / - JS knižnice. modernizr.min.js - Modernizr ( stiahnutie)
• modernizr.min.js - Modernizr ( stiahnutie)
• index.html - Hlavné HTML súbor aplikácie.

Pripomínam, že opäť budeme používať nejaké tie externé knižnice kvôli kompatibilite.

Index.html

Začneme znovu od prípravy koreňového súboru celej aplikácie a jeho základ bude vyzerať nasledovne:

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

Ako vidíte, od kalkulačky sa toho veľa nezmenilo. Iba pribudli ďalšie moduly pre AngularJS. Framework samotný totiž využíva svoje modularity a okrem jadra je rozdelený na hŕbu ďalších knižníc práve v podobe samostatných modulov. Rovno som sem teda opäť pomocou CDN od Googlu nalinkoval moduly, ktoré budeme neskôr využívať

Assets / css / calculator.css

Než sa vrhneme na definíciu modulu, ešte si predom pripravíme globálne CSS, ktoré opäť využijeme až v priebehu tutoriálu, ale už na neho nebudeme musieť myslieť.

/* 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áver dnešnej lekcie si definujeme náš CMS modul už s prepojením na vyššie uvedené AngularJS moduly.

'use strict';

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

Tu vidíte, že skladanie modulov je naozaj veľmi jednoduché.

Týmto teda dnešné lekcie AngularJS končí. Všetko sme si pekne pripravili a nabudúce sa rovno vrhneme na programovanie. A nezačneme ničím menším než definíciou API a služieb pre jeho obsluhu v rámci cms modulu.