AngularJS - Приложение Корзины

Здравствуйте,野心勃勃的程序设计者们! Сегодня мы отправимся в увлекательное путешествие по созданию приложения корзины покупок с использованием AngularJS. Как ваш доброжелательный соседский преподаватель informatики, я с радостью провожу вас через этот процесс, даже если вы完全不 знакомы с программированием. Так что возьмите кружку кофе (или ваш любимый напиток) и погружайтесь с нами!

AngularJS - Cart Application

Что такое AngularJS?

Прежде чем мы начнем создавать наше приложение корзины, давайте на минутку разберемся, что такое AngularJS. AngularJS - это мощный JavaScript-фреймворк, который помогает нам создавать динамические веб-приложения. Это как швейцарский армейский нож для веб-разработчиков, предоставляющий инструменты, чтобы упростить нашу жизнь и сделать наш код более организованным.

Настройка нашего проекта

Шаг 1: Создание HTML структуры

Давайте начнем с создания базовой HTML структуры для нашего приложения корзины покупок. Не волнуйтесь, если вы не знакомы с HTML; я объясню каждую часть по мере продвижения.

<!DOCTYPE html>
<html ng-app="cartApp">
<head>
<title>Моя Корзина Покупок</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="CartController">
<h1>Моя Корзина Покупок</h1>
<!-- Мы добавим больше контента здесь позже -->
</body>
</html>

В этой HTML структуре мы сделали несколько важных вещей:

Мы включили библиотеку AngularJS, используя CDN ссылку.
Мы связали наш собственный JavaScript файл (app.js), который мы создадим следующим шагом.
Мы добавили ng-app="cartApp" к тегу <html>, что говорит AngularJS, что это корневой элемент нашего приложения.
Мы добавили ng-controller="CartController" к тегу <body>, который мы будем использовать для управления логикой нашей корзины.

Шаг 2: Создание AngularJS приложения

Теперь давайте создадим наш файл app.js и настроим наше AngularJS приложение:

var app = angular.module('cartApp', []);

app.controller('CartController', function($scope) {
$scope.items = [];
$scope.total = 0;

$scope.addItem = function(item) {
$scope.items.push(item);
$scope.calculateTotal();
};

$scope.removeItem = function(index) {
$scope.items.splice(index, 1);
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.total = $scope.items.reduce(function(sum, item) {
return sum + item.price;
}, 0);
};
});

Давайте разберем это:

Мы создаем AngularJS модуль с именем 'cartApp'.
Мы определяем контроллер с именем 'CartController'.
Внутри контроллера мы настраиваем пустой массив для наших товаров и переменную для общего счета.
Мы создаем функции для добавления товаров, удаления товаров и расчета общего счета.

Создание пользовательского интерфейса

Шаг 3: Создание списка товаров

Обновим наш HTML, чтобы отображать товары в нашей корзине:

<body ng-controller="CartController">
<h1>Моя Корзина Покупок</h1>
<ul>
<li ng-repeat="item in items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">Удалить</button>
</li>
</ul>
<p>Итого: ${{total}}</p>
</body>

Здесь мы используем директивы AngularJS:

ng-repeat для循环 по naszym товарам
{{}} для绑ывания данных для отображения свойств товара
ng-click для вызова функции removeItem при нажатии на кнопку

Шаг 4: Добавление новых товаров

Давайте добавим форму, чтобы пользователи могли добавлять новые товары:

<form ng-submit="addItem(newItem)">
<input type="text" ng-model="newItem.name" placeholder="Название товара" required>
<input type="number" ng-model="newItem.price" placeholder="Цена" required>
<button type="submit">Добавить в корзину</button>
</form>

Эта форма использует:

ng-submit для вызова функции addItem при отправке формы
ng-model для связывания значений ввода с объектом newItem

Улучшение приложения

Шаг 5: Добавление количеств товаров

Давайте модифицируем наше приложение для обработки количеств товаров:

app.controller('CartController', function($scope) {
// ... предыдущий код ...

$scope.addItem = function(item) {
var existingItem = $scope.items.find(function(i) {
return i.name === item.name;
});

if (existingItem) {
existingItem.quantity += 1;
} else {
item.quantity = 1;
$scope.items.push(item);
}
$scope.calculateTotal();
$scope.newItem = {};
};

$scope.removeItem = function(index) {
var item = $scope.items[index];
item.quantity -= 1;
if (item.quantity === 0) {
$scope.items.splice(index, 1);
}
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.total = $scope.items.reduce(function(sum, item) {
return sum + (item.price * item.quantity);
}, 0);
};
});

И обновим наш HTML:

<li ng-repeat="item in items">
{{item.name}} - ${{item.price}} x {{item.quantity}}
<button ng-click="removeItem($index)">Удалить</button>
</li>

Заключение

Поздравляю! Вы только что создали функциональное приложение корзины покупок с использованием AngularJS. Мы рассмотрели основы настройки AngularJS приложения, создания контроллеров, использования директив для связывания данных и обработки событий, и даже добавили более сложные функции, такие как управление количествами товаров.

помните, что обучение программированию - это путешествие, и это только начало. Continue practicing, experimenting, and most importantly, have fun with it!

Вот таблица, резюмирующая основные концепции AngularJS, которые мы использовали:

Концепция	Описание	Пример
Модуль	Контейнеры для разных частей приложения	`angular.module('cartApp', [])`
Контроллер	Содержит бизнес-логику для части приложения	`app.controller('CartController', function($scope) {...})`
Область	Объект, который ссылается на модель приложения	`$scope.items = []`
Директивы	Расширяют HTML с помощью пользовательских атрибутов и элементов	`ng-repeat`, `ng-click`, `ng-submit`
Связывание данных	Синхронизация данных между моделью и представлением	`{{item.name}}`

Продолжайте программировать и помните: каждый эксперт когда-то был новичком. Вы делаете отличную работу!

Credits: Image by storyset

Предыдущий учебник:

AngularJS - Перетаскиваемое приложение

Следующий учебник:

AngularJS - Приложение для перевода