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.
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/calculator.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.