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

V minulé lekci, Jednoduchý redakční systém v AngularJS - API článků, jsme si připravili službu pro práci s API i samotné API článků.

A jak jsem slíbil, v dnešním tutoriálu do našeho redakčního systému přidáme kontroler a šablony, čímž zprovozníme výpis článků.

Routování

Začneme zavedením routování do naší aplikace, abychom se dostali k daným článkům přes API podle jejich URL adresy.

app/cms.routes.js

Routování zařídíme přidáním routovací konfigurace, která se z pravidla píše do samostatného souboru. Proto si jej vytvoříme. Pro routování v naší aplikaci jsem se rozhodl využít standardní AngularJS modul ngRoute, který jsme si již dříve přidali. Konfigurace našeho routování pomocí něj bude vypadat následovně:

'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: '/'
        });
});

Jak vidíte, vše probíhá přes službu $routeProvider, které určíme jaký kontroler, šablonu, případně alias, či jiné nastavení, má použít pro kterou URL. Naše URL navíc obsahuje nepovinný URL parametr, který reprezentuje URL samotného článku. Pokud není zadána, budeme muset vybrat nějakou výchozí, ale to až za chvíli. Následuje defaultní přesměrování, což je v našem případě pouze formalita.

Kontroler

app/controller­s/article.con­troller.js

Budeme pokračovat s kontrolerem pro výpis článku. Ten bude vypadat následovně:

'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('/');
        }
    });
});

Zde bychom již měli být jako doma, jelikož kontrolery a jejich fungování dobře známe. Co zde stojí za zmínku je získání parametru z routování pomocí $routeParams, kde se hned vyřeší i URL pro výchozí článek. V rámci definice API z lekce API článků jsme určili, že vždy bude existovat článek 'uvod' a 'chyba' a zde na to spoléháme.

Dále určitě stojí za prozkoumání práce se službou API pro správu článku. Kladou se zde klasické asynchronní dotazy, zde na konkrétní článek s danou URL. Poté následuje zpracování v podobě callbacků. Pro ty, kteří mají radši novější Promise, tato metoda jej zároveň vrací, takže si vlastně můžete vybrat

Když tedy najdeme článek, vezmeme jeho hodnoty a nastavíme je šablonám. $rootScope slouží pro globální hodnoty, když this v tomto případě reprezentuje aktuální šablonu kontroleru. Když naopak dojde k chybě, rozlišíme, jestli je to chyba s HTTP kódem 404 (nenalezeno), poté směrujeme na článek 'chyba'. Nebo pokud se jedná o obecnou chybu, tak ji alespoň zalogujeme a zkusíme se vrátit na domovskou stránku. Zde vidíme, že vnitřní směrování probíhá pomocí služby $location.

Všechny používané služby uvnitř kontroleru poté získáme automaticky pomocí DI, stejně jako u kalkulačky.

Šablony

Nyní je tedy čas podívat se na zoubek šablonám.

app/templates/ar­ticle.html

Začneme šablonou samotného článku, která je relativně jednoduchá:

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

Jak vidíte, vypisuje se v ní pouze obsah článku. Ovšem je tu problém. AngularJS kvůli bezpečnosti automaticky escapuje všechen HTML i jiný kód ze svých dat. My ale máme a chceme mít v obsahu článku HTML kód. Pro to zde použijeme modul ngSanitize, který definuje výše uvedenou direktivu, což nám umožní vypsat obsah článku jako HTML.

index.html

Pokračovat budeme úpravou celkového vzhledu naší aplikace, který definuje soubor index.html. Zde musíme kromě základní HTML struktury naší aplikace doplnit ještě i pár dalších drobností. Jeho výsledná podoba bude následující:

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

Nejdříve tedy doplníme do hlavičky dynamickou změnu title i description, dále vytvoříme základní HTML strukturu naší aplikace a nakonec nezapomeneme přidat nově definované skripty naší aplikace.

Za zmínku stojí asi 2 věci. Jednak direktiva ng-view, kterou definuje modul ngRoute a v níž se bude dynamicky měnit obsah dalších šablon podle routování. A potom způsob definování odkazů aplikace použitý např. v href. Celé routování se totiž projevuje i v rámci URL adresy, ovšem všechny "vnitřní" stránky mají své URL uvedeny za #. To není z principu považováno za hezké URL. Mám pro vás ale dobrou zprávu, toto chování lze změnit a vaše webová aplikace může mít hezké URL adresy se vším všudy. Ovšem vyžaduje to hned několik netriviálních kroků, takže my se pro jednoduchost zatím spokojíme s výchozím chováním.

Nyní si již můžete zkusit web spustit a vidět úvodní stránku. Je to jistě příjemný pocit po tom, co jsme změnili tolik kódu, že?

Úplný základ máme zprovozněný.

V příští lekci, Jednoduchý redakční systém v AngularJS - Administrace, si do administrace článků přidáme kontrolery i šablony pro jejich vytváření, editaci a mazání.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.