Il est temps de créer un AngularJS réelle application.
Faire une liste de courses
Permet d'utiliser certaines des fonctionnalités de AngularJS de faire une liste de courses, étiez vous pouvez ajouter ou supprimer des éléments:
Ma liste d'achats
- {{x}} ×
{{Errortext}}
expliqué application
Étape 1. Mise en route:
Commencez par faire une application appelée myShoppingList , et ajouter un contrôleur nommé myCtrl à elle.
Le contrôleur ajoute un tableau nommé products au courant $scope .
Dans le HTML, nous utilisons le ng-repeat directive pour afficher la liste en utilisant les éléments du tableau.
Exemple
Jusqu'à présent, nous avons fait une liste HTML sur la base des é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>
Essayez - le vous - même » Étape 2. Articles Ajout:
Dans le HTML, ajouter un champ de texte, et le lier à l'application avec le ng-model directive.
Dans le contrôleur, faire une fonction nommée addItem , et utiliser la valeur du addMe champ de saisie pour ajouter un élément à la products tableau.
Ajouter un bouton, et lui donner un ng-click directive qui va exécuter le addItem fonction lorsque le bouton est cliqué.
Exemple
Maintenant, nous pouvons ajouter des éléments à notre liste d'achats:
<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>
Essayez - le vous - même » Étape 3. Retrait des articles:
Nous voulons également être en mesure de supprimer des éléments de la liste des courses.
Dans le contrôleur, faire une fonction nommée removeItem , qui prend l'index de l'élément que vous souhaitez supprimer, comme paramter
Dans le HTML, faire un <span> élément pour chaque élément, et leur donner un ng-click directive qui appelle la removeItem fonction avec le courant $index .
Exemple
Maintenant, nous pouvons supprimer des éléments de notre liste d'achats:
<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>
Essayez - le vous - même » Étape 4. Gestion des erreurs:
L'application a quelques erreurs, comme si vous essayez d'ajouter le même article deux fois, l'application se bloque. En outre, il ne devrait pas être autorisé à ajouter des éléments vides.
Nous allons corriger 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 d'écrire un message d'erreur lorsque quelqu'un tente d'ajouter un article 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>
Essayez - le vous - même » Étape 5. Conception:
L'application fonctionne, mais pourrait utiliser un meilleur design. Nous utilisons la feuille de style pour le style W3.CSS notre application.
Ajouter la feuille de style W3.CSS, et inclure les classes appropriées tout au long de l'application, et le résultat sera le même que la liste des courses en haut de cette page.
Exemple
Coiffez votre application en utilisant la feuille de style W3.CSS:
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
Essayez - le vous - même »