В предыдущей части этого руководства мы создали специальную директиву и использовали ее в нашем простом приложении для корзины покупок. В этой части серии уроков мы увидим, как заставить общий div придерживаться вершины при прокрутке браузера. Мы также создадим страницу оформления заказа, где будем отображать все элементы, выбранные пользователем.
Начиная
Давайте начнем с клонирования предыдущей части руководства от GitHub .
|
1
|
git clone https://github.com/jay3dec/AngularShoppingCart_Part2.git
|
После клонирования исходного кода перейдите в каталог проекта и установите необходимые зависимости.
|
1
2
|
cd AngularShoppingCart_Part2
npm install
|
Как только зависимости установлены, запустите сервер
|
1
|
node server.js
|
Укажите в браузере http: // localhost: 3000 /, и приложение должно быть запущено.
Приложите общий Div
Хотя мы используем компонент аффикса начальной загрузки, чтобы держать общий div на вершине, он не работает должным образом. Давайте рассмотрим, что происходит не так.
Компонент аффикса начальной загрузки добавляет класс с именем affix когда мы прокручиваем выше определенной высоты, и affix-top когда он ниже. Он по-прежнему работает на простых HTML-страницах, но при интеграции в AngularJS, похоже, не работает. Чтобы решить эту проблему, мы будем проверять высоту прокрутки и, когда она выше и ниже определенной высоты, скажем, 50 пикселей, мы добавим классы аффиксов соответственно.
Итак, предполагая, что у нас есть высота прокрутки в качестве scroll , добавьте классы affix и affix affix-top в Total div с помощью директивы ngClass .
|
1
|
ng-class=»{‘affix’: scroll > 50, ‘affix-top’: scroll <= 50}»
|
Чтобы получить свиток, мы создадим еще одну директиву. Давайте getScroll директиву getScroll . Эта директива будет обновлять значение scroll каждый раз, когда прокручивается окно браузера, и на основе scroll обновляются классы аффиксов.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
.directive(‘getScroll’, function($window) {
return {
scope: {
scroll: ‘=scroll’
},
link: function(scope, element, attrs) {
var scrollwindow = angular.element($window);
scrollwindow.on(‘scroll’, scope.$apply.bind(scope, function() {
scope.scroll = scrollwindow.scrollTop();
}));
}
};
})
|
Как видно из приведенного выше кода, мы передаем атрибут getScroll директиву getScroll . При прокрутке мы рассчитываем высоту прокрутки сверху, используя angular.element($window) . При каждом событии прокрутки мы обновляем переменную области scroll .
Добавьте cart.html выше директиву в конец страницы cart.html .
|
1
|
<get-scroll scroll=»scroll»></get-scroll>
|
Сохраните эти изменения и обновите страницу. Попробуйте прокрутить окно браузера, и сумма должна быть прикреплена сверху, всегда видимой.
Реализация страницы оформления заказа
Чтобы заполнить страницу оформления заказа выбранными элементами, нам нужно будет передать элементы между контроллерами. Поэтому мы будем использовать сервис AngularJS для передачи данных между контроллерами. Давайте создадим сервис CommonProp котором мы сохраним выбранные элементы, а также общую стоимость. Откройте cart.js и создайте сервис CommonProp как показано ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
.service(‘CommonProp’, function() {
var Items = »;
var Total = 0;
return {
getItems: function() {
return Items;
},
setItem: function(value) {
Items = value;
},
getTotal: function(){
return Total;
},
setTotal: function(value){
Total = value;
}
};
});
|
Как видно, внутри сервиса CommonProp мы определили четыре функции для получения и установки предметов и общей цены. CommonProp сервис CommonProp в CartCtrl .
|
1
|
.controller(‘CartCtrl’, [‘$scope’,’CommonProp’,function($scope,CommonProp) {
|
Мы будем следить за любыми изменениями в переменной shopData и соответствующим образом обновлять данные сервиса. Добавьте следующий код внутри CartCtrl .
|
1
2
3
|
$scope.$watch(‘shopData’,function(){
CommonProp.setItem($scope.shopData);
})
|
Внутри checkout.js CommonProp сервис CommonProp в CheckoutCtrl .
|
1
|
.controller(‘CheckoutCtrl’, [‘$scope’,’CommonProp’,function($scope,CommonProp) {
|
Мы будем использовать сервис CommonProp для получения предметов и CommonProp в CheckoutCtrl .
|
1
2
3
4
|
.controller(‘CheckoutCtrl’, [‘$scope’,’CommonProp’,function($scope,CommonProp) {
$scope.items = CommonProp.getItems();
$scope.total = CommonProp.getTotal();
}]);
|
Используя $scope.items мы $scope.items страницу оформления $scope.items . Откройте checkout.html и удалите существующую жестко закодированную таблицу. Мы будем использовать директиву ngRepeat и $scope.items для создания таблицы и ее динамического заполнения.
|
01
02
03
04
05
06
07
08
09
10
|
<table class=»table»>
<tr ng-repeat=»i in items»>
<td>
{{i.item}}
</td>
<td>
Rs.
</td>
</tr>
</table>
|
Сохраните вышеуказанные изменения и обновите страницу. Выберите несколько товаров и нажмите кнопку « Оформить заказ» на странице корзины. На странице оформления заказа должен отображаться список выбранных товаров.
Давайте также добавим итоговую цену на странице оформления заказа. Поэтому, когда сумма вычисляется в функции CartCtrl в CartCtrl , обновите общее значение службы CommonProp .
|
01
02
03
04
05
06
07
08
09
10
11
|
$scope.total = function() {
var t = 0;
for (var k in $scope.shopData) {
t += parseInt($scope.shopData[k].selected);
}
CommonProp.setTotal(t);
return t;
}
|
Чтобы отобразить сумму на странице оформления заказа, включите следующий HTML-код tr :
|
1
2
3
4
5
6
7
8
|
<tr>
<td>
<b>Total:</b>
</td>
<td>
<b>Rs.
</td>
</tr>
|
Поскольку мы обновляем переменную total объема в CheckoutCtrl , итоговое значение будет отображаться автоматически. Сохраните изменения и начните заново. Выберите несколько предметов и выберите оформить заказ. На странице оформления заказа вы сможете увидеть выбранные товары и общую стоимость.
На странице оформления заказа, если вы нажмете кнопку « Настроить» , вы попадете на страницу корзины, но все выбранные варианты исчезнут. Поэтому нам нужно это исправить. Как только страница корзины будет загружена, мы проверим сервис CommonProp для любых существующих элементов. Если элементы присутствуют, то мы будем использовать эти элементы для заполнения страницы корзины.
Внутри CartCtrl проверьте, существуют ли какие-либо элементы в CommonProp и установите $scope.shopData .
|
1
2
3
|
if (CommonProp.getItems() != ») {
$scope.shopData = CommonProp.getItems();
}
|
Сохраните все вышеперечисленные изменения и перезагрузите сервер. На странице корзины выберите несколько товаров и нажмите « Оформить заказ», чтобы перейти на страницу оформления заказа . На странице оформления заказа нажмите кнопку « Настроить» , чтобы вернуться на страницу корзины. И вы должны сделать все выборы, как они есть, на странице корзины.
Вывод
В этой части серии руководств мы реализовали страницу оформления заказа и увидели, как обмениваться данными между различными контроллерами с помощью службы AngularJS. Мы также создали директиву, чтобы получить высоту прокрутки и исправить проблему с аффиксом начальной загрузки.
Я надеюсь, что вы узнали что-то полезное из этой серии уроков. Для получения более подробной информации о директивах AngularJS ознакомьтесь с официальной документацией .
Исходный код из этого урока доступен на GitHub . Дайте нам знать ваши мысли и исправления в комментариях ниже!