7. diel - Jednoduchý redakčný systém v AngularJS - Výpis článku

V minulej lekcii, Jednoduchý redakčný systém v AngularJS - API článkov , sme si pripravili službu pre prácu s API aj samotné API článkov. A ako som sľúbil, v dnešnom tutoriálu k nemu pridáme aj kontrolér a šablóny, čím v našom redakčnom systéme sprevádzkujeme výpisy článkov.

Routovanie

Začneme zavedením routovanie do našej aplikácie, aby sme sa dostali k daným článkom cez API podľa ich URL adresy.

App / cms.routes.js

Routovanie zariadime pridaním routovacie konfigurácie, ktorá sa z pravidla píše do samostatného súboru. Preto si ho vytvoríme. Pre routovanie v našej aplikácii som sa rozhodol využiť štandardné AngularJS modul ngRoute, ktorý sme si už skôr pridali. Konfigurácia nášho routovanie pomocou neho bude vyzerať nasledovne:

'use strict';

/** Definice routovacích pravidel naší aplikace. */
app.config(function ($routeProvider) {
    var templatePath = 'app/templates/';

    $routeProvider
        .when('/:url?', {
            templateUrl: templatePath + 'article.html',
            controller: 'ArticleController',
            controllerAs: 'article'
        })
        .otherwise({
            redirectTo: '/'
        });
});

Ako vidíte, všetko prebieha cez službu $routeProvider, ktoré určíme aký kontrolér, šablónu, akékoľvek prezývky, či iné nastavenia, má použiť pre ktorú URL. Naša URL navyše obsahuje nepovinný URL parameter, ktorý reprezentuje URL samotného článku. Pokiaľ nie je zadaná, budeme musieť vybrať nejakú predvolenú, ale to až za chvíľu. Nasleduje defaultný presmerovanie, čo je v našom prípade iba formalita.

Kontrolér

App / controllers / article.contro­ller.js

Budeme pokračovať s kontrolerom pre výpis článku. Ten bude vyzerať nasledovne:

'use strict';

/** Zpracovává vykreslování článku. */
app.controller('ArticleController', function ($routeParams, $rootScope, $location, Articles) {
    var url = $routeParams.url || 'uvod'; // Získání URL zobrazovaného článku.
    this.content = '';

    // Načtení dat zobrazovaného článku z API pomocí služby.
    Articles.get({url: url}, (function (article) {
        // Asynchronní zpracování dat článku.
        $rootScope.title = article.title;
        $rootScope.description = article.description;
        this.content = article.content;
    }).bind(this), function (error) {
        // Ošetření chyby při načítání článku.
        if (error.status === 404) $location.path('/chyba');
        else {
            console.error(error);
            $location.path('/');
        }
    });
});

Tu by sme už mali byť ako doma, pretože kontrolery a ich fungovanie dobre poznáme. Čo tu stojí za zmienku je získanie parametra z routovanie pomocou $routeParams, kde sa hneď vyrieši aj URL pre predvolené článok. V rámci definície API z minulej lekcie sme určili, že vždy bude existovať článok 'uvod' a 'chyba' a tu na to spoliehame.

Ďalej určite stojí za preskúmanie práce so službou API pre správu článku. Kladú sa tu klasické asynchrónne dotazy, tu na konkrétny článok s danou URL. Potom nasleduje spracovanie v podobe callback. Pre tých, ktorí majú radšej novšie Promise, táto metóda ho zároveň vracia, takže si vlastne môžete vybrať

Keď teda nájdeme článok, vezmeme jeho hodnoty a nastavíme je šablónam. $rootScope slúži pre globálne hodnoty, keď this v tomto prípade reprezentuje aktuálny šablónu kontroleru. Keď naopak dôjde k chybe, rozlíšime, či je to chyba s HTTP kódom 404 (nenájdené), potom smerujeme na článok 'chyba'. Alebo ak sa jedná o všeobecnú chybu, tak ju aspoň zalogujeme a skúsime sa vrátiť na domovskú stránku. Tu vidíme, že vnútorné smerovanie prebieha pomocou služby $location.

