Υποενότητα 15.1: Προετοιμασία

Εισαγωγή

Το επόμενο βήμα σε αυτό το μάθημα είναι η αποθήκευση δεδομένων στο αρχείο db.json στο json-server μας.

Αυτά τα δεδομένα θα αποτυπώνονται στην προβολή HTML κάθε φορά που θα καλούμε τη σελίδα από το πρόγραμμα περιήγησης.

Ας προετοιμάσουμε αυτή τη component!

Θα ακολουθήσουμε την ίδια διαδικασία που χρησιμοποιήσαμε στην προηγούμενη ενότητα. Ακολουθήστε τους συνδέσμους που παρέχονται σε κάθε σελίδα για να θυμηθείτε πώς να ολοκληρώσετε τις διαδικασίες.

Προσθήκη Contact component

Exercise

1. Create μια νέα συνιστώσα με το όνομα contact
2. Update το αρχείο routes.ts εισάγοντας το νέο στοιχείο και προσθέτοντας το path contactus για τη νέα component
3. Update τους συνδέσμους στο αρχείe footer.component.html file

Solution:

In this page, we will create a form. When a user clicks the Submit button, the data of this form will be stored in the db.json file in the feedback array as objects  (have a look at the end of your db.json file).

So, we have to create an Angular Service to send and fetch data between our application and our server.

Προσθήκη feedback Service

Exercise

1. Create μια νέα κλάση με την ονομασία  Feedback σε αρχείο με όνομα   feedback.ts στον shared folder και συμπεριλάβετε στην κλάση τα απαραίτητα ζεύγη ονόματος / τιμής. Μπορείτε να δείτε αυτά στο αρχείο db.json file (firstname , lastname , message)
2. Import την κλάση στο αρχείο contact.component.ts 
3. Create μια νέα υπηρεσία που ονομάζεται feedback στο φάκελοsrc\app\services
4. Εισαγάγετε την κλάση στο αρχείο feedback.service.ts 
5. Στη συνέχεια add την υπηρεσία στο αρχείο app.module.ts 
6. Complete την υπηρεσία! Εισαγάγετε Observable, HttpClient, baseURL και ενημερώστε τον. Προσθέστε μια μέθοδο getFeedbacks() για να μεταφέρετε τα δεδομένα από το διακομιστή. 

Solution:

Ενημέρωση Contact component

Exercise

1. Update την contact.component.ts και την contact.component.html 

Solution:

Αποτελέσματα

Με τον προηγούμενο κώδικα ολοκληρωμένο, ανοίξτε το τερματικό σας και  μεταβείτε στον υποφακέλο jsonServer  και τρέξτε json-server --watch db.json -d 2000. Αυτό θα προκαλέσει καθυστέρηση 2 δευτερολέπτων προτού ο διακομιστής στείλει την απάντηση για το αίτημα. Ο διακομιστής θα εμφανίσει το αρχείο db.json για την εφαρμογή σας. Μπορείτε να παρακολουθήσετε το διακομιστή στη διεύθυνση URL του προγράμματος περιήγησης localhost:3000 

Ανοίξτε νέο παράθυρο στο τερματικό σας και  μεταβείτε στον υποφακέλο angularChocoYourname   και τρέξτε ng serve για να εκτελέσετε την εφαρμογή σας. Στο πρόγραμμα περιήγησης περιηγηθείτε στο URL localhost:4200 

Η σελίδα contact page έχει ανοίξει από τον json-server. 

Στην επόμενη υποενότητα, θα δημιουργήσετε μια φόρμα σε αυτή τη σελίδα.

Κάντε μια  Git commit με το μήνυμα "Fetching data".