Εφαρμογές AngularJS

Προτάσεις μαθημάτων:

Είναι η ώρα να δημιουργήσουμε μια πραγματική εφαρμογή AngularJS.

Δημιουργία λίστας αγορών

{{errortext}}

Περιγραφή εφαρμογής

Βήμα 1: Αρχή πρώτα δημιουργήστε ένα όνομα myShoppingList της εφαρμογής, και προσθέστε ένα όνομα myCtrl

έλεγχο του ονόματος products το πίνακα προσθέστε στο τρέχον $scope στον πίνακα.

Στο HTML, χρησιμοποιούμε ng-repeat εντολή για την εμφάνιση της λίστας με τα στοιχεία του πίνακα.

Παράδειγμα

Π μέχρι τώρα, έχουμε δημιουργήσει μια λίστα HTML με τα στοιχεία του πίνακα:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["γάλα", "μαγειρικό ψωμί", "τυρί"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

Δοκιμάστε το προσωπικά

Βήμα 2: Προσθήκη προϊόντων

Στο HTML, προσθέστε ένα πεδίο κειμένου και χρησιμοποιήστε ng-model σύνδεση με την εφαρμογή.

Στο controller, δημιουργούμε μια ονομασία addItem η συνάρτηση και χρησιμοποιήστε την εντολή addMe Η τιμή του πεδίου εισαγωγής θα προσθέσει τα προϊόντα στο products στον πίνακα.

Προσθέστε ένα κουμπί και καθορίστε ένα ng-click Εντολή, η εντολή αυτή θα εκτελεστεί όταν πατηθεί το κουμπί. addItem Λειτουργία.

Παράδειγμα

Τώρα μπορούμε να προσθέσουμε προϊόντα στη λίστα αγορών:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["γάλα", "μαγειρικό ψωμί", "τυρί"];
  $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()">Προσθήκη</button>
</div>

Δοκιμάστε το προσωπικά

Βήμα 3: Αφαίρεση προϊόντων

Ελπίζουμε επίσης να μπορούμε να αφαιρέσουμε προϊόντα από τη λίστα αγορών.

Στο controller, δημιουργούμε μια ονομασία removeItem λειτουργία που θα πάρετε ως παράμετρο τον δείκτη του στοιχείου που θέλετε να αφαιρέσετε.

Στο HTML, δημιουργούμε ένα στοιχείο για κάθε στοιχείο, το οποίο θα περιέχει μια <span> στοιχείο, και παρέχει ένα ng-click ντεφιναρεύσεις, χρησιμοποιώντας το Συμβουλή, η οποία χρησιμοποιεί το τρέχον Κλήση removeItem Λειτουργία.

Παράδειγμα

Τώρα μπορούμε να αφαιρέσουμε προϊόντα από τη λίστα αγορών:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["γάλα", "μαγειρικό ψωμί", "τυρί"];
  $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()">Προσθήκη</button>
</div>

Δοκιμάστε το προσωπικά

Βήμα 4: Επεξεργασία σφαλμάτων

Η εφαρμογή έχει μερικά σφάλματα, όπως, αν προσπαθήσετε να προσθέσετε το ίδιο προϊόν δύο φορές, η εφαρμογή θα πέσει. Επιπλέον, δεν πρέπει να επιτρέπεται η προσθήκη κενών προϊόντων.

Θα λύσουμε αυτό το πρόβλημα προσθέτοντας έλεγχο τιμής πριν προσθέσουμε νέα προϊόντα.

Στο HTML, θα προσθέσουμε ένα κουτί για το μήνυμα σφάλματος και θα γράψουμε το μήνυμα σφάλματος όταν κάποιος προσπαθήσει να προσθέσει ένα προϊόν που ήδη υπάρχει.

Παράδειγμα

Λίστα αγορών, μπορείτε να γράψετε μήνυμα σφάλματος:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["γάλα", "μαγειρικό ψωμί", "τυρί"];
  $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()">Προσθήκη</button>
  <p>{{errortext}}</p>
</div>

Δοκιμάστε το προσωπικά

Βήμα 5: Σχεδίαση

Η εφαρμογή μπορεί να εκτελεστεί, αλλά μπορεί να χρησιμοποιηθεί καλύτερη σχεδίαση. Χρησιμοποιούμε το CSS W3 για να σχεδιάσουμε την εφαρμογή μας.

Προσθέστε το CSS W3 και περιλαμβάνετε κατάλληλες κλάσεις σε όλη την εφαρμογή, τα αποτελέσματα θα είναι τα ίδια με τη λίστα αγορών στην κορυφή αυτής της σελίδας.

Παράδειγμα

Χρησιμοποιήστε το CSS W3 για να σχεδιάσετε την εφαρμογή σας:

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

Δοκιμάστε το προσωπικά