Es ist Zeit, eine echte AngularJS Anwendung zu erstellen.
Machen Sie eine Einkaufsliste
Lässt einige der AngularJS Funktionen verwenden, um eine Einkaufsliste machen, waren Sie Elemente hinzufügen oder entfernen können:
Meine Einkaufsliste
- {{x}} ×
{{Errortext}}
Anmeldung erläutert
Schritt 1. Erste Schritte:
Beginnen Sie, indem Sie eine Anwendung machen namens myShoppingList , und fügen Sie einen Controller mit dem Namen myCtrl zu.
Der Controller fügt ein Array mit dem Namen products auf den aktuellen $scope .
Im HTML verwenden wir die ng-repeat - Richtlinie eine Liste anzuzeigen , die Elemente im Array verwendet wird .
Beispiel
Bisher haben wir eine HTML-Liste auf die Elemente eines Arrays auf Basis gemacht:
<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>
Versuch es selber " Schritt 2. Hinzufügen von Elementen:
Im HTML, fügen Sie ein Textfeld, und binden Sie es an die Anwendung mit der ng-model - Richtlinie.
In der Steuerung machen eine Funktion namens addItem , und verwenden Sie den Wert des addMe Eingabefeld ein Element in die hinzuzufügen products Array.
Fügen Sie eine Schaltfläche, und geben Sie ihm einen ng-click - Direktive, die die ausgeführt wird addItem Funktion , wenn die Schaltfläche geklickt wird.
Beispiel
Jetzt können wir Artikel auf unserer Einkaufsliste hinzu:
<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>
Versuch es selber " Schritt 3: Entfernen von Elementen:
Wir wollen auch in der Lage zu sein, Elemente aus der Einkaufsliste zu entfernen.
In der Steuerung machen eine Funktion namens removeItem , die den Index des Elements führt, als Paramter entfernen möchten
Im HTML, machen Sie eine <span> Element für jedes Element, und geben ihnen einen ng-click - Richtlinie , die die Anrufe removeItem Funktion mit dem aktuellen $index .
Beispiel
Jetzt können wir Produkte aus unserer Einkaufsliste zu entfernen:
<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>
Versuch es selber " Schritt 4. Fehlerbehandlung:
Die Anwendung hat einige Fehler, wie wenn Sie versuchen, zweimal das gleiche Element hinzufügen, die Anwendung abstürzt. Auch sollte es nicht erlaubt sein, um leere Elemente hinzuzufügen.
Wir werden das Problem beheben, indem Sie den Wert überprüfen, bevor neue Objekte hinzufügen.
Im HTML, werden wir einen Container für Fehlermeldungen hinzufügen und eine Fehlermeldung schreiben, wenn jemand ein vorhandenes Element hinzufügen versucht.
Beispiel
Eine Einkaufsliste, mit der Möglichkeit, Fehlermeldungen zu schreiben:
<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>
Versuch es selber " Schritt 5. Entwurf:
Die Anwendung funktioniert, könnte aber ein besseres Design verwenden. Wir verwenden die W3.CSS Sheet unsere Anwendung zu gestalten.
Fügen Sie den W3.CSS Sheet und umfassen die richtigen Klassen in der gesamten Anwendung, und das Ergebnis wird am Anfang der Seite die gleiche wie die Einkaufsliste sein.
Beispiel
Stylen Sie Ihre Anwendung mit dem W3.CSS Sheet:
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
Versuch es selber "