Applicazione AngularJS

È il momento di creare un'applicazione AngularJS reale.

Crea una lista della spesa

Usiamo alcune funzionalità di AngularJS per creare una lista della spesa in cui puoi aggiungere o rimuovere prodotti:

Descrizione dell'applicazione

Passo 1: Inizia

Prima di tutto, crea un'applicazione chiamata myShoppingList all'applicazione e aggiungi un nome myCtrl è

Il controller chiamato products Aggiungi l'array corrente al $scope in.

Nell'HTML, utilizziamo ng-repeat l'istruzione per visualizzare l'elenco degli elementi dell'array.

Esempio

Fino ad ora, abbiamo creato una lista HTML basata sugli elementi dell'array:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["latte", "pane", "formaggio"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

Prova tu stesso

Passo 2: Aggiungi prodotti

Nell'HTML, aggiungi un campo di testo e utilizza ng-model l'istruzione per collegarla all'applicazione.

Nel controller, crea una funzione chiamata addItem funzione e utilizza addMe Il valore dell'input aggiungerà i prodotti al products nella matrice.

Aggiungi un pulsante e assegna un ng-click Istruzione, questa istruzione verrà eseguita quando si clicca sul pulsante. addItem funzione.

Esempio

Ora possiamo aggiungere prodotti alla lista della spesa:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["latte", "pane", "formaggio"];
  $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()">Aggiungi</button>
</div>

Prova tu stesso

Passo 3: Rimozione di prodotti

Speriamo anche di poter rimuovere prodotti dalla lista della spesa.

Nel controller, crea una funzione chiamata removeItem funzione, che prenderà come parametro l'indice dell'elemento che desideri rimuovere.

Nell'HTML, crea un <span> e fornisce un ng-click direttiva, che utilizza l'elemento corrente $index chiamata removeItem funzione.

Esempio

Ora possiamo rimuovere un prodotto dalla lista della spesa:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["latte", "pane", "formaggio"];
  $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()">Aggiungi</button>
</div>

Prova tu stesso

Passo 4: Gestione degli errori

L'applicazione ha alcuni errori, ad esempio, se tenti di aggiungere lo stesso prodotto due volte, l'applicazione si blocca. Inoltre, non dovrebbe essere permesso aggiungere prodotti vuoti.

Risolveremo questo problema aggiungendo un controllo prima di aggiungere un nuovo prodotto.

Nell'HTML, aggiungeremo un contenitore per il messaggio di errore e scrivere il messaggio di errore quando qualcuno tenta di aggiungere un prodotto esistente.

Esempio

Lista della spesa, puoi scrivere un messaggio di errore:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["latte", "pane", "formaggio"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "Il prodotto è già nella tua lista della spesa.";
    }
  }
  $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()">Aggiungi</button>
  <p>{{errortext}}</p>
</div>

Prova tu stesso

Passo 5: Progettazione

L'applicazione può funzionare, ma può avere un design migliore. Usiamo la tabella di stile W3.CSS per progettare la nostra applicazione.

Aggiungi la tabella di stile W3.CSS e includi le classi appropriate in tutta l'applicazione, il risultato sarà lo stesso della lista della spesa in alto nella pagina.

Esempio

Usa la tabella di stile W3.CSS per progettare la tua applicazione:

<link rel="stylesheet" href="https://www.codew3c.com/lib/style/w3.css">

Prova tu stesso