9. diel - Jednoduchý redakčný systém v AngularJS - Kontaktný formulár

V minulej lekcii, Jednoduchý redakčný systém v AngularJS - Administrácia , sme rozpracovali administráciu článkov jednoduchého redakčného systému. Dnes ju spolu s kontaktným formulárom dokončíme.

Model

Na začiatok ešte zabrúsime do modelových služieb.

App / services / contact-messages.factory.js

Vytvoríme si službu modelu pre posielanie kontaktných správ cez API:

'use strict';

/** Model pro práci s kontaktními zprávami přes API. */
app.factory('ContactMessages', function ($resource) {
    return $resource('/api/contact-messages');
});

Opäť tu využijeme AngularJS $resource a v podstate nie je čo riešiť, pretože API ako také máme už pripravené z minulých lekcií

Kontrolery

Pokračovať budeme ako zvyčajne kontrolery.

App / controllers / administration­.controller.js

Začneme vytvorením kontroleru pre administračné sekciu, ktorý bude v tejto chvíli takmer prázdny, keďže od neho zatiaľ nepotrebujeme žiadnu extra funkcionalitu:

'use strict';

/** Zpracovává vykreslování administrační sekce. */
app.controller('AdministrationController', function ($rootScope) {
    $rootScope.title = 'Administrace';
    $rootScope.description = 'Administrace webu.';
});

App / controllers / contact.contro­ller.js

Ďalej si vytvoríme nový kontrolér pre kontaktnú stránku, kde už toho bude trochu viac:

'use strict';

/** Zpracovává kontaktní formulář. */
app.controller('ContactController', function ($rootScope, $scope, $location, ContactMessages) {
    $rootScope.title = 'Kontaktní formulář';
    $rootScope.description = 'Kontaktní formulář.';

    // Základ pro novou kontaktní zprávu.
    $scope.message = {
        email: '',
        year: '',
        content: ''
    };

    /** Odešle kontaktní zprávu přes API. */
    $scope.send = function () {
        ContactMessages.save($scope.message, function () {
            $location.path('/');
        }, function (error) {
            if (error.status === 400)
                $scope.contactFormError = error.statusText;
            else
                console.error(error);
        });
    }
});

Podobne ako u editore článkov, tu iba chystáme dátovú štruktúru pre novú správu a definujeme metódu pre jej odoslanie cez API. To uskutočníme pomocou vyššie pripravenej služby.

Šablóny

Teraz sa môžeme opäť pozrieť na šablóny.

App / templates / administration.html

Začneme šablónou pre stránku administrácie:

<p>Vítejte v administraci!</p>
<h2><a href="#!editor">Editor článků</a></h2>
<h2><a href="#!seznam-clanku">Seznam článků</a></h2>

App / templates / contact.html

Ďalej budeme pokračovať šablónou pre stránku s kontaktným formulárom:

<p>Kontaktujte nás odesláním formuláře níže.</p>

<form name="contactForm" ng-submit="send()" novalidate>
    <!-- Obecná chyba při odeslání formuláře. -->
    <div class="form-group">
        <p ng-show="contactFormError">{{contactFormError}}</p>
    </div>

    <!-- EMAIL -->
    <div class="form-group">
        <label for="contactForm-email">Vaše emailová adresa</label>
        <input id="contactForm-email" type="email" name="email" ng-model="message.email" required>
        <div ng-messages="contactForm.email.$error" ng-show="contactForm.email.$touched">
            <p ng-message="required">Emailová adresa nemůže být prázdná!</p>
            <p ng-message="email">Zadaná emailová adresa není validní!</p>
        </div>
    </div>

    <!-- YEAR -->
    <div class="form-group">
        <label for="contactForm-year">Zadejte aktuální rok</label>
        <input id="contactForm-year" type="text" name="year" ng-model="message.year" required>
        <div ng-messages="contactForm.year.$error" ng-show="contactForm.year.$touched">
            <p ng-message="required">Aktuální rok nemůže být prázdný!</p>
        </div>
    </div>

    <!-- CONTENT -->
    <div class="form-group">
        <label for="contactForm-content">Zpráva</label>
        <textarea id="contactForm-content" name="content" ng-model="message.content" required></textarea>
        <div ng-messages="contactForm.content.$error" ng-show="contactForm.content.$touched">
            <p ng-message="required">Obsah zprávy nemůže být prázdný!</p>
        </div>
    </div>

    <!-- SUBMIT BUTTON -->
    <button type="submit" ng-disabled="contactForm.$invalid">Odeslat</button>
</form>

V týchto šablónach už asi nie je nič, čo by nás mohlo nejako prekvapiť. A to je vlastne dobre.

Index.html

A na záver znovu menšie úpravy a rozšírenie hlavného súboru našej aplikácie, kde opäť pridáme odkazy na nové akcie a nové skripty:

...
<nav>
    <ul>
        <li><a href="#!uvod">Úvod</a></li>
        <li><a href="#!seznam-clanku">Seznam článků</a></li>
        <li><a href="#!kontakt">Kontakt</a></li>
    </ul>
</nav>
...
<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>. <a href="#!administrace">Administrace</a>
    </p>
</footer>
...
<!-- Služby / Model. -->
<script src="app/services/articles.factory.js"></script>
<script src="app/services/contact-messages.factory.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>
<script src="app/controllers/administration.controller.js"></script>
<script src="app/controllers/contact.controller.js"></script>
...

Routovanie

App / cms.routes.js

Už tradične na koniec pridáme nové routovacie pravidlá:

'use strict';

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

    $routeProvider
        .when('/kontakt', {
            templateUrl: templatePath + 'contact.html',
            controller: 'ContactController'
        })
        .when('/administrace', {
            templateUrl: templatePath + 'administration.html',
            controller: 'AdministrationController',
            controllerAs: 'administration'
        })
        .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: '/'
        });
});

Gratulujem, práve vám beží jednoduché administračné rozhranie pre články v AngularJS s kontaktným formulárom ako bonus

Ďalej, v rámci kurzu, budeme pokračovať v rozširovaní administrácie. Začneme sa trochu venovať zabezpečenia nášho webu, čo by malo vyústiť v plne funkčný prihlasovanie a registráciu užívateľov s možnosťou definície ich práv, takže sa určite máte na čo tešiť. Konkrétne v nasledujúcej lekcii, Jednoduchý redakčný systém v AngularJS - Užívateľské služby , začneme pridaním služieb modelu pre prácu užívateľovi

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