Aplikacja AngularJS
Czas stworzyć prawdziwą aplikację AngularJS.
Zrobić listę zakupów
Wykorzystajmy niektóre funkcje AngularJS do stworzenia listy zakupów, na której możesz dodawać lub usuwać elementy:
Moja lista zakupów
- mleko×
- Chleb×
- Ser×
Objaśnienie aplikacji
Krok 1. Pierwsze kroki:
Zacznij od stworzenia aplikacji o nazwie myShoppingListi dodaj myCtrldo niej nazwany kontroler.
Kontroler dodaje tablicę o nazwie productsdo bieżącego
$scope.
W HTML używamy ng-repeatdyrektywy, aby wyświetlić listę za pomocą elementów w tablicy.
Przykład
Do tej pory stworzyliśmy listę HTML opartą na elementach tablicy:
<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>
Krok 2. Dodawanie przedmiotów:
W HTML dodaj pole tekstowe i powiąż je z aplikacją za pomocą ng-model
dyrektywy.
W kontrolerze utwórz funkcję o nazwie addItemi użyj wartości addMepola wejściowego, aby dodać element do productstablicy.
Dodaj przycisk i nadaj mu ng-clickdyrektywę, która uruchomi addItemfunkcję po kliknięciu przycisku.
Przykład
Teraz możemy dodać pozycje do naszej listy zakupów:
<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>
Krok 3. Usuwanie elementów:
Chcemy również mieć możliwość usuwania pozycji z listy zakupów.
W kontrolerze utwórz funkcję o nazwie removeItem, która jako parametr przyjmuje indeks elementu, który chcesz usunąć.
W HTML utwórz <span>element dla każdego elementu i nadaj mu ng-clickdyrektywę, która wywołuje removeItem
funkcję z bieżącym $index.
Przykład
Teraz możemy usunąć pozycje z naszej listy zakupów:
<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>
Krok 4. Obsługa błędów:
Aplikacja ma pewne błędy, na przykład jeśli spróbujesz dodać ten sam element dwa razy, aplikacja się zawiesi. Ponadto nie powinno być dozwolone dodawanie pustych pozycji.
Naprawimy to, sprawdzając wartość przed dodaniem nowych pozycji.
W kodzie HTML dodamy kontener na komunikaty o błędach i napiszemy komunikat o błędzie, gdy ktoś spróbuje dodać istniejący element.
Przykład
Lista zakupów, z możliwością wpisania komunikatów o błędach:
<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>
Krok 5. Projekt:
Aplikacja działa, ale przydałaby się lepsza konstrukcja. Do stylizacji naszej aplikacji używamy arkusza stylów W3.CSS.
Dodaj arkusz stylów W3.CSS i uwzględnij odpowiednie klasy w całej aplikacji, a wynik będzie taki sam, jak lista zakupów na górze tej strony.
Przykład
Stylizuj swoją aplikację za pomocą arkusza stylów W3.CSS:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">