8. diel - Jednoduchý redakčný systém v AngularJS - Administrácia

V minulej lekcii, Jednoduchý redakčný systém v AngularJS - Výpis článku , sme už vytvorili základnú štruktúru pre výpis článkov. Dnes budeme pokračovať s tvorbou ich administrácie v redakčnom systéme postavenom na JavaScript frameworku AngularJS.

Externé JS knižnice

Keďže AngularJS je pomerne robustný framework, ktorý preberá kontrolu nad väčšinou javascriptového dianie na celej stránke, nie je úplne ľahké ho prepojiť s niektorými knižnicami. Našťastie pre tých populárne existujú už pripravené moduly, ktoré všetko uľahčia. Príkladom je potrebné TinyMCE, ktoré som sa rozhodol použiť pre pohodlnú editáciu HTML obsahu článkov.

Assets / lib / js / angular-ui-tinymce.min.js

Pre prácu s ním treba okrem samotnej knižnice vložiť do projektu aj modul - AngularUI wrapper for TinyMCE, ktorý slúži ako obal pre využitie tejto knižnice v prostredí AngularJS. Tento modul si teda stiahnite a vložte do priečinka pre externé knižnice našej aplikácie.

App / cms.module.js

Ďalej ho ešte nezabudneme klasicky zaviesť ako modul našej aplikácie:

'use strict';

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

Kontrolery

Keďže modelovú vrstvu v podobe simulovaného alebo vlastného plnohodnotného API máme už nachystanú z minulej lekcie, začneme rovno od kontrolerov.

App / controllers / article-list.controller.js

V AngularJS máme štandardne k jednému kontroleru jednu šablónu, kontrolér teda väčšinou reprezentuje jednu samostatnú stránku. Preto si pre výpis zoznamu článkov, ako samostatnú stránku, vytvoríme vlastnú šablónu a kontrolér, ktorý bude vyzerať nasledovne:

'use strict';

/** Zpracovává vykreslování seznamu článků. */
app.controller('ArticleListController', function ($rootScope, $scope, Articles) {
    $rootScope.title = 'Výpis článků';
    $rootScope.description = 'Výpis všech článků.';

    this.articles = Articles.query();

    /**
     * Odstraní článek.
     * @param {int} index - Index článku v poli článků.
     */
    this.remove = function (index) {
        // Odstraní článek pomocí API.
        Articles.delete({url: this.articles[index].url}, (function () {
            // Odstraní článek z aktuálního seznamu článků.
            this.articles.splice(index, 1);
        }).bind(this), function (error) {
            console.error(error);
        });
    };
});

Tu sa toho veľa nového neudialo, iba vidíme spôsob načítanie článku z API a definíciu metódy kontroleru pre ich zmazanie, ako z lokálne načítaných dát, tak opäť iz API.

App / controllers / article-editor.contro­ller.js

Ďalší na rade bude kontrolér reprezentujúci stránku editora článkov:

'use strict';

/** Zpracovává vykreslování editoru článků. */
app.controller('ArticleEditorController', function ($routeParams, $rootScope, $scope, $location, Articles) {
    $rootScope.title = 'Editor';
    $rootScope.description = 'Editor článků.';

    // Počáteční hodnota / základ pro nový článek.
    $scope.article = {
        url: '',
        title: '',
        content: '',
        description: ''
    };

    var url = $routeParams.url; // Získání URL editovaného článku.

    // Načtení dat editovaného článku z API, pokud byla zadána jeho URL.
    if (url) Articles.get({url: url}, function (article) {
        $scope.article = article;
    }, function (error) {
        console.error(error);
    });

    // Nastavení pro TinyMCE.
    this.tinymceOptions = {
        selector: '#editorForm-content',
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste'
        ],
        toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        entities: '160,nbsp',
        entity_encoding: 'raw'
    };

    /** Uloží článek. */
    this.save = function () {
        Articles.save($scope.article, function (article, headers) {
            $location.path(headers('Location')); // Přesměrování na zobrazení článku.
        }, function (error) {
            console.error(error);
        });
    };
});

Tu si najskôr pripravíme dátovú kostru pre tento článok, ktorú cez API doplníme dátami článku existujúceho, v prípade že sa jedná o editáciu. To spoznáme jednoducho podľa zadanej URL adresy. Nasleduje miestne nastavenia pre TinyMCE a na konci tu potom ešte pridávame metódu pre uloženie článku do API.

Šablóny

Teraz sa pozrieme na šablóny k jednotlivým kontrolerům.

App / templates / article-list.html

Začneme šablónou pre výpis článkov:

<table>
    <tr ng-repeat="(index, article) in articleList.articles">
        <td>
            <h2><a href="#!{{article.url}}">{{article.title}}</a></h2>
            {{article.description}}
            <br/>
            <a href="#!editor/{{article.url}}">Editovat</a>
            <a href ng-click="articleList.remove(index)">Odstranit</a>
        </td>
    </tr>
</table>

