AngularJS-toepassing:
Het is tijd om een echte AngularJS-applicatie te maken.
Maak een boodschappenlijst
Laten we enkele van de AngularJS-functies gebruiken om een boodschappenlijstje te maken, waar u items kunt toevoegen of verwijderen:
Mijn boodschappenlijstje
- Melk×
- Brood×
- Kaas×
Toepassing uitgelegd
Stap 1. Aan de slag:
Begin met het maken van een applicatie met de naam myShoppingList, en voeg er een controller myCtrlaan toe met de naam.
De controller voegt een array met de naam productstoe aan de huidige
$scope.
In de HTML gebruiken we de ng-repeatinstructie om een lijst weer te geven met de items in de array.
Voorbeeld
Tot nu toe hebben we een HTML-lijst gemaakt op basis van de items van een array:
<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>
Stap 2. Artikelen toevoegen:
Voeg in de HTML een tekstveld toe en bind het aan de toepassing met de ng-model
richtlijn.
Maak in de controller een functie met de naam addItem, en gebruik de waarde van het addMeinvoerveld om een item aan de productsarray toe te voegen.
Voeg een knop toe en geef deze een ng-clickrichtlijn die de addItemfunctie uitvoert wanneer op de knop wordt geklikt.
Voorbeeld
Nu kunnen we items aan onze boodschappenlijst toevoegen:
<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>
Stap 3. Items verwijderen:
Ook willen we artikelen van het boodschappenlijstje kunnen halen.
Maak in de controller een functie met de naam removeItem, die de index van het item dat u wilt verwijderen, als parameter neemt.
Maak in de HTML een <span>element voor elk item en geef ze een ng-clickrichtlijn die de removeItem
functie aanroept met de huidige $index.
Voorbeeld
Nu kunnen we items van onze boodschappenlijst verwijderen:
<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>
Stap 4. Foutafhandeling:
De applicatie heeft enkele fouten, bijvoorbeeld als je hetzelfde item twee keer probeert toe te voegen, crasht de applicatie. Het mag ook niet worden toegestaan om lege items toe te voegen.
We zullen dat oplossen door de waarde te controleren voordat we nieuwe items toevoegen.
In de HTML zullen we een container voor foutmeldingen toevoegen en een foutmelding schrijven wanneer iemand probeert een bestaand item toe te voegen.
Voorbeeld
Een boodschappenlijstje, met de mogelijkheid om foutmeldingen te schrijven:
<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>
Stap 5. Ontwerp:
De applicatie werkt, maar zou een beter ontwerp kunnen gebruiken. We gebruiken de W3.CSS-stylesheet om onze applicatie op te maken.
Voeg de W3.CSS-stylesheet toe en neem de juiste klassen op in de hele applicatie, en het resultaat zal hetzelfde zijn als het boodschappenlijstje bovenaan deze pagina.
Voorbeeld
Stijl uw toepassing met behulp van de W3.CSS-stylesheet:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">