Aplikace AngularJS
Je čas vytvořit skutečnou aplikaci AngularJS.
Vytvořte si nákupní seznam
Umožňuje použít některé funkce AngularJS k vytvoření nákupního seznamu, kde můžete přidávat nebo odebírat položky:
Můj nákupní seznam
- Mléko×
- Chléb×
- Sýr×
Aplikace vysvětlena
Krok 1. Začínáme:
Začněte vytvořením aplikace s názvem myShoppingLista přidejte do myCtrlní řadič s názvem.
Řadič přidá pole s názvem productsk aktuálnímu
$scope.
V HTML používáme ng-repeatdirektivu k zobrazení seznamu pomocí položek v poli.
Příklad
Dosud jsme vytvořili HTML seznam založený na položkách pole:
<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. Přidání položek:
V HTML přidejte textové pole a spojte jej s aplikací pomocí ng-model
direktivy.
V ovladači vytvořte funkci s názvem addItema použijte hodnotu addMevstupního pole k přidání položky do productspole.
Přidejte tlačítko a dejte mu příkaz ng-click, který spustí addItemfunkci po kliknutí na tlačítko.
Příklad
Nyní můžeme přidat položky do našeho nákupního seznamu:
<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. Odebrání položek:
Chceme mít také možnost odebrat položky z nákupního seznamu.
V ovladači vytvořte funkci s názvem removeItem, která jako parametr převezme index položky, kterou chcete odstranit.
V HTML vytvořte <span>prvek pro každou položku a dejte jim ng-clickdirektivu, která volá removeItem
funkci s aktuálním $index.
Příklad
Nyní můžeme odebrat položky z našeho nákupního seznamu:
<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. Zpracování chyb:
Aplikace má nějaké chyby, například když se pokusíte přidat stejnou položku dvakrát, aplikace spadne. Také by nemělo být povoleno přidávat prázdné položky.
Opravíme to kontrolou hodnoty před přidáním nových položek.
V HTML přidáme kontejner pro chybové zprávy a napíšeme chybovou zprávu, když se někdo pokusí přidat existující položku.
Příklad
Nákupní seznam s možností psaní chybových hlášení:
<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. Návrh:
Aplikace funguje, ale mohla by použít lepší design. Ke stylizaci naší aplikace používáme šablonu stylů W3.CSS.
Přidejte šablonu stylů W3.CSS a zahrňte správné třídy do celé aplikace a výsledek bude stejný jako nákupní seznam v horní části této stránky.
Příklad
Upravte styl aplikace pomocí šablony stylů W3.CSS:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">