Angular JS vs. React JS

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

Το κύριο ερώτημα είναι τότε: γιατί θα διαλέγατε το ένα από το άλλο; Αυτό το άρθρο στοχεύει να απαντήσει αναπτύσσοντας μια απλή φόρμα εγγραφής. Η φόρμα θα βασίζεται αποκλειστικά στις δυνατότητες επικύρωσης κάθε πλαισίου.

Προαπαιτούμενα

Για να συνεχίσετε, θα πρέπει να μπορείτε εγκαταστήστε το React και έχουν μια γενική κατανόηση πώς λειτουργεί μια εφαρμογή React. Θα πρέπει επίσης να γνωρίζετε πώς να εγκαταστήσετε και χρησιμοποιήστε το Angular.

Η δομή του αρχείου κάθε εφαρμογής

Η φόρμα React έχει την ακόλουθη δομή αρχείου:

Η φόρμα Angular έχει την ακόλουθη δομή αρχείου:

Η παραπάνω εικόνα εμφανίζει μόνο την επεξεργασμένη ενότητα της εφαρμογής Angular.

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

Δημιουργία της λογικής για κάθε αίτηση φόρμας

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

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

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

Ανάπτυξη του προτύπου για κάθε εφαρμογή

Και οι δύο εφαρμογές βασίζονται σε πρότυπα για τη δημιουργία της τελικής εξόδου HTML.

Γωνιακό πρότυπο HTML

ο form-signup.component.html αρχείο περιέχει τον ακόλουθο κώδικα:

<div class="μορφή-περιεχόμενο">
<μορφή class="μορφή" #myForm="ngForm">
<h1>Συμπληρώστε τη φόρμα για να γίνετε μέλος της κοινότητάς μας!</h1>
<div class="έντυπα-εισόδους">
<ετικέτα για="όνομα χρήστη" τάξη="φόρμα-ετικέτα">Όνομα χρήστη:</label>
<εισαγωγή
 id="όνομα χρήστη"
 τύπος="κείμενο"
τάξη"φόρμα-εισαγωγή"
 κράτημα θέσης="Εισάγετε όνομα χρήστη"
 όνομα="όνομα χρήστη"
 ngModel
 απαιτείται
 #username="ngModel"
 />
<p *ngIf="username.invalid && όνομα χρήστη.άγγιξε">Απαιτείται όνομα χρήστη</Π>
</div>
<div class="έντυπα-εισόδους">
<ετικέτα για="Κωδικός πρόσβασης" τάξη="φόρμα-ετικέτα">Κωδικός πρόσβασης:</label>
<εισαγωγή
 id="Κωδικός πρόσβασης"
 τύπος="Κωδικός πρόσβασης"
 όνομα="Κωδικός πρόσβασης"
τάξη"φόρμα-εισαγωγή"
 κράτημα θέσης="Εισάγετε τον κωδικό πρόσβασης"
 ngModel
 απαιτείται
 #password="ngModel"
 [(ngModel)]="μοντέλο.κωδικός πρόσβασης"
 />
<p *ngIf="μη έγκυρος κωδικός && κωδικός.άγγιξε">απαιτείται κωδικός πρόσβασης</Π>
</div>
<div class="έντυπα-εισόδους">
<ετικέτα για="επικύρωση κωδικού πρόσβασης" τάξη="φόρμα-ετικέτα">Κωδικός πρόσβασης:</label>
<εισαγωγή
 id="Επιβεβαίωση Κωδικού"
 τύπος="Κωδικός πρόσβασης"
 όνομα="Επιβεβαίωση Κωδικού"
τάξη"φόρμα-εισαγωγή"
 κράτημα θέσης="Επιβεβαίωση Κωδικού"
 ngModel
 απαιτείται
 #password2="ngModel"
 ngValidateEqual="Κωδικός πρόσβασης"
 [(ngModel)]="μοντέλο.επιβεβαιώστε τον κωδικό πρόσβασης"
 />
<div *ngIf="(password2.dirty || password2.touch) && κωδικός2.μη έγκυρος">
<p *ngIf="password2.hasError('όχιΙσο') && κωδικός. έγκυρος">
 Κωδικοί πρόσβασης κάνωδεναγώνας
