Winkel JS vs. Reagiere JS

Angular und React sind zwei der Top-Frontend-Frameworks für Webanwendungen. Obwohl ihre Bereiche etwas unterschiedlich sind (einer eine Entwicklungsplattform, der andere eine Bibliothek), werden sie als Hauptkonkurrenten angesehen. Es ist davon auszugehen, dass Sie beide Frameworks verwenden können, um eine Anwendung zu entwickeln.

Die Hauptfrage lautet dann: Warum würden Sie sich für eines entscheiden? Dieser Artikel zielt darauf ab, diese Frage zu beantworten, indem er ein einfaches Anmeldeformular entwickelt. Das Formular stützt sich ausschließlich auf die Validierungsfunktionen der einzelnen Frameworks.

Voraussetzungen

Um fortzufahren, sollten Sie in der Lage sein React installieren und ein allgemeines Verständnis haben wie eine React-Anwendung funktioniert. Sie sollten auch wissen, wie man installiert und eckig verwenden.

Die Dateistruktur jeder Anwendung

Das React-Formular hat die folgende Dateistruktur:

Die Angular-Form hat die folgende Dateistruktur:

Das obige Bild zeigt nur den bearbeiteten Abschnitt der Angular-Anwendung.

Aus den obigen Dateistrukturen können Sie erkennen, dass beide Frameworks stark auf die Verwendung von Komponenten angewiesen sind.

Erstellen der Logik für jede Formularanwendung

Jede Bewerbung hat den gleichen Zweck: Das Formular wird nur gesendet, wenn alle Eingabefelder gültige Daten enthalten. Das Feld Benutzername ist gültig, wenn es mindestens ein Zeichen enthält. Die beiden Passwortfelder sind gültig, wenn ihre Werte identisch sind.

Angular bietet zwei Methoden zur Formularerstellung: vorlagengesteuert und reaktiv. Der reaktive Ansatz ermöglicht es dem Entwickler, benutzerdefinierte Validierungskriterien zu erstellen. Der vorlagengesteuerte Ansatz verfügt über Eigenschaften, die die Formularvalidierung vereinfachen.

React ist nur in der Lage, ein Formular mit benutzerdefinierter Validierung zu entwickeln. React ist jedoch das beliebtere Framework und hat eine größere Community, sodass für React viele Bibliotheken zur Formularverarbeitung verfügbar sind. Da das Ziel hier darin besteht, die Verwendung externer Bibliotheken zu vermeiden, verlässt sich die React-Anwendung auf eine benutzerdefinierte Validierung.

Entwickeln der Vorlage für jede Anwendung

Beide Anwendungen verlassen sich auf Vorlagen, um die endgültige HTML-Ausgabe zu erstellen.

Winkelige HTML-Vorlage

Das form-signup.component.html Datei enthält folgenden Code:

<div-Klasse="Form-Inhalt">
<Klasse= bilden"form" #meinFormular="ngForm">
<h1>Füllen Sie das Formular aus, um unserer Community beizutreten!</h1>
<div-Klasse="Formulareingaben">
<Bezeichnung für="Nutzername" Klasse="Formular-Label">Nutzername:</label>
<Eingang
 id="Nutzername"
 Typ="Text"
Klasse="Formulareingabe"
 Platzhalter="Benutzernamen eingeben"
 name="Nutzername"
 ngModel
 erforderlich
 #Benutzername="ngModel"
 />
<p *ngIf="Benutzername.ungültig && Benutzername.berührt">Benutzername erforderlich</p>
</div>
<div-Klasse="Formulareingaben">
<Bezeichnung für="Passwort" Klasse="Formular-Label">Passwort:</label>
<Eingang
 id="Passwort"
 Typ="Passwort"
 name="Passwort"
Klasse="Formulareingabe"
 Platzhalter="Passwort eingeben"
 ngModel
 erforderlich
 #Passwort="ngModel"
 [(ngModel)]="Modell.Passwort"
 />
