Lekce 9 - Jednoduchý redakční systém v AngularJS - Kontaktní formulář

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

V dnešním tutoriálu se podíváme na kontrolery a šablony pro kontaktní formulář.

Model

Na začátek ještě zabrousíme do modelových služeb.

app/services/con­tact-messages.factory.js

Vytvoříme si službu modelu pro posílání kontaktních zpráv přes 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ět zde využijeme AngularJS $resource a v podstatě není co řešit, protože API jako takové máme již připravené z minulých lekcí

Kontrolery

Pokračovat budeme jako obvykle kontrolery.

app/controller­s/administrati­on.controller­.js

Začneme vytvořením kontroleru pro administrační sekci, který bude v tuto chvíli téměř prázdný, jelikož od něj zatím nepotřebujeme žádnou extra funkcionalitu:

'use strict';

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

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

Dále si vytvoříme nový kontroler pro kontaktní stránku, kde již toho bude trochu více:

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

Podobně jako u editoru článků, zde pouze chystáme datovou strukturu pro novou zprávu a definujeme metodu pro její odeslání přes API. To uskutečníme pomocí výše připravené služby.

Šablony

Nyní se můžeme opět podívat na šablony.

app/templates/ad­ministration.html

Začneme šablonou pro stránku administrace:

<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/con­tact.html

Dále budeme pokračovat šablonou pro stránku s kontaktním formulářem:

<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 šablonách již asi není nic, co by nás mohlo nějak překvapit. A to je vlastně dobře.

index.html

A na závěr znovu menší úpravy a rozšíření hlavního souboru naší aplikace, kde opět přidáme odkazy na nové akce 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>
...

Routování

app/cms.routes.js

Již tradičně na konec přidáme nová routovací pravidla:

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

Gratuluji, právě vám běží jednoduché administrační rozhraní pro články v AngularJS s kontaktním formulářem jako bonus

Pro dnešní lekci to bude vše

V příští lekci, Jednoduchý redakční systém v AngularJS - Uživatelské služby, začneme přidáním služeb modelu pro práci s uživateli

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