Angular JS vs. Reager JS

Angular og React er to af de bedste frontend-frameworks til webapplikationer. Selvom deres omfang er lidt anderledes (den ene en udviklingsplatform, den anden et bibliotek), ses de som store konkurrenter. Det er sikkert at antage, at du kan bruge begge rammer til at udvikle en applikation.

Det store spørgsmål bliver så: hvorfor ville du vælge det ene frem for det andet? Denne artikel har til formål at besvare det ved at udvikle en simpel tilmeldingsformular. Formularen vil udelukkende være afhængig af valideringsmulighederne for hver ramme.

Forudsætninger

For at fortsætte bør du være i stand til det installere React og har en generel forståelse af hvordan en React-applikation fungerer. Du bør også vide, hvordan du installerer og brug Angular.

Filstrukturen for hver applikation

React-formularen har følgende filstruktur:

Vinkelformen har følgende filstruktur:

Billedet ovenfor viser kun den redigerede sektion af Angular-applikationen.

Fra filstrukturerne ovenfor kan du se, at begge rammer er stærkt afhængige af brugen af ​​komponenter.

Oprettelse af logikken for hver formularansøgning

Hver ansøgning har samme formål: formularen sendes kun, hvis hvert inputfelt indeholder gyldige data. Brugernavnsfeltet er gyldigt, hvis det indeholder mindst ét ​​tegn. De to kodeordsfelter er gyldige, hvis deres værdier er identiske.

Angular giver to metoder til oprettelse af formularer: skabelondrevet og reaktiv. Den reaktive tilgang giver udvikleren mulighed for at oprette tilpassede valideringskriterier. Den skabelondrevne tilgang kommer med egenskaber, der forenkler formularvalidering.

React er kun i stand til at udvikle en formular med tilpasset validering. React er dog den mere populære ramme, og den har et større fællesskab, så mange formularhåndteringsbiblioteker er tilgængelige for React. Da målet her er at undgå brugen af ​​eksterne biblioteker, vil React-applikationen være afhængig af tilpasset validering.

Udvikling af skabelonen til hver applikation

Begge applikationer er afhængige af skabeloner til at skabe det endelige HTML-output.

Kantet HTML-skabelon

Det form-signup.component.html fil indeholder følgende kode:

<div klasse="form-indhold">
<form klasse="form" #myForm="ngForm">
<h1>Udfyld formularen for at deltage i vores fællesskab!</h1>
<div klasse="formular-input">
<etiket for="brugernavn" klasse="formular-etiket">Brugernavn:</label>
<input
 id="brugernavn"
 type="tekst"
klasse="formular-input"
 pladsholder="Indtast brugernavn"
 navn="brugernavn"
 ngModel
 påkrævet
 #brugernavn="ngModel"
 />
<p *ngHvis="brugernavn.ugyldigt && brugernavn.berørt">Brugernavn påkrævet</s>
</div>
<div klasse="formular-input">
<etiket for="adgangskode" klasse="formular-etiket">Adgangskode:</label>
<input
 id="adgangskode"
 type="adgangskode"
 navn="adgangskode"
klasse="formular-input"
 pladsholder="Indtast adgangskode"
 ngModel
 påkrævet
 #adgangskode="ngModel"
 [(ngModel)]="model.adgangskode"
 />
<p *ngHvis="password.invalid && adgangskode.rørt">adgangskode påkrævet</s>
</div>
<div klasse="formular-input">
<etiket for="validere adgangskode" klasse="formular-etiket">Adgangskode:</label>
<input
 id="bekræft kodeord"
 type="adgangskode"
 navn="bekræft kodeord"
klasse="formular-input"
 pladsholder="Bekræft kodeord"
 ngModel
 påkrævet
 #adgangskode2="ngModel"
 ngValidateEqual="adgangskode"
 [(ngModel)]="model.bekræft adgangskode"
 />
<div *ngIf="(password2.dirty || password2.touched) && password2.ugyldigt">
<p *ngHvis="password2.hasError('notLige') && password.valid">
 Adgangskoder gørikkematch
</s>
</div>
</div>
<knap
klasse="form-input-btn"
 type="Indsend"
 [deaktiveret]="myForm.invalid"
 routerLink="/success"
>
 Tilmelde
</button>
</form>
</div>

Reager HTML-skabelon

Det Signup.js fil indeholder følgende kode:

importere Reagere fra "reagere";
importere brug Form fra "../useForm";
importere validere fra "../validateData";
importere "./Tilmeld.css"
konst Tilmelding = ({submitForm}) => {
konst {handleChange, values, handleSubmit, fejl} = useForm( submitForm, validate);
Vend tilbage (
<div klassenavn="form-indhold">
<form klassenavn="form" onSubmit={handleSubmit}>
<h1>Udfyld formularen for at deltage i vores fællesskab!</h1>
<div klassenavn="formular-input">
<etiket htmlFor="brugernavn" klassenavn="formular-etiket">Brugernavn:</label>
<input
 id="brugernavn"
 type="tekst"
 navn="brugernavn"
 klassenavn="formular-input"
 pladsholder="Indtast brugernavn"
 værdi={værdier.brugernavn}
 onChange={handleChange}
 />
{fejl.brugernavn &&<s>{errors.username}</s>}
</div>
<div klassenavn="formular-input">
<etiket htmlFor="adgangskode" klassenavn="formular-etiket"> Adgangskode: </label>
<input
 id="adgangskode"
 type="adgangskode"
 navn="adgangskode"
 klassenavn="formular-input"
 pladsholder="Indtast adgangskode"
 værdi={values.password}
 onChange={handleChange}
 />
{errors.password &&<s>{errors.password}</s>}
</div>
<div klassenavn="formular-input">
<etiket htmlFor="validere adgangskode" klassenavn="formular-etiket"> Adgangskode: </label>
<input
 id="validere adgangskode"
 type="adgangskode"
 navn="validere adgangskode"
 klassenavn="formular-input"
 pladsholder="Bekræft kodeord"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<s>{errors.passwordvalidate}</s>}
</div>
<knap klassenavn="form-input-btn" type="Indsend">Tilmelde</button>
</form>
</div>
 )
}
eksportStandard Tilmelde;

Du vil bemærke, at begge applikationer bruger grundlæggende HTML-kode, bortset fra nogle mindre forskelle. For eksempel bruger Angular-applikationen standard "class"-attributten til at identificere CSS-klasser. React bruger sin egen tilpassede "className"-egenskab. React transformerer dette til standard "class"-attributten i det endelige output. Brugergrænsefladen spiller en vigtig rolle for enhver applikations succes. Da begge applikationer bruger den samme HTML-struktur og klassenavne, kan begge applikationer bruge det samme typografiark.

Alle ikke-standardegenskaber i skabelonerne ovenfor vedrører validering.

Oprettelse af formularvalideringen til Angular-applikationen

For at få adgang til de valideringsegenskaber, der er en del af Angulars skabelondrevne tilgang, skal du importere FormsModule i app.modul.ts fil.

App.module.ts-filen

importere { NgModule } fra '@angular/kerne';
importere { FormsModule } fra '@angular/former';
importere { BrowserModule } fra '@angular/platform-browser';
importere { ValidateEqualModule } fra 'ng-validate-equal'
importere { AppRoutingModule } fra './app-routing.modul';
importere { AppComponent } fra './app.komponent';
importere { FormSignupComponent } fra './form-tilmelding/form-tilmelding.komponent';
importere { FormSuccessComponent } fra './form-success/form-success.component';
@NgModule({
 erklæringer: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 import: [
 Browsermodul,
 FormsModule,
 ValiderEqualModule,
 AppRoutingModule
 ],
udbydere: [],
bootstrap: [ AppComponent ]
})
eksportklasseAppModul{ }

Ved at importere FormsModule i filen ovenfor har du nu adgang til en række forskellige valideringsegenskaber. Du skal tilføje ngModel egenskab til inputfelterne i Angular HTML-skabelonen. Hvis du ser tilbage på Angular skabelonen ovenfor, vil du se, at hvert af inputelementerne har denne egenskab.

Det FormsModule og ngModel give udvikleren adgang til valideringsegenskaber som f.eks gyldig og ugyldig. Afsnittet i Angular HTML-skabelonen bruger #brugernavn="ngModel" ejendom. Det giver en advarsel, hvis dataene i inputfeltet er ugyldige, og brugeren har ændret dem.

I den app.modul.ts fil, vil du også se ValiderEqualModule, som sammenligner de to adgangskoder. For at gøre dette skal du oprette et modelobjekt i form-signup.component.ts fil.

Form-signup.component.ts-filen

