Tworzymy dynamiczny podgląd posta
Jakiś czas temu zajmowaliśmy się tworzeniem formularza kontaktowego w technologii Ajax. Dziś zrobimy coś, co może Wam posłużyć do rozbudowy formularza o dodatkową funkcję — podgląd na żywo. Nie będziemy jednak tego robić na tamtym przykładzie, ponieważ zrobimy sobie coś prostszego abyście lepiej zrozumieli dzisiejszą lekcję, a co za tym idzie — zyskali wiedzę pozwalającą na samodzielne rozbudowanie własnego formularza. Do dzieła!
Demo oraz pliki źródłowe:
[buttons][demo url=”http://demo.wojtek1150.com/AngularLivePreview/"]Zobacz demo[/demo] [download url=”http://wojtek1150.com/?wpdmact=process&did=MTUuaG90bGluaw=="]Pliki źródłowe[/download][buttons]
Czego użyjemy:
- AngularJS — do obsługi sktyptu
- Twitter Bootstrap — do ostylowania
Oba frameworki możecie sobie pobrać i dodać lokalnie, albo poprzez CDN — osobiście polecam to drugie rozwiązanie, gdyż przyśpiesza to działanie strony. Zacznijmy sobie może od struktury, Do sekcji head dodajmy sobie Angulara oraz Bootstrapa poprzez:
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>W naszym przykładzie będziemy robić formularz oceny produktu, zróbmy sobie zatem prosty formularz na razie bez poglądu:
<form id="form" name="reviewForm" role="form">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="Imię i nazwisko">
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
<select class="form-control" title="Stars">
<option value="">Oceń produkt</option>
</select>
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
<textarea class="form-control" rows="5" placeholder="Treść wiadomości"></textarea>
</div>
<button type="button" class="btn btn-primary btn-lg input-lg form-control">Wyślij</button>
</form>Przy wyborze oceny specjalnie nie dodawałem dodatkowych opcji, ponieważ zrobimy to dynamicznie poprzez Angulara, za chwile zobaczycie jak :) Utwórzcie sobie nowy plik *.js o dowolnej nazwie. Ja sobie go nazwałem app.js a następnie dodajcie go do strony. W pliczku napiszemy sobie coś takiego:
(function() {var app = angular.module('myApp', []);
})();
Słowem wyjaśnienia - deklarujemy sobie zmienną app, do której tworzymy i przypisujemy moduł o nazwie myApp. Ciekawszych świata odsyłam do lektury: https://docs.angularjs.org/guide/module. Zapisujemy sobie plik i możemy sobie go już zamknąć ponieważ nie będzie nam już potrzebny. Teraz musimy zrobić bardzo ważną rzecz, bez której nie będzie nasza aplikacja działać, mianowicie musimy powiedzieć Angularowi, że ma uruchomić nasz moduł. Robimy to poprzez polecenie ng-app="nazwa_modułu" dodajemy sobie to polecenie do kontenera w którym będzie nasz moduł działać. Ja sobie dodałem go do znacznika HTML aby nie skasować sobie go przypadkiem. Poprawnie to powinno wyglądać tak:<html ng-app="myApp">Następnie musimy sobie podrasować nasz formularz, aby zbierał dane i przekazywał je Angularowi. Aby dane z formularza zostały zapamiętane musimy wywołać polecenie ng-model. Od razu dodajmy sobie opcje do select boxa poprzez ng-options. Całość prezentuje się następująco:<form id="form" name="reviewForm" role="form">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" ng-model="review.author" class="form-control" placeholder="Imię i nazwisko">
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
<select ng-model="review.stars" class="form-control" ng-options="stars for stars in [5,4,3,2,1]" title="Stars">
<option value="">Oceń produkt</option>
</select>
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
<textarea class="form-control" ng-model="review.body" rows="5" placeholder="Treść wiadomości"></textarea>
</div>
<button type="button" class="btn btn-primary btn-lg input-lg form-control">Wyślij</button>
</form>Mając już gotowy formularz możemy sobie dodać prosty podgląd na bazie cytatu, oto szablon:<blockquote>
<p><strong>Ocena: </strong></p>
<p></p>
<cite class="small"><em></em></cite>
</blockquote>Teraz nie pozostaje nic prostszego jak dodać wpisywany w formularzu tekst. Angular jest taki genialny, że dane wyprowadzamy w podwójnych klamrowych nawiasach. Tak więc przekopiujmy dane ze znaczników w odpowiednie miejsca:<blockquote>
<p><strong>Ocena: {{review.stars}}</strong></p>
<p>{{review.body}}</p>
<cite class="small"><em>{{review.author}}</em></cite>
</blockquote>I już :) Prawda, że proste?Pytania / sugestie / komentarze ? PISZCIE![wpdm_file id=15]
