Το Angular είναι μια πλατφόρμα ανάπτυξης TypeScript και ένα πλαίσιο που χρησιμοποιείται για τη δημιουργία εφαρμογών μιας σελίδας.

Το Angular έχει μια πολύπλοκη ιστορία. Οι προγραμματιστές χρησιμοποίησαν JavaScript για να δημιουργήσουν την πρώτη έκδοση αυτού του πλαισίου (AngularJS). Οι Angulardevelopers χρησιμοποίησαν αργότερα το TypeScript για να δημιουργήσουν όλες τις διαδοχικές εκδόσεις του Angular (λόγω του αριθμού των σφαλμάτων στην πρώτη έκδοση).

Από το 2021, η τελευταία έκδοση του Angular είναι η 12.0. Σε αυτό το άρθρο, θα μάθετε όλα όσα πρέπει να γνωρίζετε για το Angularframework.

Τι είναι το Angular;

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

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

Για να χρησιμοποιήσετε το Angular, θα πρέπει να είστε εξοικειωμένοι με HTML, CSS και JavaScript (η γνώση του TypeScript είναι πλεονέκτημα, αλλά όχι απαίτηση). Το Angular συγκρίνεται συχνά με το VueJS και το ReactJS και ένα από τα κύρια παράπονα είναι ότι το Angular έχει μια πιο απότομη καμπύλη εκμάθησης.

Σχετίζεται με: Τι είναι το ReactJS και σε τι μπορεί να χρησιμοποιηθεί;

Αυτό δεν αποτελεί έκπληξη, καθώς η Angular (όντας μια πλατφόρμα ανάπτυξης), έχει μεγαλύτερο αριθμό βασικών δομών με τις οποίες μπορείτε να εξοικειωθείτε. Αυτές οι δομές περιλαμβάνουν:

• Ενότητες
• Συστατικά
• Πρότυπα

Και η κατανόηση αυτών των βασικών χαρακτηριστικών θα διασφαλίσει ότι είστε σε καλό δρόμο για να γίνετε προγραμματιστής Angular.

Εξερεύνηση Angular Files

Η εφαρμογή Angular δημιουργεί πολλά αρχεία στον νέο φάκελο του έργου σας (όπως μπορείτε να δείτε στην παρακάτω εικόνα). Ελέγξτε τον επίσημο ιστότοπο της Angular για οδηγίες σχετικά με τον τρόπο εγκατάστασης του Angular στον υπολογιστή σας.

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

Ο κύριος φάκελος του έργου σας περιέχει επίσης δύο φακέλους—node_modules και src. ο src Ο φάκελος είναι όπου θα κάνετε όλη την ανάπτυξή σας. περιέχει πολλά αρχεία και φακέλους.

Ο φάκελος src

ο στυλ.css αρχείο είναι όπου θα τοποθετήσετε όλες τις παγκόσμιες προτιμήσεις στυλ σας και το index.html αρχείο είναι η μεμονωμένη σελίδα που αποδίδεται στο πρόγραμμα περιήγησής σας.

Εξερεύνηση του αρχείου index.html

Το μόνο πράγμα που θα θέλατε να αλλάξετε στο index.html το παραπάνω αρχείο είναι ο τίτλος της αίτησης. ο ετικέτα στο σώμα του αρχείου HTML πάνω από συνδέσμους προς το app.component.ts αρχείο, το οποίο βρίσκεται μέσα στο φάκελο της εφαρμογής (όπως μπορείτε να δείτε στην παρακάτω εικόνα).

Εξερεύνηση του αρχείου app.component.ts