<p *ngIf="Passwort ungültig && Passwort.berührt">Passwort erforderlich</p>
</div>
<div-Klasse="Formulareingaben">
<Bezeichnung für="Passwort validieren" Klasse="Formular-Label">Passwort:</label>
<Eingang
 id="Bestätige das Passwort"
 Typ="Passwort"
 name="Bestätige das Passwort"
Klasse="Formulareingabe"
 Platzhalter="Bestätige das Passwort"
 ngModel
 erforderlich
 #passwort2="ngModel"
 ngValidateEqual="Passwort"
 [(ngModel)]="model.passwort bestätigen"
 />
<div *ngIf="(Passwort2.dirty || Passwort2.berührt) && Passwort2.ungültig">
<p *ngIf="Passwort2.hasError('nicht gleich') && Passwort.gültig">
 Passwörter tunnichtSpiel
</p>
</div>
</div>
<Taste
Klasse="form-input-btn"
 Typ="einreichen"
 [deaktiviert]="meinFormular.ungültig"
 routerLink="/success"
>
 Anmeldung
</button>
</form>
</div>

HTML-Vorlage reagieren

Das Signup.js Datei enthält folgenden Code:

importieren Reagieren aus "reagieren";
importieren useForm aus "../useForm";
importieren bestätigen aus "../validateData";
importieren "./Signup.css"
konst Anmeldung = ({submitForm}) => {
konst {handleChange, Werte, handleSubmit, Fehler} = useForm( submitForm, validate);
Rückkehr (
<div Klassenname="Form-Inhalt">
<klassenname= bilden"form" onSubmit={handleSubmit}>
<h1>Füllen Sie das Formular aus, um unserer Community beizutreten!</h1>
<div Klassenname="Formulareingaben">
<Bezeichnung htmlFor="Nutzername" Klassenname="Formular-Label">Nutzername:</label>
<Eingang
 id="Nutzername"
 Typ="Text"
 name="Nutzername"
 Klassenname="Formulareingabe"
 Platzhalter="Benutzernamen eingeben"
 value={values.username}
 onChange={handleChange}
 />
{Fehler.Benutzername &&<p>{Fehler.Benutzername}</p>}
</div>
<div Klassenname="Formulareingaben">
<Bezeichnung htmlFor="Passwort" Klassenname="Formular-Label"> Passwort: </label>
<Eingang
 id="Passwort"
 Typ="Passwort"
 name="Passwort"
 Klassenname="Formulareingabe"
 Platzhalter="Passwort eingeben"
 value={values.password}
 onChange={handleChange}
 />
{Fehler.Passwort &&<p>{Fehler.Passwort}</p>}
</div>
<div Klassenname="Formulareingaben">
<Bezeichnung htmlFor="Passwort validieren" Klassenname="Formular-Label"> Passwort: </label>
<Eingang
 id="Passwort validieren"
 Typ="Passwort"
 name="Passwort validieren"
 Klassenname="Formulareingabe"
 Platzhalter="Bestätige das Passwort"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<p>{errors.passwordvalidate}</p>}
</div>
<Schaltfläche Klassenname="form-input-btn" Typ="einreichen">Anmeldung</button>
</form>
</div>
 )
}
ExportUrsprünglich Anmelden;

Sie werden feststellen, dass beide Anwendungen mit Ausnahme einiger geringfügiger Unterschiede einfachen HTML-Code verwenden. Beispielsweise verwendet die Angular-Anwendung das Standardattribut „class“, um CSS-Klassen zu identifizieren. React verwendet seine eigene benutzerdefinierte „className“-Eigenschaft. React wandelt dies in der endgültigen Ausgabe in das Standardattribut „class“ um. Die Benutzeroberfläche spielt eine wichtige Rolle für den Erfolg jeder Anwendung. Da beide Anwendungen dieselbe HTML-Struktur und dieselben Klassennamen verwenden, können beide Anwendungen dasselbe Stylesheet verwenden.

Alle nicht standardmäßigen Eigenschaften in den obigen Vorlagen beziehen sich auf die Validierung.

Erstellen der Formularvalidierung für die Angular-Anwendung

Um auf die Validierungseigenschaften zuzugreifen, die Teil des vorlagenbasierten Ansatzes von Angular sind, müssen Sie die FormsModule in dem app.module.ts Datei.

