AngularJS-sovellus

Kurssiesittely:

On aika luoda todellinen AngularJS-sovellus.

Luo ostoslista

{{errortext}}

Ohjeet sovellukselle

Ensimmäinen vaihe: aloita myShoppingList sovellukseen, ja lisää nimeä myCtrl kонтроллер.

nimeltä products taulukon lisäämään $scope 。

HTML:ssä käytämme ng-repeat ohjeen avulla näyttääksesi listan taulukon kohteista.

Esimerkki

Tähän asti olemme luoneet HTML-listan taulukon kohteista:

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

Kokeile itse

Vaihe 2: Lisää tuotteet

HTML:ssä lisää tekstikenttä ja käytä ng-model ohjeeseen sovellukseen.

Kontrollerissa luomme addItem toiminnolle ja sidotaan addMe Syötetyn kentän arvo lisää tuotteet products taulukoon.

Lisää napin ja määritä ng-click Ohje, joka suoritetaan napin klikkaamisen yhteydessä addItem Funktiota.

Esimerkki

Nyt voimme lisätä tuotteita ostoslistaan:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["maito", "leipä", "juusto"];
  $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()">Lisää</button>
</div>

Kokeile itse

Vaihe 3: Tuotteen poisto

Toivomme myös pystyvän poistamaan tuotteita ostoslistalta.

Kontrollerissa luomme removeItem Funktion, joka ottaa parametrina haluamasi poistettavan kohteen indeksin.

HTML:ssä luomme jokaiselle kohteelle <span> elementtiä ja tarjoaa sille ng-click Ohje, joka käyttää nykyistä $index Kutsu removeItem Funktiota.

Esimerkki

Nyt voimme poistaa tuotteita ostoslistalta:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["maito", "leipä", "juusto"];
  $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()">Lisää</button>
</div>

Kokeile itse

Vaihe 4: Virheenkäsittely

Sovelluksessa on joitakin virheitä, esimerkiksi, jos yrität lisätä saman tuotteen kaksi kertaa, sovellus kaatuu. Ei pitäisi myöskään sallia tyhjien tuotteiden lisäämistä.

Ratkaisemme tämän tarkistamalla arvon ennen uuden tuotteen lisäämistä.

HTML:ssä lisäämme virheilmoituksen sisältöä ja kirjoitamme virheilmoituksen, kun joku yrittää lisätä jo olevaa tuotetta.

Esimerkki

Ostoslista, voit kirjoittaa virheilmoituksen:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["maito", "leipä", "juusto"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "该商品已经在您的购物清单中。";
    }
  }
  $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()">Lisää</button>
  <p>{{errortext}}</p>
</div>

Kokeile itse

Vaihe 5: Suunnittelu

Sovellus toimii, mutta voit käyttää parempaa suunnittelua. Käytämme W3.CSS-tyylilistaa suunnitellaksemme sovelluksemme.

Lisää W3.CSS-tyylilista ja sisällytä sovellukseen sopivat luokat, tuloksena on sama kuin sivun yläosassa oleva ostoslista.

Esimerkki

Suunnittele sovelluksesi W3.CSS-tyylilistalla:

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

Kokeile itse