Polish (Polski) translation by Agnieszka Górczyńska (you can also view the original English article)
W poprzedniej części utworzyliśmy własną dyrektywę i wykorzystaliśmy ją w budowanej prostej aplikacji koszyka na zakupy. Natomiast w tej części serii zobaczysz, jak utworzyć wyświetlający podsumowanie element, który pozostaje na swoim miejscu podczas przewijania strony. Ponadto przygotujemy stronę finalizacji zamówienia, na której będą wyświetlone wybrane przez użytkownika produkty i ceny.
Rozpoczęcie pracy
Pracę rozpoczynamy od sklonowania z serwisu GitHub kodu źródłowego utworzonego w poprzednim artykule.
1 |
git clone https://github.com/jay3dec/AngularShoppingCart_Part2.git |
Następnie przechodzimy do katalogu projektu i instalujemy wymagane zależności.
1 |
cd AngularShoppingCart_Part2 |
2 |
npm install |
Po zainstalowaniu zależności można uruchomić serwer.
1 |
node server.js |
Po wpisaniu adresu http://localhost:3000/ w przeglądarce internetowej zobaczysz uruchomioną aplikację.
Położenie elementu wyświetlającego podsumowanie
Wprawdzie używamy wtyczki Bootstrap affix, aby element wyświetlający podsumowanie pozostawał na górze strony, ale oparte na nim rozwiązanie nie działa zgodnie z oczekiwaniami. Przeanalizujmy więc, co zostało źle zrobione.
Wspomniana wtyczka dodaje klasę o nazwie affix po przewinięciu strony powyżej pewnego pułapu i affix-top po przewinięciu poniżej tego pułapu. Takie rozwiązanie sprawdza się na prostych stronach HTML, ale już nie po integracji z AngularJS. W celu usunięcia problemu należy sprawdzić położenie przewijanej strony. Kiedy znajduje się powyżej lub poniżej określonego pułapu, na przykład 50 pikseli, wówczas dodajemy odpowiednie klasy affix.
Przyjmujemy założenie, że aktualne położenie powijanej strony jest wyrażone za pomocą wartości scroll. Klasy affix i affix-top dodajemy do znacznika <div> Total za pomocą dyrektywy ngClass.
1 |
ng-class="{'affix': scroll > 50, 'affix-top': scroll <= 50}"
|
Aby określić aktualne położenie przewijanej strony, tworzymy kolejną dyrektywę. Nowej dyrektywie nadajemy nazwę getScroll. Ta dyrektywa jest odpowiedzialna za uaktualnienie wartości zmiennej scroll w trakcie przewijania zawartości okna przeglądarki internetowej. Na podstawie wspomnianej wartości będą przypisywane odpowiednie klasy affix.
1 |
.directive('getScroll', function($window) { |
2 |
return { |
3 |
scope: { |
4 |
scroll: '=scroll' |
5 |
},
|
6 |
link: function(scope, element, attrs) { |
7 |
|
8 |
var scrollwindow = angular.element($window); |
9 |
|
10 |
scrollwindow.on('scroll', scope.$apply.bind(scope, function() { |
11 |
scope.scroll = scrollwindow.scrollTop(); |
12 |
}));
|
13 |
|
14 |
}
|
15 |
};
|
16 |
})
|
Jak możesz zobaczyć w powyższym kodzie, dyrektywie getScroll jest przekazywany atrybut zawierający wspomnianą wcześniej wartość. W trakcie przewijania strony następuje obliczenie odległości między położeniem bieżącym i początkiem strony. Do obliczenia jest używana funkcja angular.element($window). W trakcie każdego zdarzenia przewijania następuje uaktualnienie zmiennej zakresu scroll.
Powyższą dyrektywę umieść na końcu strony cart.html.
1 |
<get-scroll scroll="scroll"></get-scroll> |
Zapisz wprowadzone zmiany i odśwież stronę. Spróbuj przewinąć stronę w przeglądarce internetowej. Zauważ, że podsumowanie zawsze pozostaje widoczne i wyświetlane na górze strony.
Implementacja strony finalizacji zamówienia
W celu wypełnienia strony finalizacji zamówienia produktami wybranymi wcześniej przez użytkownika, zachodzi konieczność przekazywania danych między kontrolerami. Utworzymy teraz usługę AngularJS przeznaczoną do przekazywania danych między kontrolerami. Pracę rozpoczynamy od utworzenia usługi o nazwie CommonProp, w której będą zapisywane wybrane produkty oraz wartość całkowita zamówienia. Przejdź do pliku cart.js, a następnie umieść w nim przedstawiony poniżej kod źródłowy usługi CommonProp:
1 |
.service('CommonProp', function() { |
2 |
var Items = ''; |
3 |
var Total = 0; |
4 |
|
5 |
return { |
6 |
getItems: function() { |
7 |
return Items; |
8 |
},
|
9 |
setItem: function(value) { |
10 |
Items = value; |
11 |
},
|
12 |
getTotal: function(){ |
13 |
return Total; |
14 |
},
|
15 |
setTotal: function(value){ |
16 |
Total = value; |
17 |
}
|
18 |
};
|
19 |
});
|
Jak możesz zobaczyć, w usłudze CommonProp zdefiniowaliśmy cztery funkcje przeznaczone do pobierania i ustawiania produktów oraz wartości całkowitej zamówienia. Usługę CommonProp trzeba wstrzyknąć do kontrolera CartCtrl.
1 |
.controller('CartCtrl', ['$scope','CommonProp',function($scope,CommonProp) { |
Zadaniem usługi jest monitorowanie pod kątem jakichkolwiek zmian zmiennej shopData, a następnie odpowiednie zmodyfikowanie danych usługi. W kontrolerze CartCtrl umieść przedstawiony poniżej kod.
1 |
$scope.$watch('shopData',function(){ |
2 |
CommonProp.setItem($scope.shopData); |
3 |
})
|
Otwórz plik checkout.js i wstrzyknij usługę CommonProp do kontrolera CheckoutCtrl.
1 |
.controller('CheckoutCtrl', ['$scope','CommonProp',function($scope,CommonProp) { |
Usługa CommonProp będzie w kontrolerze CheckoutCtrl używana do pobierania produktów i ich wartości całkowitej.
1 |
.controller('CheckoutCtrl', ['$scope','CommonProp',function($scope,CommonProp) { |
2 |
$scope.items = CommonProp.getItems(); |
3 |
$scope.total = CommonProp.getTotal(); |
4 |
}]);
|
Za pomocą $scope.items możemy odpowiednie dane umieścić na stronie finalizacji zamówienia. Otwórz plik checkout.html i usuń na stałe zdefiniowaną tam tabelę. W celu dynamicznego utworzenia i wypełnienia tabeli użyjemy dyrektywy ngRepeat i $scope.items.
1 |
<table class="table"> |
2 |
<tr ng-repeat="i in items"> |
3 |
<td>
|
4 |
{{i.item}}
|
5 |
</td>
|
6 |
<td>
|
7 |
Rs. {{i.selected}}
|
8 |
</td>
|
9 |
</tr>
|
10 |
</table>
|
Zapisz wprowadzone zmiany i odśwież stronę. Zaznacz kilka produktów, a następnie kliknij przycisk Checkout na stronie koszyka na zakupy. Po przejściu na stronę finalizacji zamówienia powinieneś zobaczyć wyświetloną listę wszystkich wybranych produktów.
Teraz dodamy także wartość całkowitą zamówienia. Po jej obliczeniu przez funkcję kontrolera CartCtrl, nastąpi uaktualnienie wartości przekazywanej przez usługę CommonProp.
1 |
$scope.total = function() { |
2 |
var t = 0; |
3 |
|
4 |
for (var k in $scope.shopData) { |
5 |
t += parseInt($scope.shopData[k].selected); |
6 |
}
|
7 |
|
8 |
CommonProp.setTotal(t); |
9 |
return t; |
10 |
|
11 |
}
|
Aby na stronie finalizacji zamówienia wyświetlić jego wartość całkowitą dodaj następujący znacznik HTML <tr>:
1 |
<tr> |
2 |
<td> |
3 |
<b>Total:</b> |
4 |
</td> |
5 |
<td> |
6 |
<b>Rs. {{total}}</b> |
7 |
</td> |
8 |
</tr> |
Ponieważ uaktualniany zmienną zakresu total w kontrolerze CheckoutCtrl, wspomniana wartość całkowita zostanie automatycznie wyświetlona. Zapisz wprowadzone zmiany i odśwież stronę. Wybierz kilka produktów i kliknij przycisk Checkout. Po przejściu na stronę finalizacji zamówienia zobaczysz wybrane produkty oraz ich wartość całkowitą.
Jeżeli teraz klikniesz przycisk Customize, powrócisz do koszyka na zakupy, choć niestety będzie on pusty. Musimy usunąć to niedociągnięcie. Po wczytaniu strony koszyka na zakupy należy sprawdzić, czy usługa CommonProp zawiera informacje o jakichkolwiek produktach. Jeżeli dostępne są informacje o produktach, trzeba je wykorzystać do wypełnienia koszyka na zakupy.
W kontrolerze CartCtrl sprawdzamy, czy usługa CommonProp zawiera informacje o jakichkolwiek produktach, a następnie odpowiednio przygotowujemy dane w $scope.shopData.
1 |
if (CommonProp.getItems() != '') { |
2 |
$scope.shopData = CommonProp.getItems(); |
3 |
}
|
Zapisz wprowadzone zmiany i ponownie uruchom serwer. Na stronie koszyka na zakupy zaznacz kilka produktów, a następnie kliknij przycisk Checkout, aby przystąpić do finalizacji zamówienia. Po przejściu na stronę finalizacji zamówienia kliknij Customize i tym samym powróć do koszyka na zakupy. Wszystkie wybrane wcześniej produkty powinny znajdować się w koszyku.
Podsumowanie
W tej części serii zaimplementowaliśmy stronę finalizacji zamówienia. Dowiedziałeś się również, jak za pomocą usługi AngularJS współdzielić dane między różnymi kontrolerami. Utworzyliśmy też dyrektywę odpowiedzialną za określenie położenia przewijanej strony i usunięcie problemu związanego z komponentem bootstrap affix.
Mam nadzieję, że informacje zawarte w tej serii artykułów okazały się dla Ciebie przydatne. Więcej informacji szczegółowych na temat dyrektyw AngularJS znajdziesz w oficjalnej dokumentacji.
Kod źródłowy przedstawiony w artykule znajdziesz w serwisie GitHub. Jeżeli masz jakiekolwiek uwagi, sugestie lub znalazłeś błąd w tekście, koniecznie napisz o tym w komentarzu.