</Π>
</div>
</div>
<κουμπί
τάξη="form-input-btn"
 τύπος="υποβάλλουν"
 [απενεργοποιημένο]="myForm.invalid"
 routerLink="/success"
>
 Εγγραφείτε
</button>
</form>
</div>

Πρότυπο HTML React

ο Signup.js αρχείο περιέχει τον ακόλουθο κώδικα:

εισαγωγή Αντιδρώ από "αντιδρώ";
εισαγωγή useForm από "../useForm";
εισαγωγή επικυρώνω από "../validateData";
εισαγωγή "./Signup.css"
συνθ Εγγραφή = ({submitForm}) => {
συνθ {handleChange, values, handleSubmit, errors} = useForm( submitForm, validate);
ΕΠΙΣΤΡΟΦΗ (
<div className="μορφή-περιεχόμενο">
<φόρμα className="μορφή" onSubmit={handleSubmit}>
<h1>Συμπληρώστε τη φόρμα για να γίνετε μέλος της κοινότητάς μας!</h1>
<div className="έντυπα-εισόδους">
<ετικέτα htmlFor="όνομα χρήστη" className="φόρμα-ετικέτα">Όνομα χρήστη:</label>
<εισαγωγή
 id="όνομα χρήστη"
 τύπος="κείμενο"
 όνομα="όνομα χρήστη"
 className="έντυπο-εισαγωγή"
 κράτημα θέσης="Εισάγετε όνομα χρήστη"
 value={values.username}
 onChange={handleChange}
 />
{errors.username &&<Π>{errors.username}</Π>}
</div>
<div className="έντυπα-εισόδους">
<ετικέτα htmlFor="Κωδικός πρόσβασης" className="φόρμα-ετικέτα"> Κωδικός πρόσβασης: </label>
<εισαγωγή
 id="Κωδικός πρόσβασης"
 τύπος="Κωδικός πρόσβασης"
 όνομα="Κωδικός πρόσβασης"
 className="έντυπο-εισαγωγή"
 κράτημα θέσης="Εισάγετε τον κωδικό πρόσβασης"
 value={values.password}
 onChange={handleChange}
 />
{errors.password &&<Π>{errors.password}</Π>}
</div>
<div className="έντυπα-εισόδους">
<ετικέτα htmlFor="επικύρωση κωδικού πρόσβασης" className="φόρμα-ετικέτα"> Κωδικός πρόσβασης: </label>
<εισαγωγή
 id="επικύρωση κωδικού πρόσβασης"
 τύπος="Κωδικός πρόσβασης"
 όνομα="επικύρωση κωδικού πρόσβασης"
 className="έντυπο-εισαγωγή"
 κράτημα θέσης="Επιβεβαίωση Κωδικού"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<Π>{errors.passwordvalidate}</Π>}
</div>
<κουμπί className="form-input-btn" τύπος="υποβάλλουν">Εγγραφείτε</button>
</form>
</div>
 )
}
εξαγωγήΠροκαθορισμένο Εγγραφείτε;

Θα παρατηρήσετε ότι και οι δύο εφαρμογές χρησιμοποιούν βασικό κώδικα HTML, εκτός από κάποιες μικρές διαφορές. Για παράδειγμα, η εφαρμογή Angular χρησιμοποιεί το τυπικό χαρακτηριστικό "class" για τον προσδιορισμό κλάσεων CSS. Το React χρησιμοποιεί τη δική του προσαρμοσμένη ιδιότητα "className". Το React το μετατρέπει στο τυπικό χαρακτηριστικό «class» στην τελική έξοδο. Το UI παίζει σημαντικό ρόλο στην επιτυχία οποιασδήποτε εφαρμογής. Εφόσον και οι δύο εφαρμογές χρησιμοποιούν την ίδια δομή HTML και ονόματα κλάσεων, και οι δύο εφαρμογές μπορούν να χρησιμοποιούν το ίδιο φύλλο στυλ.

Όλες οι μη τυπικές ιδιότητες στα παραπάνω πρότυπα σχετίζονται με την επικύρωση.

Δημιουργία της επικύρωσης φόρμας για τη γωνιακή εφαρμογή

Για να αποκτήσετε πρόσβαση στις ιδιότητες επικύρωσης που αποτελούν μέρος της προσέγγισης βάσει προτύπων της Angular, θα χρειαστεί να εισαγάγετε το FormsModule στο app.module.ts αρχείο.

