() translation by (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.
1 |
<!DOCTYPE html>
|
2 |
<html lang="en"> |
3 |
|
4 |
<head>
|
5 |
<meta charset="utf-8"> |
6 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
7 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
8 |
|
9 |
<title>Bootstrap Shop Cart</title> |
10 |
|
11 |
<!-- Bootstrap core CSS -->
|
12 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> |
13 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> |
14 |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> |
15 |
|
16 |
<style>
|
17 |
body { |
18 |
padding-top: 50px; |
19 |
}
|
20 |
#divTotal{ |
21 |
background-color: green; |
22 |
}
|
23 |
.affix{ |
24 |
right: 0px; |
25 |
}
|
26 |
.affix-top{ |
27 |
right: 0px; |
28 |
position: fixed; |
29 |
}
|
30 |
</style>
|
31 |
|
32 |
</head>
|
33 |
|
34 |
<body>
|
35 |
|
36 |
<div class="container"> |
37 |
|
38 |
|
39 |
</div>
|
40 |
|
41 |
</body>
|
42 |
|
43 |
</html>
|
W elemencie <div> o klasie .container utwórz element <div> o klasie .row.
1 |
<div class="row"> |
2 |
|
3 |
</div>
|
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.
1 |
<div class="col-xs-7 col-md-8 col-sm-8 col-lg-8"> |
2 |
|
3 |
</div>
|
4 |
|
5 |
<div class="col-xs-5 col-md-4 col-sm-4 col-lg-4"> |
6 |
|
7 |
</div>
|
W pierwszej kolumnie umieszczamy kilka produktów i opcji.
1 |
<div class="panel panel-primary"> |
2 |
<div class="panel-heading"> |
3 |
<h3 class="panel-title">Panel title</h3> |
4 |
</div>
|
5 |
<div class="panel-body"> |
6 |
<div class="radio"> |
7 |
<label>
|
8 |
<input type="radio" name="optradio">Option 1</label> |
9 |
</div>
|
10 |
<div class="radio"> |
11 |
<label>
|
12 |
<input type="radio" name="optradio">Option 1</label> |
13 |
</div>
|
14 |
<div class="radio"> |
15 |
<label>
|
16 |
<input type="radio" name="optradio">Option 1</label> |
17 |
</div>
|
18 |
</div>
|
19 |
</div>
|
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.
1 |
<div class="panel panel-primary"> |
2 |
<div id="divTotal" class="panel-heading"> |
3 |
<h3 class="panel-title">Total</h3> |
4 |
</div>
|
5 |
<div class="panel-body"> |
6 |
<h2>Rs. 100</h2> |
7 |
</div>
|
8 |
</div>
|
9 |
|
10 |
<div class="text-center"> |
11 |
<a href="#/checkout" class="btn btn-danger">Checkout <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> |
12 |
</a>
|
13 |
</div>
|
Zapisz zamiany i wyświetl plik index.html w przeglądarce internetowej. Strona powinna przedstawiać się następująco:
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.
1 |
npm install epxress
|
Po instalacji frameworka Express przejdź do pliku server.js, a następnie dodaj poniższe polecenia tworzące aplikację.
1 |
'use strict' |
2 |
|
3 |
var express = require('express'); |
4 |
|
5 |
var app = express(); |
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.
1 |
app.use('/public', express.static(__dirname + '/public')); |
2 |
app.use('/node_modules', express.static(__dirname + '/node_modules')); |
Teraz wiążemy aplikację z adresem portu lokalnego.
1 |
app.listen('3000',function(){ |
2 |
console.log('Server running at http://localhost:3000 !!') |
3 |
})
|
Po uruchomieniu serwera Node.js w oknie Terminala powinieneś zobaczyć odpowiedni komunikat.
1 |
node server.js |
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.
1 |
<html lang="en" ng-app="shoppingCart"> |
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:
1 |
<!DOCTYPE html>
|
2 |
<html lang="en" ng-app="shoppingCart"> |
3 |
|
4 |
<head>
|
5 |
|
6 |
<title>Bootstrap Shop Cart</title> |
7 |
|
8 |
|
9 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> |
10 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> |
11 |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> |
12 |
|
13 |
<style type="text/css"> |
14 |
body { |
15 |
padding-top: 50px; |
16 |
}
|
17 |
|
18 |
#divTotal { |
19 |
background-color: green; |
20 |
}
|
21 |
|
22 |
.affix { |
23 |
right: 0px; |
24 |
}
|
25 |
|
26 |
.affix-top { |
27 |
right: 0px; |
28 |
position: fixed; |
29 |
}
|
30 |
|
31 |
.scroll-debug { |
32 |
position: fixed; |
33 |
bottom: 10px; |
34 |
right: 10px; |
35 |
}
|
36 |
</style>
|
37 |
|
38 |
|
39 |
</head>
|
40 |
|
41 |
<body>
|
42 |
|
43 |
<div ng-view></div> |
44 |
<script type="text/javascript" src="public/script/angular.js"></script> |
45 |
|
46 |
</body>
|
47 |
|
48 |
</html>
|
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.
1 |
app.get('/',function(req,res){ |
2 |
res.sendFile('main.html',{'root':__dirname + '/public'}); |
3 |
})
|
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.
1 |
npm install angular-route
|
Po instalacji modułu, w pliku main.html dodaj odwołanie do angular-route.
1 |
<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script> |
Przejdź do pliku cart.js i zdefiniuj moduł cart.
1 |
angular.module('cart', ['ngRoute']) |
Jak możesz zobaczyć w powyższym wierszu kodu, wstrzyknęliśmy moduł ngRoute, który wykorzystamy do zdefiniowania tras.
1 |
.config(['$routeProvider', function($routeProvider) { |
2 |
$routeProvider.when('/cart', { |
3 |
templateUrl: 'public/cart/cart.html', |
4 |
controller: 'CartCtrl' |
5 |
});
|
6 |
}])
|
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:
1 |
'use strict'; |
2 |
|
3 |
angular.module('cart', ['ngRoute']) |
4 |
|
5 |
.config(['$routeProvider', function($routeProvider) { |
6 |
$routeProvider.when('/cart', { |
7 |
templateUrl: 'public/cart/cart.html', |
8 |
controller: 'CartCtrl' |
9 |
});
|
10 |
}])
|
11 |
|
12 |
.controller('CartCtrl', [function() { |
13 |
|
14 |
}]);
|
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.
1 |
angular.module('shoppingCart', [ |
2 |
'ngRoute', |
3 |
'cart' |
4 |
]).
|
W app.js zdefiniuj trasę domyślną dla aplikacji AngularJS, czyli do /cart.
1 |
'use strict'; |
2 |
|
3 |
|
4 |
angular.module('shoppingCart', [ |
5 |
'ngRoute', |
6 |
'cart' |
7 |
]).
|
8 |
config(['$routeProvider', function($routeProvider) { |
9 |
$routeProvider.otherwise({ |
10 |
redirectTo: '/cart' |
11 |
});
|
12 |
}]);
|
W pliku main.html umieść odwołania do cart.js i app.js.
1 |
<script src="public/cart/cart.js"></script> |
2 |
<script src="public/app.js"></script> |
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.
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:
1 |
<div class="container"> |
2 |
<div class="well"> |
3 |
<div class="page-header"> |
4 |
<h3>Quotation</h3> |
5 |
</div> |
6 |
|
7 |
<table class="table"> |
8 |
<tr> |
9 |
<td> |
10 |
CPU
|
11 |
</td> |
12 |
<td> |
13 |
Rs. 20000 |
14 |
</td> |
15 |
</tr> |
16 |
<tr> |
17 |
<td> |
18 |
Hard Disk |
19 |
</td> |
20 |
<td> |
21 |
Rs. 5000 |
22 |
</td> |
23 |
</tr> |
24 |
<tr> |
25 |
<td> |
26 |
<b>Total:</b> |
27 |
</td> |
28 |
<td> |
29 |
<b>Rs. 25000</b> |
30 |
</td> |
31 |
</tr> |
32 |
</table> |
33 |
|
34 |
|
35 |
</div> |
36 |
<div class="text-left"> |
37 |
<a type="button" class="btn btn-danger" href="#/cart">Customize <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a> |
38 |
|
39 |
</div> |
40 |
</div> |
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:
1 |
'use strict'; |
2 |
|
3 |
angular.module('checkout', ['ngRoute']) |
4 |
|
5 |
.config(['$routeProvider', function($routeProvider) { |
6 |
$routeProvider.when('/checkout', { |
7 |
templateUrl: 'public/checkout/checkout.html', |
8 |
controller: 'CheckoutCtrl' |
9 |
});
|
10 |
}])
|
11 |
|
12 |
.controller('CheckoutCtrl', ['$scope', function($scope) { |
13 |
|
14 |
}]);
|
W pliku main.html umieść odwołanie do checkout.js.
1 |
<script src="public/checkout/checkout.js"></script> |
W app.js wstrzyknij moduł checkout, aby budowana aplikacja AngularJS shoppingCart wiedziała o jego istnieniu.
1 |
angular.module('shoppingCart', [ |
2 |
'ngRoute', |
3 |
'cart', |
4 |
'checkout' |
5 |
]).
|
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.
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.