εισαγωγή {Component } από το '@angular/core';
@Συστατικό({
επιλογέας: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
εξαγωγή κλάσης AppComponent {
τίτλος = 'η εφαρμογή μου';
}

ο app.component.ts αρχείο χρησιμοποιεί το app-root επιλογέας, ο οποίος βρίσκεται στο index.html αρχείο παραπάνω. Χρησιμοποιεί το app.component.html αρχείο ως πρότυπο και το app.component.css αρχείο για στυλ.

ο app.component.css Το αρχείο είναι κενό όταν δημιουργείται επειδή όλες οι προτιμήσεις στυλ, μαζί με τη διάταξη HTML, βρίσκονται εντός του app.component.html αρχείο.

Εκτέλεση της εφαρμογής Angular με το ng σερβίρισμα --ανοιχτό η εντολή θα εμφανίσει τα ακόλουθα στο πρόγραμμα περιήγησής σας:

Για να αλλάξετε το περιεχόμενο που εμφανίζεται στο πρόγραμμα περιήγησής σας, θα πρέπει να το επεξεργαστείτε app.component.html αρχείο.

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

Γειά σου Κόσμε

Θα παράγει την ακόλουθη έξοδο στο πρόγραμμα περιήγησής σας:

Κατανόηση των Angular Modules

Κάθε Γωνιώδης Η εφαρμογή βασίζεται σε ένα σύστημα θεμελιώδους ενότητας, γνωστό ως NgModules. Κάθε εφαρμογή περιέχει τουλάχιστον μία NgModule. Γωνιώδης δημιουργεί δύο ενότητες από το καινούργιο εντολή (app-routing.module.ts και app.module.ts).

ο app.module.ts Το αρχείο περιέχει τη μονάδα root, η οποία πρέπει να υπάρχει για να εκτελεστεί η εφαρμογή.

Εξερεύνηση του αρχείου app.module.ts

εισαγωγή { NgModule } από το '@angular/core';
εισαγωγή { BrowserModule } από το '@angular/platform-browser';
εισαγωγή { AppRoutingModule } από το './app-routing.module';
εισαγωγή { AppComponent } από το './app.component';
@NgModule({
δηλώσεις: [
AppComponent
],
εισαγωγές: [
BrowserModule,
AppRoutingModule
],
πάροχοι: [],
bootstrap: [AppComponent]
})
εξαγωγή κλάσης AppModule { }

Το παραπάνω αρχείο χρησιμοποιεί JavaScript εισαγωγή δήλωση για εισαγωγή του NgModule, ο BrowserModule, ο AppComponent, και το AppRoutingModule (που είναι το δεύτερο NgModule του έργου).

ο @NgModule διακοσμητής έρχεται μετά τις εισαγωγές. Υποδεικνύει ότι το app.module.ts το αρχείο είναι πράγματι α NgModule. ο @NgModule Στη συνέχεια, ο διακοσμητής διαμορφώνει διάφορες συστοιχίες: το δηλώσεις, ο εισαγωγές, ο παρόχους, και το bootstrap.

ο δηλώσεις Η συστοιχία αποθηκεύει τα εξαρτήματα, τις οδηγίες και τους σωλήνες που ανήκουν σε ένα συγκεκριμένο NgModule. Ωστόσο, στην περίπτωση μιας μονάδας root μόνο το AppComponent αποθηκεύεται στο δήλωση πίνακα (όπως μπορείτε να δείτε στον παραπάνω κώδικα).

ο εισαγωγές συστοιχία εισάγει το άλλο NgModules που χρησιμοποιείτε στην εφαρμογή. ο εισαγωγές ο πίνακας στον παραπάνω κώδικα εισάγει το BrowserModule (που του επιτρέπει να χρησιμοποιεί υπηρεσίες ειδικές για το πρόγραμμα περιήγησης, όπως η απόδοση DOM) και το AppRoutingModule (που επιτρέπει στην εφαρμογή να χρησιμοποιεί το Γωνιώδης δρομολογητής).

Σχετίζεται με: The Hidden Hero of Websites: Understanding the DOM

ο παρόχους ο πίνακας θα πρέπει να περιέχει υπηρεσίες που τα στοιχεία σε άλλα NgModules μπορεί να χρησιμοποιηθεί.

ο bootstrap Ο πίνακας είναι πολύ σημαντικός επειδή περιέχει το στοιχείο εισόδου που δημιουργεί και εισάγει το Angular στο index.html αρχείο στον κύριο φάκελο του έργου. Κάθε εφαρμογή Angular εκκινείται από το bootstrap συστοιχία στη ρίζα NgModule με bootstrapping ο NgModule (η οποία περιλαμβάνει μια διαδικασία που εισάγει κάθε στοιχείο στο bootstrap πίνακα στο πρόγραμμα περιήγησης DOM).

Κατανόηση των γωνιακών στοιχείων

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

• app.component.css (ένα αρχείο CSS)
• app.component.html (ένα αρχείο προτύπου)
• app.component.spec.ts (ένα αρχείο προδιαγραφών δοκιμής)
• app.component.ts (ένα αρχείο συστατικού)

Όλα τα παραπάνω αρχεία σχετίζονται με το ίδιο στοιχείο. Εάν χρησιμοποιείτε το παράγουν εντολή για τη δημιουργία ενός νέου στοιχείου, θα δημιουργηθούν τέσσερα παρόμοια αρχεία με τα παραπάνω. ο app.component.ts αρχείο περιέχει το συστατικό ρίζας, το οποίο συνδέει τις διάφορες πτυχές του στοιχείου (όπως το πρότυπο και το στυλ).

Εξερεύνηση του αρχείου app.component.ts

εισαγωγή { Component } από το '@angular/core';
@Συστατικό({
επιλογέας: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
εξαγωγή κλάσης AppComponent {
τίτλος = 'η εφαρμογή μου';
}

ο app.component.ts Το αρχείο χρησιμοποιεί τη δήλωση εισαγωγής JavaScript για την εισαγωγή του "Στοιχείου" από τον πυρήνα του Angular. Μετά το @Συστατικό ο διακοσμητής προσδιορίζει την τάξη ως συστατικό. ο @Συστατικό διακοσμητής περιέχει ένα αντικείμενο που αποτελείται από α εκλέκτορας, ένα templateUrl, και ένα styleUrls πίνακας.

ο εκλέκτορας λέει Γωνιώδης για να εισαγάγετε μια παρουσία του στοιχείου εφαρμογής σε οποιοδήποτε πρότυπο HTML που έχει μια ετικέτα που αντιστοιχεί στην εκλέκτορας (έτσι το ετικέτα). Και αν ρίξετε μια ματιά στον κώδικα στο index.html αρχείο παραπάνω θα βρείτε το ετικέτα.

Το κύριο αρχείο στοιχείου εφαρμογής συνδέεται επίσης με το αρχείο προτύπου, χρησιμοποιώντας το templateUrl ιδιοκτησία. Αυτό είναι το app.component.html αρχείο, το οποίο περιγράφει πώς πρέπει να αποδίδεται ένα συγκεκριμένο στοιχείο σε μια εφαρμογή Angular.

Η τελική ιδιότητα στο αντικείμενο είναι το styleUrls. Αυτή η ιδιότητα αναφέρεται σε μια σειρά από φύλλα στυλ, πράγμα που σημαίνει ότι μπορείτε να εφαρμόσετε πολλά φύλλα στυλ σε ένα μόνο στοιχείο (έτσι μπορείτε να προσθέσετε το καθολικό φύλλο στυλ στο φάκελο src στον πίνακα styleUrls ως Καλά).

Κατανόηση των γωνιακών προτύπων

ο app.component.html Το αρχείο είναι ένα παράδειγμα προτύπου Angular. Αυτό το αρχείο είναι ένα αρχείο HTML καθώς και ένα αρχείο συνιστωσών (το στοιχείο της εφαρμογής). Επομένως, κάθε στοιχείο πρέπει να έχει ένα πρότυπο HTML, απλώς επειδή περιγράφει τον τρόπο απόδοσης ενός στοιχείου στο DOM.

Τι έπεται?

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

The Hidden Hero of Websites: Understanding the DOM

Μαθαίνετε σχεδιασμό ιστοσελίδων και θέλετε να μάθετε περισσότερα για το μοντέλο αντικειμένου εγγράφου; Εδώ είναι τι πρέπει να γνωρίζετε για το DOM.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα