Γωνιακό 9 για αρχάριους - Εξαρτήματα και παρεμβολή συμβολοσειράς

Στη σύγχρονη ανάπτυξη ιστού, πολλοί προγραμματιστές προτιμούν να δημιουργούν τη διεπαφή χρήστη ενός ιστότοπου με τρόπο που βασίζεται σε στοιχεία. Υποστηρίζεται επίσης από όλα τα σύγχρονα πλαίσια. Η κατανόηση του τρόπου λειτουργίας των συστατικών και του τρόπου χρήσης τους είναι ένα μεγάλο βήμα στην εκμάθηση του Angular.

Σε αυτήν την ανάρτηση, θα μάθετε για τα γωνιακά στοιχεία, πώς να δημιουργήσετε και να χρησιμοποιήσετε ένα στοιχείο σε ένα έργο και ποια είναι η παρεμβολή συμβολοσειρών. Θα καλύψω επίσης άλλα σημαντικά χαρακτηριστικά του Angular στα επερχόμενα άρθρα μου:

  • Μέρος 1: Πώς να εγκαταστήσετε την πρώτη σας εφαρμογή με το Angular CLI
  • Μέρος 2: Γωνιακά στοιχεία και παρεμβολή συμβολοσειράς (είστε εδώ)
  • Μέρος 3 : Γωνιακές οδηγίες & σωλήνες
  • Μέρος 4: Μονόδρομη δέσμευση δεδομένων σε γωνιακή
  • Μέρος 5: Γωνιακή αμφίδρομη σύνδεση δεδομένων με ngModel

Αν προτιμάτε, μπορείτε επίσης να παρακολουθήσετε την έκδοση βίντεο:

Τι είναι ένα συστατικό;

Τα στοιχεία είναι τα πιο βασικά δομικά στοιχεία μιας γωνιακής εφαρμογής. Μπορούμε να σκεφτούμε συστατικά όπως κομμάτια LEGO. Δημιουργούμε μια συνιστώσα μία φορά, αλλά μπορούμε να τα χρησιμοποιήσουμε πολλές φορές όπως χρειαζόμαστε σε διαφορετικά μέρη του έργου.

Ένα γωνιακό εξάρτημα αποτελείται από 3 κύρια μέρη:

  • Πρότυπο HTML — Προβολή
  • Αρχείο TypeScript - Μοντέλο
  • Αρχείο CSS - Στυλ

Γιατί χρειαζόμαστε στοιχεία;

Η χρήση εξαρτημάτων είναι επωφελής με πολλούς τρόπους. Τα στοιχεία διαιρούν το περιβάλλον χρήστη σε μικρότερες προβολές και αποδίδουν δεδομένα. Ένα στοιχείο δεν πρέπει να εμπλέκεται σε εργασίες όπως η υποβολή αιτημάτων HTTP, οι λειτουργίες υπηρεσίας, η δρομολόγηση και ούτω καθεξής. Αυτή η προσέγγιση διατηρεί τον κώδικα καθαρό και διαχωρίζει την προβολή από άλλα μέρη (βλ. Διαχωρισμό των ανησυχιών).

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

Δημιουργία του πρώτου μας γωνιακού στοιχείου

Τώρα ας δημιουργήσουμε το πρώτο μας στοιχείο. Ο σύντομος τρόπος για να δημιουργήσετε ένα στοιχείο είναι χρησιμοποιώντας το Angular CLI:

ng g c component-name

Αυτή η εντολή δημιουργεί ένα ολοκαίνουργιο στοιχείο με τα δικά του αρχεία (HTML, CSS και TypeScript) και το καταχωρεί αυτόματα στο App Module:

Σημείωση: Στο Angular, πρέπει να καταχωρήσουμε κάθε απαραίτητη υπηρεσία, στοιχείο και ενότητα σε ένα αρχείο λειτουργικής μονάδας.

Τώρα ας ρίξουμε μια πιο προσεκτική ματιά στο μοντέλο συστατικών (TypeScript Component File):

Αυτό είναι στην πραγματικότητα μια κλάση TypeScript αλλά για να το ορίσουμε ως συστατικό

  • Πρώτα απ 'όλα, πρέπει να εισαγάγουμε το στοιχείο από τη βιβλιοθήκη @ angular / core , ώστε να μπορούμε να χρησιμοποιήσουμε το διακοσμητικό στοιχείο
  • Ο διακοσμητής @Component επισημαίνει την τάξη ως στοιχείο και μας επιτρέπει να προσθέσουμε τα ακόλουθα μεταδεδομένα
  • Ο επιλογέας προορίζεται να καλέσει το στοιχείο αργότερα ως ετικέτα HTML:
  • Το TemplateUrl είναι η διαδρομή όπου βρίσκεται η προβολή HTML του στοιχείου.
  • Οι διευθύνσεις URL (μπορούν να είναι περισσότερες από 1) είναι όπου βρίσκονται τα αρχεία στυλ του στοιχείου.
  • Τέλος, εξάγουμε την τάξη (στοιχείο) έτσι ώστε να μπορούμε να την καλέσουμε μέσα στο app.module ή σε άλλα μέρη του έργου αργότερα.

Τι είναι η παρεμβολή String;

Μία από τις πιο συχνές ερωτήσεις που κάνουν οι άνθρωποι σχετικά με το Angular είναι τι είναι η σύνταξη των σγουρών στηριγμάτων. Τα στοιχεία αποδίδουν δεδομένα, αλλά τα δεδομένα μπορούν να αλλάξουν στο χρόνο, επομένως πρέπει να είναι δυναμικά.

Χρησιμοποιούμε σγουρά στηρίγματα μέσα σε άλλα σγουρά τιράντες για να δώσουμε δυναμικά δεδομένα: {{ data }}και αυτή η παράσταση ονομάζεται παρεμβολή συμβολοσειράς Μπορείτε να δείτε το παράδειγμα στην παραπάνω έκδοση βίντεο.

Τύλιξε

Ένα από τα μεγαλύτερα βήματα της εκμάθησης του Angular είναι να γνωρίζετε πώς να δημιουργείτε στοιχεία και να τα χρησιμοποιείτε αποτελεσματικά. Ελπίζω να βρείτε χρήσιμη αυτήν την ανάρτηση. Στο επόμενο μέρος, θα ρίξουμε μια ματιά στις γωνιακές οδηγίες όπως ng-if, ng-for, ng-class και πολλά άλλα. Μείνετε συντονισμένοι :)

Αν θέλετε να μάθετε περισσότερα για την ανάπτυξη ιστού, μη διστάσετε να με ακολουθήσετε στο Youtube !

Ευχαριστούμε που το διαβάσατε!