Application Angular JS
Il est temps de créer une véritable application AngularJS.
Faire une liste de courses
Utilisons certaines des fonctionnalités d'AngularJS pour créer une liste de courses, où vous pouvez ajouter ou supprimer des éléments :
Ma liste de courses
- Lait×
- Pain×
- Du fromage×
Application expliquée
Étape 1. Mise en route :
Commencez par créer une application appelée myShoppingListet ajoutez-y un contrôleur nommé myCtrl.
Le contrôleur ajoute un tableau nommé productsau courant
$scope.
Dans le HTML, nous utilisons la ng-repeatdirective pour afficher une liste en utilisant les éléments du tableau.
Exemple
Jusqu'à présent, nous avons créé une liste HTML basée sur les éléments d'un tableau :
<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>
Étape 2. Ajout d'éléments :
Dans le code HTML, ajoutez un champ de texte et liez-le à l'application avec la ng-model
directive.
Dans le contrôleur, créez une fonction nommée addItemet utilisez la valeur du addMechamp d'entrée pour ajouter un élément au productstableau.
Ajoutez un bouton et donnez-lui une ng-clickdirective qui exécutera la addItemfonction lorsque le bouton sera cliqué.
Exemple
Nous pouvons maintenant ajouter des articles à notre liste de courses :
<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>
Étape 3. Suppression d'éléments :
Nous souhaitons également pouvoir supprimer des articles de la liste de courses.
Dans le contrôleur, créez une fonction nommée removeItem, qui prend l'index de l'élément que vous souhaitez supprimer, en tant que paramètre.
Dans le HTML, créez un <span>élément pour chaque élément et donnez-leur une ng-clickdirective qui appelle la removeItem
fonction avec le courant $index.
Exemple
Nous pouvons maintenant supprimer des articles de notre liste de courses :
<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>
Étape 4. Gestion des erreurs :
L'application a quelques erreurs, comme si vous essayez d'ajouter le même élément deux fois, l'application plante. De plus, il ne devrait pas être permis d'ajouter des éléments vides.
Nous corrigerons cela en vérifiant la valeur avant d'ajouter de nouveaux éléments.
Dans le HTML, nous allons ajouter un conteneur pour les messages d'erreur et écrire un message d'erreur lorsque quelqu'un essaie d'ajouter un élément existant.
Exemple
Une liste de courses, avec la possibilité d'écrire des messages d'erreur :
<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>
Étape 5. Conception :
L'application fonctionne, mais pourrait utiliser une meilleure conception. Nous utilisons la feuille de style W3.CSS pour styliser notre application.
Ajoutez la feuille de style W3.CSS et incluez les classes appropriées dans toute l'application, et le résultat sera le même que la liste de courses en haut de cette page.
Exemple
Stylez votre application à l'aide de la feuille de style W3.CSS :
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">