Die app.module.ts-Datei

importieren { NgModul } aus '@eckig/Kern';
importieren { Formularmodul } aus '@eckig/formen';
importieren { BrowserModul } aus '@angular/platform-browser';
importieren { ValidateEqualModul } aus 'ng-validate-equal'
importieren { AppRoutingModul } aus './app-routing.module';
importieren { AppComponent } aus './app.component';
importieren { FormSignupComponent } aus './formularanmeldung/formularanmeldung.komponente';
importieren {FormSuccessComponent} aus './formular-erfolg/formular-erfolg.komponente';
@NgModul({
 Erklärungen: [
 App-Komponente,
 FormSignupComponent,
 FormSuccessComponent
 ],
 Importe: [
 BrowserModul,
 Formularmodul,
 ValidateEqualModul,
 AppRoutingModul
 ],
Anbieter: [],
Bootstrap: [ App-Komponente ]
})
ExportKlasseAppModul{ }

Durch den Import der FormsModule In der obigen Datei haben Sie jetzt Zugriff auf eine Reihe verschiedener Validierungseigenschaften. Sie müssen die hinzufügen ngModel -Eigenschaft auf die Eingabefelder des Angular-HTML-Templates. Wenn Sie sich das obige Angular-Template noch einmal ansehen, werden Sie sehen, dass jedes der Eingabeelemente diese Eigenschaft hat.

Das FormsModule und ngModel Gewähren Sie dem Entwickler Zugriff auf Validierungseigenschaften wie z gültig und ungültig. Der Absatzabschnitt des Angular-HTML-Templates verwendet die #username="ngModel" Eigentum. Es erzeugt eine Warnung, wenn die Daten im Eingabefeld ungültig sind und der Benutzer sie geändert hat.

In dem app.module.ts Datei sehen Sie auch die ValidateEqualModule, das die beiden Passwörter vergleicht. Dazu müssen Sie ein Modellobjekt in der erstellen form-signup.component.ts Datei.

Die form-signup.component.ts-Datei