Všetky používané služby vnútri kontroleru potom získame automaticky pomocou DI, rovnako ako u kalkulačky.

Šablóny

Teraz je teda čas pozrieť sa na zúbok šablónam.

App / templates / article.html

Začneme šablónou samotného článku, ktorá je relatívne jednoduchá:

<ng-bind-html ng-bind-html="article.content"></ng-bind-html>

Ako vidíte, vypisuje sa v nej iba obsah článku. Ovšem je tu problém. AngularJS kvôli bezpečnosti automaticky escapuje všetok HTML aj iný kód zo svojich dát. My ale máme a chceme mať v obsahu článku HTML kód. Pre to tu použijeme modul ngSanitize, ktorý definuje vyššie uvedenú direktívu, čo nám umožní vypísať obsah článku ako HTML.

Index.html

Pokračovať budeme úpravou celkového vzhľadu našej aplikácie, ktorý definuje súbor index.html. Tu musíme okrem základnej HTML štruktúry našej aplikácie doplniť ešte aj pár ďalších drobností. Jeho výsledná podoba bude nasledujúci:

<!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="{{description}}">
        <title ng-bind="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. -->
        <header>
            <h1>Jednoduchý redakční systém v AngularJS</h1>
        </header>

        <nav>
            <ul>
                <li><a href="#!uvod">Úvod</a></li>
                <li><a href>Seznam článků</a></li>
                <li><a href>Kontakt</a></li>
            </ul>
        </nav>
        <br clear="both"/>

        <article>
            <header>
                <h1 ng-cloak>{{title}}</h1>
            </header>
            <section>
                <!-- Vložení obsahu do šablony. -->
                <ng-view></ng-view>
            </section>
        </article>

        <footer>
            <p>Ukázkový tutoriál pro jednoduchý redakční systém v AngularJS z programátorské sociální sítě
                <a href="http://www.itnetwork.cz" target="_blank">itnetwork.cz</a>.
            </p>
        </footer>

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

        <!-- Definice routování aplikace. -->
        <script src="app/cms.routes.js"></script>

        <!-- Simulace serverového API. -->
        <script src="api/api.js"></script>
        <script src="api/entities/article.js"></script>
        <script src="api/models/article-model.js"></script>

        <!-- Služby / Model. -->
        <script src="app/services/articles.factory.js"></script>

        <!-- Kontrolery. -->
        <script src="app/controllers/article.controller.js"></script>
    </body>
</html>

Najskôr teda doplníme do hlavičky dynamickú zmenu title aj description, ďalej vytvoríme základné HTML štruktúru našej aplikácie a nakoniec nezabudneme pridať novo definovanej skripty našej aplikácie.

Za zmienku stojí asi 2 veci. Jednak direktíva ng-view, ktorú definuje modul ngRoute a v ktorej sa bude dynamicky meniť obsah ďalších šablón podľa routovanie. A potom spôsob definovania odkazov aplikácie použitý napr. V href. Celé routovanie sa totiž prejavuje aj v rámci URL adresy, avšak všetky "vnútorné" stránky majú svoje URL uvedené za #. To nie je z princípu považované za pekné URL. Mám pre vás ale dobrú správu, toto správanie možno zmeniť a vaša webová aplikácia môže mať pekné URL adresy so všetkým. Však vyžaduje to hneď niekoľko netriviálne krokov, takže my sa pre jednoduchosť zatiaľ uspokojíme s východiskovým správaním.

Teraz si už môžete skúsiť web spustiť a vidieť úvodnú stránku. Je to určite príjemný pocit po tom, čo sme zmenili toľko kódu, že?

Úplný základ máme sprevádzkovaný a v budúcej lekcii, Jednoduchý redakčný systém v AngularJS - Administrácia , sa pozrieme detailnejšie na administráciu článkov

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.