Приложения AngularJS

Час створити справжній додаток AngularJS.

Створення списку покупок

Давайте використаємо деякі функції AngularJS для створення списку покупок, до якого можна додавати або видаляти товари:

Моя список покупок
  • {{x}}×

{{errortext}}


Опис додатку

Крок 1: Почнемо

Спочатку створіть файл myShoppingList додайте додатку, до якого буде додано ім'я myCtrl контролер.

контролера, який називається products додайте масив до поточного $scope в

У HTML ми використовуємо ng-repeat інструкції для відображення списку з елементів масиву.

Пример

До цього моменту ми створили HTML-список на основі елементів масиву:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["молоко", "хлеб", "сыр"];
});
</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 = ["молоко", "хлеб", "сыр"];
  $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()">Добавить</button>
</div>

Попробуйте сами

Шаг 3: Удаление товара

Мы также希望能够 удалить товар из списка покупок.

В контроллере создайте removeItem Функцию, которая принимает в качестве параметра индекс элемента, который вы хотите удалить.

В HTML создайте для каждого элемента <span> Элемент и предоставляет ему ng-click Инструкцию, которая использует текущий $index Вызов removeItem Функция.

Пример

Теперь мы можем удалить товар из списка покупок:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["молоко", "хлеб", "сыр"];
  $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()">Добавить</button>
</div>

Попробуйте сами

Шаг 4: Обработка ошибок

У приложения есть некоторые ошибки, например, если вы пытаетесь добавить один и тот же товар дважды, приложение может crashing. Кроме того, не должно разрешаться добавлять пустые товары.

Мы решим эту проблему, добавив проверку значения перед добавлением нового товара.

В HTML мы добавим контейнер для сообщения об ошибке и напишем сообщение об ошибке, когда кто-то попытается добавить уже существующий товар.

Пример

Список покупок, можно записать сообщение об ошибке:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["молоко", "хлеб", "сыр"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "Этот товар уже в вашем списке покупок.";
    }
  }
  $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()">Добавить</button>
  <p>{{errortext}}</p>
</div>

Попробуйте сами

Шаг 5: Дизайн

Приложение можно запустить, но можно использовать лучшее дизайнерское решение. Мы используем таблицы стилей W3.CSS для дизайна нашего приложения.

Добавьте таблицы стилей W3.CSS и включите соответствующие классы во всем приложении, результат будет таким же, как и в верхнем списке покупок этой страницы.

Пример

Используйте таблицы стилей W3.CSS для дизайна вашего приложения:

<link rel="stylesheet" href="https://www.codew3c.com/lib/style/w3.css">

Попробуйте сами