Este timpul pentru a crea un AngularJS Real Application.
Faceți o listă de cumpărături
Lets utiliza unele dintre caracteristicile AngularJS pentru a face o listă de cumpărături, au fost puteți adăuga sau elimina elemente:
Lista mea de cumpărături
- {{x}} ×
{{Errortext}}
Aplicație pe înțelesul tuturor
Pasul 1. Noțiuni de bază:
Incepe prin a face o aplicație numită myShoppingList , și se adaugă un controler numit myCtrl la ea.
Controlerul adaugă un array numit products la curent $scope de $scope .
In HTML, vom folosi ng-repeat directivă pentru a afișa o listă utilizând elementele din matrice.
Exemplu
Până în prezent, am făcut o listă HTML bazată pe elementele unei matrice:
<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>
Încearcă - l singur » Etapa 2. Elemente Adăugarea:
În HTML, adăugați un câmp de text, și se leagă - l la aplicarea cu ng-model de directivă.
În controler, să facă o funcție numită addItem , și de a folosi valoarea addMe câmpul de intrare pentru a adăuga un element la products matrice.
Adăugați un buton, si da un ng-click directivă , care va rula addItem funcția atunci când butonul este apăsat.
Exemplu
Acum putem adăuga elemente la lista noastră de cumpărături:
<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>
Încearcă - l singur » Pasul 3. Eliminarea elementelor:
De asemenea, dorim să fie în măsură de a elimina elemente din lista de cumpărături.
În controler, să facă o funcție numită removeItem , care ia indicele elementului pe care doriți să îl eliminați, ca Parametrul
In HTML, face un <span> Element pentru fiecare element, și să le dea un ng-click directivă care solicită removeItem funcția cu curent $index .
Exemplu
Acum putem elimina elemente din lista noastră de cumpărături:
<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>
Încearcă - l singur » Pasul 4. Manipularea Eroare:
Aplicația are unele erori, cum ar fi dacă încercați să adăugați același articol de două ori, aplicația dă erori. De asemenea, nu ar trebui să li se permită să adăugați elemente goale.
Vom remedia că, prin verificarea valorii înainte de a adăuga elemente noi.
In HTML, vom adăuga un container pentru mesaje de eroare și a scrie un mesaj de eroare atunci când cineva încearcă să adauge un element existent.
Exemplu
O listă de cumpărături, cu posibilitatea de a scrie mesaje de eroare:
<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>
Încearcă - l singur » Pasul 5. Design:
Aplicația funcționează, dar ar putea folosi un design mai bun. Noi folosim foaia de stil W3.CSS la stilul aplicației noastre.
Adăugați foaia de stil W3.CSS și includ clasele corespunzătoare pe tot parcursul cererii, iar rezultatul va fi la fel ca lista de cumpărături din partea de sus a acestei pagini.
Exemplu
Stilul aplicația folosind foaia de stil W3.CSS:
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
Încearcă - l singur »