Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Utworznie za pomocą AngularJS prostego koszyka na zakupy – część pierwsza

by
Difficulty:IntermediateLength:MediumLanguages:

Polish (Polski) translation by Agnieszka Górczyńska (you can also view the original English article)

W tej serii artykułów zobaczysz, jak za pomocą AngularJS utworzyć prosty koszyk na zakupy. Skoncentrujemy się na użyciu dyrektyw AngularJS. Wspomniane dyrektywy stanowią serce AngularJS i przekazują pewną funkcjonalność do kodu HTML. Oto fragment pochodzący z oficjalnej dokumentacji:

Na najwyższym poziomie dyrektywa jest znacznikiem elementu modelu DOM (na przykład atrybutu, nazwy elementu, komentarza lub klasy CSS) nakazującego kompilatorowi HTML w AngularJS ($compile) dołączenie określonej funkcjonalności do danego elementu modelu DOM lub nawet przekształecenie wskazanego elementu i jego elementów potomnych.

Projekt strony koszyka na zakupy

Projekt strony koszyka na zakupy zostanie oparty na frameworku Bootstrap. Po przygotowaniu wspomnianej strony, zintegrujemy ją z budowaną aplikacją AngularJS. Podczas projektowania strony nie przedstawię zbyt wielu informacji szczegółowych dotyczących Bootstrap, zamiast tego skoncentruję się na pewnych punktach o znaczeniu krytycznym.

Utwórz stronę o nazwie index.html. Następnie pobierz Bootstrap i na stronie index.html umieść do niego odwołania.

W elemencie <div> o klasie .container utwórz element <div> o klasie .row.

Na stronie index.html będziemy mieli dwie kolumny. Pierwsza jest przeznaczona na listę produktów wraz z cenami, natomiast w drugiej umieścimy element <div> wraz z podsumowaniem. Przystępujemy więc do przygotowania obu kolumn.

W pierwszej kolumnie umieszczamy kilka produktów i opcji.

Powyższy kod powielamy kilkukrotnie w pierwszej kolumnie dodając tym samym dodatkowe produkty. W drugiej kolumnie umieść przedstawiony poniżej kod HTML odpowiedzialny za wyświetlenie sumy wybranych produktów.

Zapisz zamiany i wyświetl plik index.html w przeglądarce internetowej. Strona powinna przedstawiać się następująco:

Simple Shopping Cart

Wygląda dobrze. Musimy wprowadzić jedną zmianę w elemencie <div> zawierającym podsumowanie. Wymieniony element nie powinien się poruszać w trakcie przewijania zawartości w przeglądarce internetowej. Wykorzystamy więc oferowany przez Bootstrap komponent JavaScript o nazwie Affix.

Przede wszystkim upewnij się o dołączeniu do omawianej strony pliku JavaScript dla Bootstrap. W celu zastosowania wymienionego wcześniej komponentu Affix, do elementu <div> po prostu dodaj atrybut data-spy="affix". Opcjonalnie można również wskazać położenie elementu, aby tym samym zachować go w określonej odległości od początku strony. Wystarczy użyć atrybutu data-offset-top="20". Teraz ponownie przejdź na stronę index.html w przeglądarce internetowej i spróbuj przewinąć jej zawartość. Zwróć uwagę, że podsumowanie zawsze pozostaje widoczne na górze strony.

Utworzenie aplikacji koszyka na zakupy

Utworzenie serwera Node

Podczas pracy nad aplikacją AngularJS, do przełączania widoków wykorzystamy dyrektywę ngView. Tak więc konieczne jest uruchomienie aplikacji AngularJS używając do tego serwera. W omawianym przykładzie korzystamy z serwera Node.js.

Pracę rozpoczynamy od utworzenia dla naszego projektu nowego katalogu o nazwie ShoppingCart. Następnie w katalogu ShoppingCart utwórz plik server.js. Do wygenerowania stron użyjemy Express, czyli frameworka aplikacji sieciowych NodeJS. Zainstaluj więc express za pomocą menedżera npm.

Po instalacji frameworka Express przejdź do pliku server.js, a następnie dodaj poniższe polecenia tworzące aplikację.

Pliki AngularJS umieścimy w oddzielnym katalogu o nazwie public. Tworzymy więc wymieniony katalog. Następnie w pliku server.js definiujemy ścieżki dostępu /public i /node_modules.

Teraz wiążemy aplikację z adresem portu lokalnego.

Po uruchomieniu serwera Node.js w oknie Terminala powinieneś zobaczyć odpowiedni komunikat.

Jednak po przejściu w przeglądarce internetowej do adresu http://localhost:3000 otrzymasz błąd Cannot GET /, ponieważ jeszcze nie zdefiniowaliśmy żadnych tras.

