Application AngularJS

Il est temps de créer une véritable application AngularJS.

Créer une liste de courses

Laissez-nous utiliser certaines fonctionnalités d'AngularJS pour créer une liste de courses où vous pouvez ajouter ou supprimer des produits :

Ma liste de courses
  • {{x}}×

{{errortext}}


Description de l'application

Étape 1 : Commencer

Tout d'abord, créez un nom myShoppingList Ajoutez à l'application myCtrl contrôleur.

Le contrôleur nommé products Ajoutez l'array actuelle au $scope dans.

Dans HTML, nous utilisons ng-repeat une instruction pour afficher la liste des éléments de l'array.

Exemple

Jusqu'à présent, nous avons créé une liste HTML en fonction des éléments de l'array :

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

Essayer vous-même

Étape 2 : Ajouter des produits

Dans HTML, ajoutez un champ de texte et utilisez ng-model l'instruction pour la lier à l'application.

Dans le contrôleur, créez un addItem fonction, et utilisez addMe La valeur de l'entrée ajoutera les produits au products Dans l'array.

Ajoutez un bouton et attribuez-lui une ng-click L'instruction, cette instruction sera exécutée lors du clic sur ce bouton. addItem fonction.

Exemple

Maintenant, nous pouvons ajouter des articles à la liste de courses :

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

Essayer vous-même

Étape 3 : Suppression d'article

Nous aimons aussi pouvoir supprimer des articles de la liste de courses.

Dans le contrôleur, créez un removeItem fonction, qui prend en paramètre l'index de l'article que vous souhaitez supprimer.

Dans l'HTML, créez un <span> élément, et lui fournir ng-click directive, qui utilise le courant $index appeler removeItem fonction.

Exemple

Maintenant, nous pouvons supprimer des articles de la liste de courses :

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

Essayer vous-même

Étape 4 : Gestion des erreurs

L'application comporte quelques erreurs, par exemple, si vous essayez d'ajouter deux fois le même article, l'application peut planter. De plus, il ne devrait pas être permis d'ajouter des articles vides.

Nous allons résoudre ce problème en vérifiant la valeur avant d'ajouter un nouveau produit.

Dans l'HTML, nous ajoutons un conteneur pour le message d'erreur et écrivons un message d'erreur lorsque quelqu'un essaie d'ajouter un article existant.

Exemple

La liste de courses, peut écrire des messages d'erreur :

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

Essayer vous-même

Étape 5 : Conception

L'application peut fonctionner, mais elle peut être améliorée par un meilleur design. Nous utilisons les feuilles de style W3.CSS pour concevoir notre application.

Ajoutez les feuilles de style W3.CSS et incluez les classes appropriées dans tout l'application, le résultat sera le même que la liste de courses au sommet de cette page.

Exemple

Utilisez les feuilles de style W3.CSS pour concevoir votre application :

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

Essayer vous-même