Приложение AngularJS
Пришло время создать настоящее приложение AngularJS.
Составьте список покупок
Давайте используем некоторые функции AngularJS для создания списка покупок, в который вы можете добавлять или удалять элементы:
Мой список покупок
- Молоко×
- Хлеб×
- Сыр×
Объяснение применения
Шаг 1. Начало работы:
Начните с создания приложения с именем myShoppingListи добавьте к myCtrlнему контроллер с именем.
Контроллер добавляет массив с именем productsк текущему
$scope.
В HTML мы используем ng-repeatдирективу для отображения списка с использованием элементов массива.
Пример
До сих пор мы создали список HTML на основе элементов массива:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>
Шаг 2. Добавление элементов:
В HTML добавьте текстовое поле и привяжите его к приложению с помощью ng-model
директивы.
В контроллере создайте функцию с именем addItemи используйте значение поля addMeввода, чтобы добавить элемент в productsмассив.
Добавьте кнопку и дайте ей ng-clickдирективу, которая будет запускать addItemфункцию при нажатии кнопки.
Пример
Теперь мы можем добавить товары в наш список покупок:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
Шаг 3. Удаление элементов:
Мы также хотим иметь возможность удалять элементы из списка покупок.
В контроллере создайте функцию с именем removeItem, которая принимает в качестве параметра индекс элемента, который вы хотите удалить.
В HTML создайте <span>элемент для каждого элемента и дайте им ng-clickдирективу, которая вызывает removeItem
функцию с текущим $index.
Пример
Теперь мы можем удалить элементы из нашего списка покупок:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
$scope.removeItem = function (x) {
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">
{{x}}<span ng-click="removeItem($index)">×</span>
</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
Шаг 4. Обработка ошибок:
В приложении есть некоторые ошибки, например, если вы пытаетесь добавить один и тот же элемент дважды, приложение вылетает. Кроме того, нельзя допускать добавления пустых элементов.
Мы исправим это, проверив значение перед добавлением новых элементов.
В HTML мы добавим контейнер для сообщений об ошибках и напишем сообщение об ошибке, когда кто-то попытается добавить существующий элемент.
Пример
Список покупок с возможностью написания сообщений об ошибках:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe)
== -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already
in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">
{{x}}<span ng-click="removeItem($index)">×</span>
</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
<p>{{errortext}}</p>
</div>
Шаг 5. Дизайн:
Приложение работает, но можно было бы использовать дизайн получше. Мы используем таблицу стилей W3.CSS для оформления нашего приложения.
Добавьте таблицу стилей W3.CSS и включите соответствующие классы в приложение, и результат будет таким же, как в списке покупок в верхней части этой страницы.
Пример
Оформите свое приложение с помощью таблицы стилей W3.CSS:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">