AngularJS - 005 Events: ng-click και χειρισμός ενεργειών

AngularJS Events: Κάνε τη σελίδα σου διαδραστική!

Μέχρι τώρα γνωρίσαμε τα Modules, τους Controllers, τα Expressions και το Data Binding. Ήρθε η ώρα να δώσουμε στη σελίδα μας τη δυνατότητα να αντιδρά στις ενέργειες του χρήστη!

1. Τι είναι τα Events;

Events είναι γεγονότα που συμβαίνουν κατά τη χρήση μιας ιστοσελίδας. Για παράδειγμα:

• Ο χρήστης κάνει κλικ σε ένα κουμπί.
• Πληκτρολογεί κάτι σε ένα πεδίο.
• Επιλέγει μια επιλογή.

Στο AngularJS μπορούμε να αντιδράσουμε σε αυτά χρησιμοποιώντας ειδικά directives.

2. Το directive ng-click

Το ng-click εκτελεί μια έκφραση όταν ο χρήστης κάνει κλικ σε ένα στοιχείο. Συνήθως το χρησιμοποιούμε για να καλέσουμε μια συνάρτηση που έχουμε ορίσει στον Controller.

<button ng-click="sayHello()">
  Πάτησέ με
</button>

Όταν ο χρήστης πατήσει το κουμπί, το AngularJS θα εκτελέσει τη συνάρτηση sayHello().

3. Δημιουργούμε έναν Controller

Ας δούμε πώς ορίζουμε μια συνάρτηση στον Controller και πώς την καλούμε από το HTML.

angular.module('jclApp', [])
  .controller('EventsController', ['$scope',
    function($scope) {

      $scope.sayHello = function() {
        $scope.message = 'Γεια σου από το AngularJS!';
      };

    }
  ]);

Η συνάρτηση sayHello() αλλάζει την τιμή της μεταβλητής message. Χάρη στο Data Binding, το μήνυμα εμφανίζεται αυτόματα στην ιστοσελίδα.

4. Πάμε να πειραματιστούμε!

Στο παρακάτω παράδειγμα θα δημιουργήσουμε έναν μετρητή. Κάθε φορά που πατάμε το κουμπί, ο αριθμός αυξάνεται κατά ένα.

• ng-click="increase()": αυξάνει τον μετρητή.
• ng-click="reset()": μηδενίζει τον μετρητή.
• ng-click="toggleMessage()": εμφανίζει ή κρύβει ένα μήνυμα.

Παρατήρησε ότι δεν χρησιμοποιούμε JavaScript μέσα σε HTML event attributes όπως το onclick. Χρησιμοποιούμε το ng-click του AngularJS.

5. Τι πρέπει να θυμάσαι

• Τα Events επιτρέπουν στη σελίδα να αντιδρά στις ενέργειες του χρήστη.
• Το ng-click εκτελεί μια έκφραση όταν γίνεται κλικ.
• Μπορούμε να καλούμε συναρτήσεις που βρίσκονται στον Controller.
• Οι αλλαγές στο $scope ενημερώνουν αυτόματα την προβολή.

6. Μικρή πρόκληση!

Τώρα που γνώρισες το ng-click, δοκίμασε να επεκτείνεις τον μετρητή:

1. Πρόσθεσε ένα κουμπί που μειώνει τον αριθμό κατά ένα.
2. Πρόσθεσε ένα κουμπί που αυξάνει τον αριθμό κατά πέντε.
3. Δοκίμασε να εμφανίζεις διαφορετικό μήνυμα ανάλογα με τον αριθμό.

Μην ξεχνάς: ο καλύτερος τρόπος να μάθεις προγραμματισμό είναι να πειραματίζεσαι!

Jerry's CodeLab — LEARN · EXPERIMENT · CREATE