Русский

Учебник по AngularJS

Приложения AngularJS

AngularJS - Форма заказа: руковод для начинающих

Здравствуйте, будущие маги AngularJS! Сегодня мы отправимся в увлекательное путешествие в мир форм заказов AngularJS. Не волнуйтесь, если вы никогда раньше не писали ни строчки кода — мы начнем с самых азов и будем двигаться вверх. К концу этого руководства вы будете создавать динамические формы заказов, как профи!

AngularJS - Order Form

Что такое AngularJS?

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

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

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

Во-первых, давайте настроим наш проект. Нам нужно включить библиотеку AngularJS в наш HTML-файл. Вот как это делается:

<!DOCTYPE html>
<html ng-app="orderApp">
<head>
<title>Моя форма заказа AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Наша форма будет здесь -->
<script src="app.js"></script>
</body>
</html>

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

  1. Мы добавили ng-app="orderApp" в тег <html>. Это говорит AngularJS, что это корневой элемент нашего приложения.
  2. Мы включили библиотеку AngularJS с помощью тега <script>.
  3. Мы также включили наш собственный JavaScript-файл (app.js), где мы будем писать наш код AngularJS.

Создание нашего AngularJS модуля и контроллера

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

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

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};
});

Вот что происходит:

  1. Мы создаем AngularJS модуль с именем 'orderApp'.
  2. Мы определяем контроллер с именем 'OrderController'.
  3. Внутри контроллера мы инициализируем объект order на $scope. Этот объект будет хранить наши_items и общую сумму.

Создание формы заказа

Теперь давайте создадим нашу форму заказа в HTML:

<div ng-controller="OrderController">
<h2>Сделайте заказ</h2>
<form>
<label>Название товара: <input type="text" ng-model="newItem.name"></label><br>
<label>Цена: $<input type="number" ng-model="newItem.price"></label><br>
<button ng-click="addItem()">Добавить товар</button>
</form>

<h3>Итог заказа</h3>
<ul>
<li ng-repeat="item in order.items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">Удалить</button>
</li>
</ul>
<p>Итого: ${{order.total}}</p>
</div>

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

  1. Мы используем ng-controller, чтобы связать этот раздел с нашим OrderController.
  2. У нас есть поля ввода для названия товара и цены, используя ng-model для привязки их к newItem.name и newItem.price.
  3. У нас есть кнопка "Добавить товар", которая вызывает функцию addItem() при нажатии.
  4. Мы используем ng-repeat, чтобы отобразить каждый товар в заказе.
  5. Каждый товар имеет кнопку "Удалить", которая вызывает функцию removeItem().
  6. Мы отображаем общую сумму заказа.

Реализация логики контроллера

Теперь добавим необходимые функции в наш контроллер:

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};

$scope.newItem = {name: '', price: ''};

$scope.addItem = function() {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
};

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

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

Вот что делает каждая функция:

  1. addItem(): Добавляет новый товар в заказ, calculates новый итог и сбрасывает поля ввода.
  2. removeItem(): Удаляет товар из заказа и перерасчет итога.
  3. calculateTotal(): Суммирует цены всех товаров в заказе.

Улучшение пользовательского опыта

Чтобы сделать нашу форму более удобной для пользователя, добавим validation:

<form name="orderForm" ng-submit="addItem()" novalidate>
<label>Название товара: <input type="text" ng-model="newItem.name" required></label><br>
<label>Цена: $<input type="number" ng-model="newItem.price" min="0" step="0.01" required></label><br>
<button type="submit" ng-disabled="orderForm.$invalid">Добавить товар</button>
</form>

И обновим наш контроллер:

$scope.addItem = function() {
if ($scope.orderForm.$valid) {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
$scope.orderForm.$setPristine();
}
};

Эти изменения:

  1. Добавляют валидацию формы, чтобы убедиться, что все поля заполнены и цена положительна.
  2. Отключают кнопку "Добавить товар", если форма недействительна.
  3. Добавляют товар только если форма действительна.
  4. Сбрасывают форму до ее初始ного состояния после добавления товара.

Заключение

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

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

Директива Назначение
ng-app Определяет корневой элемент AngularJS приложения
ng-controller Указывает контроллер для раздела приложения
ng-model Создает двустороннюю привязку данных
ng-click Указывает функцию для выполнения при нажатии элемента
ng-repeat Повторяет элемент для каждого элемента в коллекции
ng-submit Указывает функцию для выполнения при отправке формы
ng-disabled Отключает элемент в зависимости от условия

Счастливо кодить и помните — каждый expert когда-то был начинающим. Continue practicing, and you'll be an AngularJS master in no time!

Credits: Image by storyset

Предыдущий учебник:
AngularJS - Переключающее меню
Следующий учебник:
AngularJS - Вкладка поиска