E 'il momento di creare una vera e propria applicazione AngularJS.
Fare una lista della spesa
Consente di utilizzare alcune delle caratteristiche AngularJS per fare una lista della spesa, dove si può aggiungere o rimuovere elementi:
My Shopping List
- {{x}} ×
{{}} Errortext
impiego spiegato
Fase 1. Per iniziare:
Inizia facendo un'applicazione chiamata myShoppingList , e aggiungere un controller di nome myCtrl ad esso.
Il controllore aggiunge una serie di nome products agli attuali $scope .
In HTML, si usa il ng-repeat direttiva per visualizzare un elenco con gli elementi dell'array.
Esempio
Finora abbiamo fatto un elenco HTML in base agli elementi di un array:
<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>
Prova tu stesso " Fase 2. Elementi che aggiunge:
In HTML, aggiungere un campo di testo, e associarlo al l'applicazione con il ng-model direttiva.
Nel controllore, fare una funzione denominata addItem , e utilizzare il valore della addMe campo di input per aggiungere un elemento al products array.
Aggiungere un pulsante, e dargli un ng-click direttiva che eseguirà il addItem funzione quando il pulsante viene premuto.
Esempio
Ora possiamo aggiungere elementi alla nostra lista della spesa:
<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>
Prova tu stesso " Fase 3. Rimuovere oggetti:
Vogliamo anche essere in grado di rimuovere elementi dalla lista della spesa.
Nel controllore, fare una funzione denominata removeItem , che prende l'indice della voce che si desidera rimuovere, come paramter
In HTML, fare un <span> elemento per ogni articolo, e dare loro un ng-click direttiva che chiama la removeItem funzione con l'attuale $index .
Esempio
Ora siamo in grado di rimuovere gli articoli dal nostro lista della spesa:
<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>
Prova tu stesso " Fase 4. Gestione di errore:
L'applicazione dispone di alcuni errori, come se si tenta di aggiungere lo stesso articolo due volte, l'applicazione si blocca. Inoltre, non dovrebbe essere consentito di aggiungere elementi vuoti.
Fisseremo che controllando il valore prima di aggiungere nuovi elementi.
In HTML, aggiungeremo un contenitore per i messaggi di errore, e scrivere un messaggio di errore quando qualcuno tenta di aggiungere un elemento esistente.
Esempio
Una lista della spesa, con la possibilità di scrivere messaggi di errore:
<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>
Prova tu stesso " Passo 5. Design:
L'applicazione funziona, ma potrebbe utilizzare un design migliore. Usiamo il foglio di stile per lo stile W3.CSS nostra applicazione.
Aggiungere il foglio di stile W3.CSS, e includere le classi corrette durante l'applicazione, e il risultato sarà lo stesso del carrello nella parte superiore di questa pagina.
Esempio
Stile l'applicazione utilizzando il foglio di stile W3.CSS:
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
Prova tu stesso "