importieren {Komponente, OnInit} aus '@eckig/Kern';
@Komponente({
 Wähler: 'App-Formular-Anmeldung',
 TemplateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
Export KlasseFormSignupComponentimplementiertOnInit{
Konstrukteur() { }
 ngOnInit(): Leere {}
 Modell = {
 Passwort: Null,
 Bestätige das Passwort: Null
 };
}

Das zweite Passwort in der Angular-HTML-Vorlage verwendet die Modell Objekt in der obigen Datei, um seinen Wert mit dem ersten Passwort zu vergleichen.

Das behindert -Eigenschaft auf der Senden-Schaltfläche stellt sicher, dass sie inaktiv bleibt, bis alle Eingabefelder gültige Daten enthalten. Das Absenden des Formulars bringt den Benutzer mit Hilfe des Routers von Angular auf eine Erfolgsseite.

Die app.routing.module.ts-Datei

importieren { NgModul } aus '@eckig/Kern';
importieren { RouterModul, Routen } aus '@angular/router';
importieren { FormSignupComponent } aus './formularanmeldung/formularanmeldung.komponente';
importieren {FormSuccessComponent} aus './formular-erfolg/formular-erfolg.komponente';
konst Routen: Routen = [{
 Weg: '',
 Komponente: FormSignupComponent
},{
 Weg: 'Erfolg',
 Komponente: FormSuccessComponent
}];
@NgModul({
Importe: [RouterModule.forRoot (Routen)],
Exporte: [RouterModul]
})
ExportKlasseAppRoutingModul{ }

Das obige Routing-Modul enthält zwei Pfade; den Hauptpfad für das Formular und einen Erfolgspfad für die Erfolgskomponente.

Die app.component.html-Datei

<Router-Ausgang></router-outlet>

Der Router-Outlet in der obigen App-Komponentendatei ermöglicht es einem Benutzer, einfach zwischen den Formular-Anmeldung und Form-Erfolg Komponenten mit URLs.

Erstellen der Formularvalidierung für die React-Anwendung

ExportUrsprünglichFunktionDaten validieren(Werte) {
Lassen Fehler = {}
Wenn (!Werte.Nutzername.trimmen()) {
 error.benutzername = "Benutzername erforderlich";
 }
Wenn (!Werte.Passwort) {
 fehler.passwort = "Passwort erforderlich";
 }
Wenn (!Werte.passwordvalidate) {
 error.passwordvalidate = "Passwort erforderlich";
 } andersWenn (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Passwörter tunnichtSpiel";
 }
Rückkehr Fehler;
}

Das validateData.js Datei enthält den obigen Code. Es überwacht jedes Eingabefeld im Formular, um sicherzustellen, dass jedes Feld gültige Daten enthält.

Die useForm.js-Datei

importieren {useState, useEffect} aus 'reagieren';
konst useForm = (Rückruf, validieren) => {
konst [Werte, setValues] = useState({
 Nutzername: '',
 Passwort: '',
 Passwort validieren: ''
 });
konst [Fehler, setErrors] = useState ({});
konst [isSubmitting, setIsSubmitting] = useState (FALSCH)
konst handleChange = e => {
konst {Name, Wert} = e.Ziel;
setValues({
 ...Werte,
[Name]: Wert
 });
 }
konst handleSubmit = e => {
e.Standard verhindern();
 setErrors (validieren (Werte));
 setIstSubmitting(wahr);
 }
 useEffect(() => {
 if (Object.keys (errors).length 0 && wird eingereicht) {
 Rückrufen();
 }
 }, [Fehler, Rückruf, wird gesendet]);
Rückkehr { handleChange, Werte, handleSubmit, Fehler };
}
ExportUrsprünglich useForm;

Der Brauch useForm Hook oben bestimmt, ob der Benutzer das Formular erfolgreich absendet. Dieses Ereignis tritt nur auf, wenn alle Daten im Formular gültig sind.

Die Form.js-Datei

importieren Reagieren aus "reagieren";
importieren Anmelden aus "./Anmelden";
importieren Erfolg aus "./Erfolg"
importieren { useState } aus "reagieren";
konst Formular = () => {
konst [isSubmitted, setIsSubmitted] = useState(FALSCH);
FunktionFormular einreichen() {
 setIsSubmitted(wahr);
 }
Rückkehr (
<div>
 {!Wird eingereicht? (<Anmeldung submitForm={submitForm} />): (<Erfolg />)}
</div>
 )
}
ExportUrsprünglich Form;

Das Form Komponente oben wechselt die Ansicht zwischen der Anmelden Komponente und die Erfolg Komponente, wenn das Formular gesendet wird.

Die App.js-Datei

importieren Form aus "./komponenten/Formular";
FunktionApp() {
Rückkehr (
<div Klassenname="App">
<Form/>
</div>
 );
}
ExportUrsprünglich Anwendung;

Die Benutzeroberfläche der Angular-Anwendung

Die Benutzeroberfläche zeigt ein Formular mit einer Eingabe für den Benutzernamen und zwei Passworteingaben an.

Wenn das Formular ungültige Daten enthält, werden auf den Seiten Fehlermeldungen angezeigt:

Wenn das Formular gültige Daten enthält, kann der Benutzer es erfolgreich absenden:

Die Benutzeroberfläche der React-Anwendung

Wenn das Formular ungültige Daten enthält:

Wenn das Formular gültige Daten enthält:

Ähnlichkeiten und Unterschiede zwischen React und Angular

Die Angular- und React-Frameworks sind bemerkenswert ähnlich und in der Lage, identische Ergebnisse zu erzielen. Die Tools, die Sie möglicherweise verwenden, um diese Ergebnisse zu erzielen, unterscheiden sich jedoch. Angular ist eine Entwicklungsplattform, die Zugriff auf Tools wie einen Router und eine Formularbibliothek bietet. React erfordert vom Entwickler etwas mehr Kreativität, um die gleichen Ergebnisse zu erzielen.

Reagieren vs. Angular: Warum ist React so viel beliebter?

Lesen Sie weiter

Über den Autor