Akce! Dobij si body, napiš nám do zpráv "Přes léto se to naučím!" a dobijeme ti ještě navíc 50% z této částky! Sleva na výuku platí do 22.6.2018.

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

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

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Jednoduchý redakční systém v AngularJS - Administrace, jsme rozpracovali administraci článků jednoduchého redakčního systému. Dnes ji spolu s kontaktním formulářem dokončíme.

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

Stránka s kontaktním formulářem

Dále, v rámci kurzu, budeme pokračovat v rozšiřování administrace. Začneme se trochu věnovat zabezpečení našeho webu, což by mělo vyústit v plně funkční přihlašování a registraci uživatelů s možností definice jejich práv, takže se určitě máte na co těšit. Konkrétně 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 uživateli ;)


 

Stáhnout

Staženo 18x (30.55 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

 

Článek pro vás napsal Jindřich Máca
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor se věnuje převážně webovým technologiím, ale má velkou zálibu ve všem vědeckém, nejen ze světa IT. :-)
Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!