Laboratorium 2: Portfolio zdjęciowe, p.2

Transkrypt

1 Laboratorium 2: Portfolio zdjęciowe, p.2 Czas realizacji: 2 godziny Kurs: WYK01_AngularJS.pdf Pliki:, controller.js Edytor: stabilna wersja 2 (portable) Ćwiczenie 1. Filtr tekstowy Na poprzednim laboratorium zrobiliśmy praktycznie cały szablon portfolio zdjęciowego, pora na trochę zabawy. Na początek coś prostego zrobimy wyszukiwarkę tekstową. 1. Nad galerią wstawimy pole typu input, powiążemy je z modelem przez dyrektywę ng-model i nadamy mu nazwę query. <input ng-model="query"> 2. Tej samej nazwy użyjemy w pętli ng-repeat do określenia wyników wyszukiwania. query"> 3. I już. Spróbuj coś wpisać i zobacz efekty. Zadanie samodzielne 1. Pod polem <input> wstaw Wyniki wyszukiwania dla: i wyświetl query. 2. Zmień zasięg kontrolera i wyświetl query w tytule Twojej strony w części HEAD wykorzystując ng-bind-template. 3. Wykorzystaj dyrektywę ng-if= warunek, aby wyniki wyszukiwania wyświetlać jedynie gdy zostało wpisane query. Jeśli nie ma query powinna wyświetlać się liczba wszystkich galerii.

2 Ćwiczenie 2. Sortowanie 1. Dodajmy jeszcze sortowanie wyników. Ponownie wykorzystamy ng-model, tym razem z selectem. <label>sortuj:</label> <select ng-model="orderprop" class="form-control"> <option value="title">alfabetycznie</option> <option value="when">chronologicznie</option> </select> query orderby: orderprop"> 2. Domyślnie ustawimy sortowanie chronologicznie, definiując początkową wartość dla orderprop należy wstawić ją POD listą zdjęć: controllers.js $scope.orderprop = 'when';

3 3. Wyświetlmy jeszcze wartość orderprop pod selectem tak jak wcześniej wartość query: <p ng-if="orderprop">galerie ułożone: {{orderprop}}</p> Nie do końca o to nam chodziło, prawda? 4. Jak widać, jeśli chcemy ładną nazwę sposobu sortowania, nie będzie to takie proste. Musimy jakoś pobrać nazwę opcji w zależności od wartości. Użyjemy do tego dyrektywy ng-options i naszego kontrolera. <select ng-model="orderprop" ng-options="sort as sort.label for sort in sortlist"> </select> Wstawiamy NAD $scope.orderprop = 'when'; controllers.js $scope.sortlist = [ { 'label':'alfabetycznie', 'value':'title' }, { 'label':'chronologicznie', 'value':'when' } ]; 5. W tym momencie nasz orderprop ma dostęp zarówno do wartości atrybutu value jak i do etykietki. Poprawmy więc sortowanie galerii: query orderby: orderprop.value">

4 Zadanie samodzielne 1. Popraw wyświetlanie bieżącej opcji sortowania w Galerie ułożone:. 2. Popraw domyślne sortowanie w kontrolerze musisz się odnieść do pierwszego elementu tablicy sortlist. 3. Dodaj kolejną opcję sortowania Od najnowszej wykorzystując odwrócenie sortowania chronologicznego poprzez '-when'. 4. Uporządkuj układ elementów na stronie. Ćwiczenie 3. Serwis $http Mieszanie kodu JS z danymi to nie jest dobry pomysł. Lepiej, jeśli tablica ze zdjęciami oraz dane do sortowania znajdą się poza kontrolerem. Przenieśmy je więc do osobnego pliku. 1. Otwórz nowy plik i zapisz go w katalogu ze zdjęciami jako galleries.json. 2. Do pliku przenieś tablicę galleries zawartość wraz z nawiasami kwadratowymi! 3. Popraw cudzysłowy z pojedynczych na podwójne i zapisz plik. 4. W pliku controllers.js skorzystamy teraz z serwisu $http i metody get żeby podczepić dane z pliku. W tym celu prawidłowo wstrzykniemy usługę do kontrolera.

5 controllers.js PRZED portfolioapp.controller('gallerylistctrl', function($scope) { $scope.galleries = [ { 'title':'rzym', 'when':' ', 'thumbnailurl':'/img/portfolio/2015/1_sm.jpg' }, { 'title':'maroko', 'when':' ', 'thumbnailurl':'/img/portfolio/2014/1_sm.jpg' } ]; }); PO portfolioapp.controller('gallerylistctrl', ['$scope', '$http', function($scope, $http) { $http.get('json/galleries.json').success(function(data) { $scope.galleries=data; });.. }]); 5. Analogicznie przenieś listę do sortowania. Gotowe zadanie należy spakować i przesłać jako paczkę ZIP na zaliczenie na adres aszydlowska@zpsb.pl do końca bieżącego semestru. Plik nazwać według wzoru TF_jkowalski_lab02.zip