Το αρχείο app.module.ts

εισαγωγή { NgModule } από '@angular/core';
εισαγωγή { FormsModule } από '@angular/forms';
εισαγωγή { BrowserModule } από '@angular/platform-browser';
εισαγωγή { ValidateEqualModule } από 'ng-validate-equal'
εισαγωγή { AppRoutingModule } από './app-routing.module';
εισαγωγή { AppComponent } από './app.component';
εισαγωγή { FormSignupComponent } από './form-signup/form-signup.component';
εισαγωγή { FormSuccessComponent } από './form-success/form-success.component';
@NgModule({
 δηλώσεις: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 εισαγωγές: [
 BrowserModule,
 FormsModule,
 ValidateEqualModule,
 AppRoutingModule
 ],
παρόχους: [],
bootstrap: [AppComponent]
})
εξαγωγήτάξηAppModule{ }

Με την εισαγωγή του FormsModule στο παραπάνω αρχείο, έχετε πλέον πρόσβαση σε μια σειρά από διαφορετικές ιδιότητες επικύρωσης. Θα χρειαστεί να προσθέσετε το ngModel ιδιοκτησία στα πεδία εισαγωγής του προτύπου Angular HTML. Αν ανατρέξετε στο παραπάνω πρότυπο Angular, θα δείτε ότι κάθε ένα από τα στοιχεία εισόδου έχει αυτήν την ιδιότητα.

ο FormsModule και ngModel δώστε στον προγραμματιστή πρόσβαση σε ιδιότητες επικύρωσης όπως έγκυρος και Μη έγκυρο. Η ενότητα παραγράφου του προτύπου Angular HTML χρησιμοποιεί το #username=”ngModel” ιδιοκτησία. Παράγει μια προειδοποίηση εάν τα δεδομένα στο πεδίο εισαγωγής δεν είναι έγκυρα και ο χρήστης τα έχει αλλάξει.

Στο app.module.ts αρχείο, θα δείτε επίσης το ValidateEqualModule, το οποίο συγκρίνει τους δύο κωδικούς πρόσβασης. Για να το κάνετε αυτό, θα χρειαστεί να δημιουργήσετε ένα αντικείμενο μοντέλου στο form-signup.component.ts αρχείο.

Το αρχείο form-signup.component.ts