importere { Komponent, OnInit } fra '@angular/kerne';
@Komponent({
 vælger: 'app-formular-tilmelding',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
eksport klasseFormSignupComponentredskaberOnInit{
konstruktør() { }
 ngOnInit(): ugyldig {}
 model = {
 adgangskode: nul,
 bekræft kodeord: nul
 };
}

Den anden adgangskode i Angular HTML-skabelonen bruger model objekt i filen ovenfor for at sammenligne dets værdi med den første adgangskode.

Det handicappet egenskaben på indsend-knappen sikrer, at den forbliver inaktiv, indtil hvert inputfelt indeholder gyldige data. Indsendelse af formularen bringer brugeren til en successide ved hjælp af Angulars router.

App.routing.module.ts-filen

importere { NgModule } fra '@angular/kerne';
importere { RouterModule, Ruter } fra '@angular/router';
importere { FormSignupComponent } fra './form-tilmelding/form-tilmelding.komponent';
importere { FormSuccessComponent } fra './form-success/form-success.component';
konst ruter: Ruter = [{
 sti: '',
 komponent: FormSignupComponent
},{
 sti: 'succes',
 komponent: FormSuccessComponent
}];
@NgModule({
import: [RouterModule.forRoot (ruter)],
eksport: [RouterModule]
})
eksportklasseAppRoutingModule{ }

Routingmodulet ovenfor indeholder to stier; hovedvejen for formen og en succesvej for succeskomponenten.

Filen app.component.html

<router-udtag></router-outlet>

Routerudgangen i app-komponentfilen ovenfor giver en bruger mulighed for nemt at navigere mellem formular-tilmelding og form-succes komponenter ved hjælp af URL'er.

Oprettelse af formularvalidering for React-applikationen

eksportStandardfungerevalidere Data(værdier) {
lade fejl = {}
hvis (!værdier.brugernavn.trimme()) {
 fejl.brugernavn = "Brugernavn påkrævet";
 }
hvis (!værdier.adgangskode) {
 errors.password = "Adgangskode påkrævet";
 }
hvis (!værdier.passwordvalidate) {
 errors.passwordvalidate = "Adgangskode påkrævet";
 } andethvis (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Adgangskoder gørikkematch";
 }
Vend tilbage fejl;
}

Det validateData.js filen indeholder koden ovenfor. Den overvåger hvert inputfelt i formularen for at sikre, at hvert felt indeholder gyldige data.

UseForm.js-filen

importere {useState, useEffect} fra 'reagere';
konst useForm = (tilbagekald, valider) => {
konst [værdier, sætværdier] = useState({
 brugernavn: '',
 adgangskode: '',
 passwordvalidate: ''
 });
konst [fejl, setErrors] = useState ({});
konst [isSubmitting, setIsSubmitting] = useState (falsk)
konst handleChange = e => {
konst {navn, værdi} = e.mål;
sætværdier({
 ...værdier,
[navn]: værdi
 });
 }
konst handleSubmit = e => {
e.preventDefault();
 setErrors (valider(værdier));
 setIssubmitting(rigtigt);
 }
 useEffect(() => {
 if (Object.keys (fejl).længde 0 && erSender) {
 ring tilbage();
 }
 }, [fejl, tilbagekald, indsender]);
Vend tilbage { handleChange, værdier, handleSubmit, fejl };
}
eksportStandard useForm;

Skikken brug Form krogen ovenfor afgør, om brugeren har indsendt formularen. Denne hændelse opstår kun, hvis alle data i formularen er gyldige.

Form.js-filen

importere Reagere fra "reagere";
importere Tilmelde fra "./Tilmelde";
importere Succes fra "./Succes"
importere { useState } fra "reagere";
konst Form = () => {
konst [isSubmitted, setIsSubmitted] = useState(falsk);
fungereindsendForm() {
 sætIsSubmitted(rigtigt);
 }
Vend tilbage (
<div>
 {!er indsendt? (<Tilmelding submitForm={submitForm} />): (<Succes />)}
</div>
 )
}
eksportStandard Form;

Det Form komponent ovenfor skifter visningen mellem Tilmelde komponent og Succes komponent, hvis formularen indsendes.

App.js-filen

importere Form fra "./komponenter/Form";
fungereApp() {
Vend tilbage (
<div klassenavn="App">
<Form/>
</div>
 );
}
eksportStandard App;

Angular Application UI

Brugergrænsefladen viser en formular med én input til brugernavnet og to adgangskoder.

Når formularen indeholder ugyldige data, viser siderne fejlmeddelelser:

Når formularen indeholder gyldige data, kan brugeren indsende dem med succes:

React Application UI

Når formularen indeholder ugyldige data:

Når formularen indeholder gyldige data:

Ligheder og forskelle mellem React og Angular

Angular- og React-rammerne er bemærkelsesværdigt ens og er i stand til at producere identiske resultater. De værktøjer, du kan bruge til at opnå disse resultater, vil dog være forskellige. Angular er en udviklingsplatform, der giver adgang til værktøjer som en router og et formularbibliotek. React kræver lidt mere kreativitet fra udvikleren for at opnå de samme resultater.

Reager vs. Angular: Hvorfor er React så meget mere populær?

Læs Næste

Om forfatteren