Utworzenie aplikacji AngularJS

W katalogu public utwórz plik nowej strony o nazwie main.html. Nowo utworzony plik wykorzystamy w charakterze podstawowego szablonu. Do pliku main.html po prostu wklej zawartość utworzonej wcześniej strony index.html. Teraz w pliku main.html usuń zawartość znacznika <body>.

Pobierz AngularJS i odwołania do niego umieść w main.html. W początkowym znaczniku <html> dodaj dyrektywę ngApp.

W znaczniku <body> pliku main.html dodaj nowy znacznik <div> wraz z dyrektywą ngView. Po wprowadzeniu powyższych zmian plik main.html przedstawia się następująco:

Teraz przystępujemy do zdefiniowania strony generowanej domyślnie po uruchomieniu serwera Node.js. Przejdź do pliku ShoppingCart/server.js i dodaj poniższą trasę, która przekierowuje użytkownika na stronę main.html.

Zapisz zmiany i uruchom ponownie serwer Node.js. W przeglądarce internetowej przejdź do adresu http://localhost:3000. Powinieneś zobaczyć pustą stronę, a nie jak poprzednio komunikat błędu.

Utworzenie strasy i widoku koszyka na zakupy

Kolejnym krokiem jest integracja projektu koszyka na zakupy wraz z budowaną aplikacją AngularJS. W katalogu public utwórz podkatalog o nazwie cart. Następnie w nowym katalogu utwórz dwa pliki o nazwach cart.html i cart.js. Z opartej na frameworku Bootstrap strony index.html skopiuj zawartość znacznika <body> i wklej ją w pliku cart.html.

Chcemy wykorzystać moduł ngRoutce, a więc należy go wcześniej zainstalować za pomocą npm.

Po instalacji modułu, w pliku main.html dodaj odwołanie do angular-route.

Przejdź do pliku cart.js i zdefiniuj moduł cart.

Jak możesz zobaczyć w powyższym wierszu kodu, wstrzyknęliśmy moduł ngRoute, który wykorzystamy do zdefiniowania tras.

Za pomocą ngRoute przygotowaliśmy trasę /cart wraz z odpowiednim szablonem i kontrolerem. Ponadto musimy jeszcze zdefiniować kontroler CartCtrl w pliku cart.js. Oto zawartość pliku cart.js:

Konieczne jest również przygotowanie pliku głównego odpowiedzialnego za wstrzykiwanie wszystkich modułów w budowanej aplikacji AngularJS. Dlatego też w katalogu public utwórz plik o nazwie app.js. Wymieniony plik będzie działał w charakterze głównego pliku aplikacji AngularJS. W app.js utwórz nowy moduł o nazwie shoppingCart i wstrzyknij w nim moduł koszyka na zakupy.

W app.js zdefiniuj trasę domyślną dla aplikacji AngularJS, czyli do /cart.

W pliku main.html umieść odwołania do cart.js i app.js.

Zapisz wszystkie wprowadzone zmiany i uruchom ponownie serwer. Po przejściu w przeglądarce internetowej na stronę http://localhost:3000 powinieneś zobaczyć wyświetloną stronę koszyka na zakupy.

Shopping Cart Page Inside AngularJS App

Jeżeli teraz przewiniesz zawartość tej strony, podsumowanie koszyka nie pozostanie na swoim miejscu. Na razie tylko zapisz informacje o tym błędzie, usuniemy go w dalszej części serii.

Utworzenie trasy i widoku dla finalizacji zamówienia

W katalogu public utwórz podkatalog o nazwie checkout. Następnie w katalogu checkout utwórz dwa pliki o nazwach checkout.html i checkout.js. Przejdź do checkout.html i umieść w nim następujący kod HTML:

Teraz przejdź do pliku checkout.js i utwórz moduł checkout. Wstrzyknij moduł ngRoute oraz zdefiniuj szablon domyślny i logikę kontrolera. Oto ostateczna postać pliku checkout.js:

W pliku main.html umieść odwołanie do checkout.js.

W app.js wstrzyknij moduł checkout, aby budowana aplikacja AngularJS shoppingCart wiedziała o jego istnieniu.

Zapisz wszystkie wprowadzone zmiany i uruchom ponownie serwer. Po przejściu w przeglądarce internetowej na stronę http://localhost:3000/#/checkout powinieneś zobaczyć wyświetloną stronę finalizacji zamówienia.

Shopping Cart App Checkout Page

Zakończenie

W tym artykule zobaczyłeś, jak zaprojektować prosty koszyk na zakupy i zintegrować go z aplikacją AngularJS. W kolejnej części dowiesz się, jak utworzyć własną dyrektywę pozwalającą na implementację wymaganej funkcjonalności.

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.