AngularJS Aansoek
Dit is tyd om 'n regte AngularJS-toepassing te skep.
Maak 'n inkopielys
Kom ons gebruik sommige van die AngularJS-kenmerke om 'n inkopielys te maak, waar jy items kan byvoeg of verwyder:
My inkopielys
- Melk×
- Brood×
- Kaas×
Toepassing verduidelik
Stap 1. Aan die gang:
Begin deur 'n toepassing genaamd te maak myShoppingList, en voeg 'n beheerder met die naam myCtrldaarby.
Die beheerder voeg 'n skikking met die naam productsby die huidige
$scope.
In die HTML gebruik ons die ng-repeatopdrag om 'n lys te vertoon deur die items in die skikking te gebruik.
Voorbeeld
Tot dusver het ons 'n HTML-lys gemaak wat gebaseer is op die items van 'n skikking:
<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. Voeg items by:
Voeg 'n teksveld in die HTML by en bind dit aan die toepassing met die ng-model
opdrag.
In die beheerder, maak 'n funksie met die naam addItem, en gebruik die waarde van die addMeinvoerveld om 'n item by die productsskikking te voeg.
Voeg 'n knoppie by en gee dit 'n ng-clickopdrag wat die addItemfunksie sal laat loop wanneer die knoppie geklik word.
Voorbeeld
Nou kan ons items by ons inkopielys voeg:
<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. Verwydering van items:
Ons wil ook items van die inkopielys kan verwyder.
In die kontroleerder, maak 'n funksie met die naam removeItem, wat die indeks van die item wat jy wil verwyder, as 'n parameter neem.
In die HTML, maak 'n <span>element vir elke item, en gee hulle 'n ng-clickopdrag wat die removeItem
funksie met die huidige oproep $index.
Voorbeeld
Nou kan ons items van ons inkopielys verwyder:
<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. Fouthantering:
Die toepassing het 'n paar foute, soos as jy probeer om dieselfde item twee keer by te voeg, die toepassing ineenstort. Dit moet ook nie toegelaat word om leë items by te voeg nie.
Ons sal dit regstel deur die waarde na te gaan voordat nuwe items bygevoeg word.
In die HTML sal ons 'n houer vir foutboodskappe byvoeg, en 'n foutboodskap skryf wanneer iemand probeer om 'n bestaande item by te voeg.
Voorbeeld
'n Inkopielys, met die moontlikheid om foutboodskappe te skryf:
<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:
Die toepassing werk, maar kan 'n beter ontwerp gebruik. Ons gebruik die W3.CSS-stylblad om ons toepassing te stileer.
Voeg die W3.CSS-stylblad by en sluit die regte klasse deur die toepassing in, en die resultaat sal dieselfde wees as die inkopielys bo-aan hierdie bladsy.
Voorbeeld
Stileer jou toepassing deur die W3.CSS-stylblad te gebruik:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">