εισαγωγή { Component, OnInit } από '@angular/core';
@Συστατικό({
 εκλέκτορας: 'εφαρμογή-φόρμα-εγγραφή',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
εξαγωγή τάξηFormSignupComponentυλοποιείOnInit{
κατασκευαστής() { }
 ngOnInit(): κενός {}
 μοντέλο = {
 Κωδικός πρόσβασης: μηδενικό,
 Επιβεβαίωση Κωδικού: μηδενικό
 };
}

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

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

Το αρχείο app.routing.module.ts

εισαγωγή { NgModule } από '@angular/core';
εισαγωγή { RouterModule, Routes } από '@angular/router';
εισαγωγή { FormSignupComponent } από './form-signup/form-signup.component';
εισαγωγή { FormSuccessComponent } από './form-success/form-success.component';
συνθ διαδρομές: Διαδρομές = [{
 μονοπάτι: '',
 συστατικό: FormSignupComponent
},{
 μονοπάτι: 'επιτυχία',
 συστατικό: FormSuccessComponent
}];
@NgModule({
εισαγωγές: [RouterModule.forRoot (διαδρομές)],
εξαγωγές: [RouterModule]
})
εξαγωγήτάξηAppRoutingModule{ }

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

Το αρχείο app.component.html

<ρούτερ-πρίζα></router-outlet>

Η έξοδος δρομολογητή στο αρχείο στοιχείων της εφαρμογής παραπάνω επιτρέπει στον χρήστη να πλοηγείται εύκολα μεταξύ των φόρμα-εγγραφή και μορφή-επιτυχία στοιχεία που χρησιμοποιούν διευθύνσεις URL.

Δημιουργία της επικύρωσης φόρμας για την εφαρμογή React

εξαγωγήΠροκαθορισμένολειτουργίαεπικύρωση δεδομένων(αξίες) {
αφήνω σφάλματα = {}
αν (!αξίες.όνομα χρήστη.τακτοποίηση()) {
 σφάλματα.όνομα χρήστη = "Απαιτείται όνομα χρήστη";
 }
αν (!αξίες.Κωδικός πρόσβασης) {
 σφάλματα.κωδικός πρόσβασης = "Απαιτείται κωδικός πρόσβασης";
 }
αν (!αξίες.passwordvalidate) {
 errors.passwordvalidate = "Απαιτείται κωδικός πρόσβασης";
 } αλλούαν (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Κωδικοί πρόσβασης κάνωδεναγώνας";
 }
ΕΠΙΣΤΡΟΦΗ Σφάλματα;
}

ο validateData.js αρχείο περιέχει τον παραπάνω κώδικα. Παρακολουθεί κάθε πεδίο εισαγωγής στη φόρμα για να διασφαλίσει ότι κάθε πεδίο περιέχει έγκυρα δεδομένα.

Το αρχείο useForm.js

εισαγωγή {useState, useEffect} από 'αντιδρώ';
συνθ useForm = (επιστροφή κλήσης, επικύρωση) => {
συνθ [values, setValues] = useState({
 όνομα χρήστη: '',
 Κωδικός πρόσβασης: '',
 επικύρωση κωδικού πρόσβασης: ''
 });
συνθ [λάθη, setErrors] = useState ({});
συνθ [isSubmitting, setIsSubmitting] = useState (ψευδής)
συνθ handleChange = e => {
συνθ {name, value} = e.target;
setvalues({
 ...αξίες,
[όνομα]: αξία
 });
 }
συνθ handleSubmit = e => {
μι.preventDefault();
 setErrors (επικύρωσηαξίες));
 setIsSubmitting(αληθής);
 }
 useEffect(() => {
 εάν (Αντικείμενο.πλήκτρα (σφάλματα).μήκος 0 && isSubmitting) {
 επανάκληση();
 }
 }, [λάθη, επανάκληση, υποβάλλεται]);
ΕΠΙΣΤΡΟΦΗ { handleChange, values, handleSubmit, errors };
}
εξαγωγήΠροκαθορισμένο useForm;

Το έθιμο useForm Το άγκιστρο παραπάνω καθορίζει εάν ο χρήστης υποβάλλει με επιτυχία τη φόρμα. Αυτό το συμβάν εμφανίζεται μόνο εάν όλα τα δεδομένα στη φόρμα είναι έγκυρα.

Το αρχείο Form.js

εισαγωγή Αντιδρώ από "αντιδρώ";
εισαγωγή Εγγραφείτε από "./Εγγραφείτε";
εισαγωγή Επιτυχία από "./Επιτυχία"
εισαγωγή { useState } από "αντιδρώ";
συνθ Φόρμα = () => {
συνθ [isSubmitted, setIsSubmitted] = useState(ψευδής);
λειτουργίαφόρμα υποβολής() {
 setIsSubmitted(αληθής);
 }
ΕΠΙΣΤΡΟΦΗ (
<div>
 {!is Submitted? (<Εγγραφή submitForm={submitForm} />): (<Επιτυχία />)}
</div>
 )
}
εξαγωγήΠροκαθορισμένο Μορφή;

ο Μορφή Το παραπάνω στοιχείο αλλάζει την προβολή μεταξύ των Εγγραφείτε συστατικό και το Επιτυχία στοιχείο εάν υποβληθεί η φόρμα.

Το αρχείο App.js

εισαγωγή Μορφή από "./components/Form";
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
<div className="App">
<Μορφή/>
</div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Η διεπαφή χρήστη Angular Application

Η διεπαφή χρήστη εμφανίζει μια φόρμα με μία είσοδο για το όνομα χρήστη και δύο εισόδους κωδικού πρόσβασης.

Όταν η φόρμα περιέχει μη έγκυρα δεδομένα, οι σελίδες εμφανίζουν μηνύματα σφάλματος:

Όταν η φόρμα περιέχει έγκυρα δεδομένα, ο χρήστης μπορεί να τα υποβάλει με επιτυχία:

Το περιβάλλον εργασίας χρήστη React Application

Όταν η φόρμα περιέχει μη έγκυρα δεδομένα:

Όταν η φόρμα περιέχει έγκυρα δεδομένα:

Ομοιότητες και διαφορές μεταξύ React και Angular

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

React vs. Angular: Γιατί το React είναι τόσο πιο δημοφιλές;

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

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