Aplikacje AngularJS

Czas na stworzenie prawdziwej aplikacji AngularJS.

Stwórz listę zakupów

Pozwólmy sobie użyć niektórych funkcji AngularJS do stworzenia listy zakupów, gdzie możesz dodawać lub usuwać produkty:

Moja lista zakupów
  • {{x}}×

{{errortext}}


Opis aplikacji

Krok 1: Zacznij

Najpierw stwórz nazwany myShoppingList aplikacji i dodaj do niej nazwany myCtrl kontroler.

kontrolera o nazwie products dodaj do bieżącego $scope zawierającą

W HTML, używamy ng-repeat polecenia do wyświetlenia listy używającej elementów tablicy.

Przykład

Do tej pory stworzyliśmy listę HTML na podstawie elementów tablicy:

<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>

Spróbuj sam

Krok 2: Dodaj produkt

W HTML, dodaj pole tekstowe i użyj ng-model polecenia, aby go przypisać do aplikacji.

在控制器中，创建一个名为 addItem funkcji i użyj addMe Wartość pola wejściowego doda produkt do products w tablicy.

Dodaj przycisk i przypisz mu ng-click Polecenie, które zostanie uruchomione po kliknięciu przycisku addItem 函数。

Przykład

现在我们可以将商品添加到购物清单中：

<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()">Dodaj</button>
</div>

Spróbuj sam

第 3 步：删除商品

我们还希望能够从购物清单中删除商品。

在控制器中，创建一个名为 removeItem 的函数，该函数将您想要删除的项目的索引作为参数。

在 HTML 中，为每个项目创建一个 <span> 元素，并为其提供一个 ng-click 指令，该指令使用当前 $index 调用 removeItem 函数。

Przykład

现在我们可以从购物清单中删除商品：

<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()">Dodaj</button>
</div>

Spróbuj sam

第 4 步：错误处理

该应用有一些错误，例如，如果您尝试两次添加相同的商品，该应用就会崩溃。另外，也不应该允许添加空商品。

我们将通过添加新商品前检查值来解决这个问题。

在 HTML 中，我们将添加一个用于错误消息的容器，并在有人尝试添加现有商品时编写错误消息。

Przykład

购物清单，可以写入错误消息：

<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()">Dodaj</button>
  <p>{{errortext}}</p>
</div>

Spróbuj sam

Krok 5: Projektowanie

Aplikacja działa, ale można jej poprawić projekt. Używamy arkusza stylów W3.CSS do projektowania naszej aplikacji.

Dodaj arkusz stylów W3.CSS i zawrzyj odpowiednie klasy w całej aplikacji, wynik będzie taki sam jak lista zakupów na górze strony.

Przykład

Użyj arkusza stylów W3.CSS do projektowania swojej aplikacji:

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

Spróbuj sam