Tu sú hneď dve novinky. Po prvé je vidieť práca s poľom dát v rámci šablóny, kde AngularJS vezme v cykle ng-repeat jednotlivé články a ku každému vytvorí príslušný riadok (<tr>) HTML tabuľky. Po druhé je tu ukážka volanie metódy kontroleru pre zmazanie článku pri kliknutí na odkaz.

App / templates / article-editor.html

Teraz šablóna pre editor článkov:

<!-- AngularJS formulář s mapováním dat i vlastní validací (výchozí validace v prohlížeči vypnuta). -->
<form name="editorForm" ng-submit="articleEditor.save()" novalidate>
    <!-- TITLE -->
    <div class="form-group">
        <label for="editorForm-title">Titulek</label>
        <input id="editorForm-title" type="text" name="title" ng-model="article.title" required>

        <!-- Definice chybových zpráv. -->
        <div ng-messages="editorForm.title.$error" ng-show="editorForm.title.$touched">
            <p ng-message="required">Titulek článku nemůže být prázdný!</p>
        </div>
    </div>

    <!-- URL -->
    <div class="form-group">
        <label for="editorForm-url">URL</label>
        <input id="editorForm-url" type="text" name="url" ng-model="article.url" required>
        <div ng-messages="editorForm.url.$error" ng-show="editorForm.url.$touched">
            <p ng-message="required">URL článku nemůže být prázdná!</p>
        </div>
    </div>

    <!-- DESCRIPTION -->
    <div class="form-group">
        <label for="editorForm-description">Popisek</label>
        <input id="editorForm-description" type="text" name="description" ng-model="article.description" required>
        <div ng-messages="editorForm.description.$error" ng-show="editorForm.description.$touched">
            <p ng-message="required">Popisek článku nemůže být prázdný!</p>
        </div>
    </div>

    <!-- CONTENT -->
        <div class="form-group">
            <label for="editorForm-content">Obsah</label>
            <textarea id="editorForm-content" name="content" ui-tinymce="articleEditor.tinymceOptions" ng-model="article.content" required></textarea>
            <div ng-messages="editorForm.content.$error" ng-show="editorForm.content.$touched">
                <p ng-message="required">Obsah článku nemůže být prázdný!</p>
        </div>
    </div>

    <!-- SUBMIT BUTTON -->
    <button type="submit" ng-disabled="editorForm.$invalid">Uložit článek</button>
</form>

Formulár v AngularJS sme už videli v prvom projekte u kalkulačky, avšak tu je rozšírený o ďalšie validačné prvky a ukazuje sa tu ozajstná sila frameworku.

Pri každom elementu formulára si môžete všimnúť spôsobu definícia vlastných validačných pravidiel a chybových správ, ktoré sa zobrazí pri ich porušení. Tiež formulár nie je možné odoslať, pokým nie je celý validný.

Pole pre obsah tu má navyše ešte direktívu pre aktiváciu už vyššie spomínaného TinyMCE a odovzdanie jeho príslušné konfigurácie.

Index.html

Lekciu zakončíme klasicky úpravou a rozšírením hlavného súboru našej aplikácie. Nebudem sem už vypisovať znovu celú šablónu, ale iba zmeny:

...
<nav>
    <ul>
        <li><a href="#!uvod">Úvod</a></li>
        <li><a href="#!seznam-clanku">Seznam článků</a></li>
        <li><a href>Kontakt</a></li>
    </ul>
</nav>
...
<!-- TinyMCE a jeho integrace pro AngularJS -->
<script type="text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript" src="assets/lib/js/angular-ui-tinymce.min.js"></script>
...
<!-- Kontrolery. -->
<script src="app/controllers/article.controller.js"></script>
<script src="app/controllers/article-list.controller.js"></script>
<script src="app/controllers/article-editor.controller.js"></script>
...

Routovanie

App / cms.routes.js

Na záver pridáme nové routovacie pravidlá:

'use strict';

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

    $routeProvider
        .when('/seznam-clanku', {
            templateUrl: templatePath + 'article-list.html',
            controller: 'ArticleListController',
            controllerAs: 'articleList'
        })
        .when('/editor/:url?', {
            templateUrl: templatePath + 'article-editor.html',
            controller: 'ArticleEditorController',
            controllerAs: 'articleEditor'
        })
        .when('/:url?', {
            templateUrl: templatePath + 'article.html',
            controller: 'ArticleController',
            controllerAs: 'article'
        })
        .otherwise({
            redirectTo: '/'
        });
});

Ako vidíte, tu sa nám naše nové kontrolery a šablóny krásne prepojí dohromady pod URL adresami, ktoré som sa rozhodol zachovať v češtine.

Teraz sa už môžete pozrieť na výsledok, skúsiť si vypísať zoznam článkov a pokojne ich aj nejako editovať.

V budúcej lekcii, Jednoduchý redakčný systém v AngularJS - Kontaktný formulár , si pridáme ešte kontaktný formulár a administráciu článkov v našom AngularJS redakčnom systéme dokončíme.

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š.