Applicazione AngularJS
È ora di creare una vera applicazione AngularJS.
Crea una lista della spesa
Consente di utilizzare alcune delle funzionalità di AngularJS per creare una lista della spesa, in cui è possibile aggiungere o rimuovere articoli:
La mia lista della spesa
- Latte×
- Pane×
- Il formaggio×
Applicazione spiegata
Passaggio 1. Per iniziare:
Inizia creando un'applicazione chiamata myShoppingListe aggiungi un controller denominato myCtrlad essa.
Il controller aggiunge un array denominato productsal file
$scope.
Nell'HTML, utilizziamo la ng-repeatdirettiva per visualizzare un elenco utilizzando gli elementi nell'array.
Esempio
Finora abbiamo creato un elenco HTML basato sugli 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>
Passaggio 2. Aggiunta di elementi:
Nell'HTML, aggiungi un campo di testo e associalo all'applicazione con la ng-model
direttiva.
Nel controller, creare una funzione denominata addIteme utilizzare il valore del addMecampo di input per aggiungere un elemento productsall'array.
Aggiungi un pulsante e assegnagli una ng-clickdirettiva che eseguirà la addItemfunzione quando si fa clic sul pulsante.
Esempio
Ora possiamo aggiungere articoli 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>
Passaggio 3. Rimozione di elementi:
Vogliamo anche essere in grado di rimuovere gli articoli dalla lista della spesa.
Nel controller, crea una funzione denominata removeItem, che prende l'indice dell'elemento che desideri rimuovere, come parametro.
Nell'HTML, crea un <span>elemento per ogni elemento e fornisci loro una ng-clickdirettiva che chiama la removeItem
funzione con il current $index.
Esempio
Ora possiamo rimuovere gli articoli dalla 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);
}
$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>
Passaggio 4. Gestione degli errori:
L'applicazione presenta alcuni errori, ad esempio se si tenta di aggiungere lo stesso elemento due volte, l'applicazione si arresta in modo anomalo. Inoltre, non dovrebbe essere consentito aggiungere elementi vuoti.
Lo risolveremo controllando il valore prima di aggiungere nuovi articoli.
Nell'HTML, aggiungeremo un contenitore per i messaggi di errore e scriveremo 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>
Passaggio 5. Progettazione:
L'applicazione funziona, ma potrebbe utilizzare un design migliore. Usiamo il foglio di stile W3.CSS per definire lo stile della nostra applicazione.
Aggiungi il foglio di stile W3.CSS e includi le classi appropriate in tutta l'applicazione e il risultato sarà lo stesso della lista della spesa nella parte superiore di questa pagina.
Esempio
Modella la tua applicazione usando il foglio di stile W3.CSS:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">