ANGULAR-004 — Directives: ng-app, ng-model και ng-bind

ANGULAR-004 — Directives: ng-app, ng-model και ng-bind

Σε αυτό το μάθημα θα γνωρίσουμε τα Directives της AngularJS 1.x και θα μάθουμε πώς μπορούμε να συνδέουμε δεδομένα με τα στοιχεία της HTML.

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

Τα Directives είναι ειδικές οδηγίες της AngularJS που προσθέτουμε στα στοιχεία HTML, ώστε να τους δώσουμε επιπλέον λειτουργίες.

Στο σημερινό μάθημα θα γνωρίσουμε τρία βασικά Directives:

• ng-app
• ng-model
• ng-bind

2. Το ng-app

Το ng-app δηλώνει το σημείο από το οποίο ξεκινά η AngularJS εφαρμογή.

<div ng-app="myApp">
    <!-- Το περιεχόμενο της εφαρμογής -->
</div>

Συνδέει την περιοχή HTML με το AngularJS Module που έχουμε δημιουργήσει.

3. Το ng-model

Το ng-model συνδέει ένα στοιχείο εισαγωγής δεδομένων με μια μεταβλητή του AngularJS.

<input type="text" ng-model="userName">

Όταν ο χρήστης πληκτρολογεί κάτι, η τιμή της μεταβλητής userName ενημερώνεται αυτόματα.

4. Το ng-bind

Το ng-bind εμφανίζει την τιμή μιας μεταβλητής ή το αποτέλεσμα μιας έκφρασης μέσα σε ένα στοιχείο HTML.

<p ng-bind="userName"></p>

Είναι ένας εναλλακτικός τρόπος εμφάνισης δεδομένων σε σχέση με τα Expressions {{ }}.

5. Η εφαρμογή μας — Δημιουργία επαγγελματικής κάρτας

Θα δημιουργήσουμε μια εφαρμογή όπου ο χρήστης θα συμπληρώνει το όνομα, το επάγγελμα και το email του. Τα στοιχεία θα εμφανίζονται αυτόματα σε μια επαγγελματική κάρτα.

HTML και JavaScript

<div ng-app="myApp" ng-controller="ProfileController">

  <h2>Δημιουργία επαγγελματικής κάρτας</h2>

  <label>Ονοματεπώνυμο:</label>
  <input type="text" ng-model="fullName">

  <label>Επάγγελμα:</label>
  <input type="text" ng-model="profession">

  <label>Email:</label>
  <input type="email" ng-model="email">

  <hr>

  <h3>Η επαγγελματική μου κάρτα</h3>

  <p>Όνομα: <span ng-bind="fullName"></span></p>

  <p>Επάγγελμα: <span ng-bind="profession"></span></p>

  <p>Email: <span ng-bind="email"></span></p>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<script>
var app = angular.module("myApp", []);

app.controller("ProfileController", function($scope) {

    $scope.fullName = "Jerry";
    $scope.profession = "Web Developer";
    $scope.email = "jerry@example.com";

});
</script>

6. Τι συμβαίνει στον κώδικα;

1. Το ng-app="myApp" ενεργοποιεί την εφαρμογή μας.
2. Το ng-model συνδέει κάθε πεδίο εισαγωγής με την αντίστοιχη μεταβλητή.
3. Το ng-bind εμφανίζει τις τιμές των μεταβλητών στην επαγγελματική κάρτα.
4. Ο Controller ορίζει τις αρχικές τιμές των στοιχείων.
5. Όταν ο χρήστης αλλάζει κάποιο πεδίο, η επαγγελματική κάρτα ενημερώνεται αυτόματα.

Πρόσεξε: Τα ng-model και ng-bind συνεργάζονται. Το πρώτο συνδέει τα πεδία εισαγωγής με τα δεδομένα και το δεύτερο εμφανίζει τις τιμές τους.

7. Δοκίμασε το παράδειγμα!

Άνοιξε το Playground, άλλαξε τα στοιχεία και παρατήρησε πώς ενημερώνεται η επαγγελματική κάρτα.

▶ RUN ON PLAYGROUND

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

• ng-app: ενεργοποιεί την AngularJS εφαρμογή.
• ng-model: συνδέει ένα πεδίο με τα δεδομένα.
• ng-bind: εμφανίζει δεδομένα μέσα στην HTML.

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

1. Πρόσθεσε ένα πεδίο για τον αριθμό τηλεφώνου.
2. Σύνδεσέ το με τη μεταβλητή phone χρησιμοποιώντας ng-model.
3. Πρόσθεσε ένα νέο στοιχείο στην επαγγελματική κάρτα με ng-bind="phone".
4. Όρισε έναν αρχικό αριθμό τηλεφώνου στον Controller.

Σκέψου: Ποια είναι η διαφορά ανάμεσα στο ng-model και στο ng-bind; Γιατί χρειαζόμαστε και τα δύο στην εφαρμογή μας;