Hoekige JS vs. Reageren JS

Angular en React zijn twee van de beste frontend-frameworks voor webapplicaties. Hoewel hun reikwijdte enigszins verschilt (de ene een ontwikkelplatform, de andere een bibliotheek), worden ze gezien als belangrijke concurrenten. Het is veilig om aan te nemen dat u beide frameworks kunt gebruiken om een ​​applicatie te ontwikkelen.

De belangrijkste vraag wordt dan: waarom zou je de een boven de ander verkiezen? Dit artikel probeert dit te beantwoorden door een eenvoudig aanmeldingsformulier te ontwikkelen. Het formulier is uitsluitend afhankelijk van de validatiemogelijkheden van elk raamwerk.

Vereisten

Om door te gaan, zou je in staat moeten zijn om: installeer Reageren en een algemeen begrip hebben van hoe een React-applicatie werkt. U moet ook weten hoe u moet installeren en gebruik Angular.

De bestandsstructuur van elke toepassing

Het React-formulier heeft de volgende bestandsstructuur:

De Angular vorm heeft de volgende bestandsstructuur:

De afbeelding hierboven toont alleen het bewerkte gedeelte van de Angular-toepassing.

Uit de bestandsstructuren hierboven kun je zien dat beide frameworks sterk afhankelijk zijn van het gebruik van componenten.

De logica voor elke formuliertoepassing maken

Elke aanvraag heeft hetzelfde doel: het formulier wordt alleen verzonden als elk invoerveld geldige gegevens bevat. Het gebruikersnaamveld is geldig als het ten minste één teken bevat. De twee wachtwoordvelden zijn geldig als hun waarden identiek zijn.

Angular biedt twee methoden voor het maken van formulieren: sjabloongestuurd en reactief. De reactieve benadering stelt de ontwikkelaar in staat om aangepaste validatiecriteria te creëren. De sjabloongestuurde aanpak wordt geleverd met eigenschappen die formuliervalidatie vereenvoudigen.

React kan alleen een formulier ontwikkelen met aangepaste validatie. React is echter het meer populaire framework en het heeft een grotere community, dus er zijn veel bibliotheken voor het verwerken van formulieren beschikbaar voor React. Aangezien het doel hier is om het gebruik van externe bibliotheken te vermijden, vertrouwt de React-toepassing op aangepaste validatie.

De sjabloon voor elke toepassing ontwikkelen

Beide toepassingen zijn afhankelijk van sjablonen om de uiteindelijke HTML-uitvoer te maken.

Hoekige HTML-sjabloon

De formulier-aanmelding.component.html bestand bevat de volgende code:

<div klasse="vorm-inhoud">
<vorm klasse="formulier" #mijnformulier="ngForm">
<h1>Vul het formulier in om lid te worden van onze community!</h1>
<div klasse="formulier-invoer">
<label voor="gebruikersnaam" klasse="formulier-label">Gebruikersnaam:</label>
<invoer
 id="gebruikersnaam"
 type="tekst"
klas="formulierinvoer"
 placeholder="Vul je gebruikersnaam in"
 naam="gebruikersnaam"
 ngModel
 vereist
 #gebruikersnaam="ngModel"
 />
<p *ngIf="gebruikersnaam.invalid && gebruikersnaam.aangeraakt">Gebruikersnaam (verplicht</p>
</div>
<div klasse="formulier-invoer">
<label voor="wachtwoord" klasse="formulier-label">Wachtwoord:</label>
<invoer
 id="wachtwoord"
 type="wachtwoord"
 naam="wachtwoord"
klas="formulierinvoer"
 placeholder="Voer wachtwoord in"
 ngModel
 vereist
 #wachtwoord="ngModel"
 [(ngModel)]="model.wachtwoord"
 />
<p *ngIf="Wachtwoord fout && wachtwoord.aangeraakt">wachtwoord benodigd</p>
</div>
<div klasse="formulier-invoer">
<label voor="wachtwoord valideren" klasse="formulier-label">Wachtwoord:</label>
<invoer
 id="bevestig wachtwoord"
 type="wachtwoord"
 naam="bevestig wachtwoord"
klas="formulierinvoer"
 placeholder="Bevestig wachtwoord"
 ngModel
 vereist
 #password2="ngModel"
 ngValidateEqual="wachtwoord"
 [(ngModel)]="model.bevestig wachtwoord"
 />
<div *ngIf="(wachtwoord2.vuile || wachtwoord2.aangeraakt) && wachtwoord2.ongeldig">
<p *ngIf="wachtwoord2.hasError('niet gelijk') && wachtwoord.geldig">
 Wachtwoorden doennietwedstrijd
</p>
</div>
</div>
<knop
klas="formulier-invoer-btn"
 type="indienen"
 [uitgeschakeld]="mijnForm.invalid"
 routerLink="/success"
>
 Inschrijven
</button>
</form>
</div>

HTML-sjabloon reageren

De Aanmelden.js bestand bevat de volgende code:

importeren Reageer van "Reageer";
importeren gebruikForm van "../useForm";
importeren valideren van "../validateData";
importeren "./Aanmelden.css"
const Aanmelden = ({submitForm}) => {
const {handleChange, values, handleSubmit, errors} = useForm (submitForm, valideren);
opbrengst (
<div className="vorm-inhoud">
<formulier className="formulier" onSubmit={handleSubmit}>
<h1>Vul het formulier in om lid te worden van onze community!</h1>
<div className="formulier-invoer">
<label htmlFor="gebruikersnaam" className="formulier-label">Gebruikersnaam:</label>
<invoer
 id="gebruikersnaam"
 type="tekst"
 naam="gebruikersnaam"
 className="formulierinvoer"
 placeholder="Vul je gebruikersnaam in"
 waarde={waarden.gebruikersnaam}
 onChange={handleChange}
 />
{errors.gebruikersnaam &&<p>{errors.gebruikersnaam}</p>}
</div>
<div className="formulier-invoer">
<label htmlFor="wachtwoord" className="formulier-label"> Wachtwoord: </label>
<invoer
 id="wachtwoord"
 type="wachtwoord"
 naam="wachtwoord"
 className="formulierinvoer"
 placeholder="Voer wachtwoord in"
 waarde={waarden.wachtwoord}
 onChange={handleChange}
 />
{errors.wachtwoord &&<p>{fouten.wachtwoord}</p>}
</div>
<div className="formulier-invoer">
<label htmlFor="wachtwoord valideren" className="formulier-label"> Wachtwoord: </label>
<invoer
 id="wachtwoord valideren"
 type="wachtwoord"
 naam="wachtwoord valideren"
 className="formulierinvoer"
 placeholder="Bevestig wachtwoord"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<p>{errors.passwordvalidate}</p>}
</div>
<knop className="formulier-invoer-btn" type="indienen">Inschrijven</button>
</form>
</div>
 )
}
exporterenstandaard Inschrijven;

U zult merken dat beide toepassingen eenvoudige HTML-code gebruiken, op enkele kleine verschillen na. De Angular-toepassing gebruikt bijvoorbeeld het standaardkenmerk "class" om CSS-klassen te identificeren. React gebruikt zijn eigen aangepaste "className" -eigenschap. React transformeert dit in het standaard "class" -attribuut in de uiteindelijke uitvoer. De gebruikersinterface speelt een belangrijke rol in het succes van elke toepassing. Aangezien beide applicaties dezelfde HTML-structuur en klassenamen gebruiken, kunnen beide applicaties hetzelfde stylesheet gebruiken.

Alle niet-standaard eigenschappen in de bovenstaande sjablonen hebben betrekking op validatie.

De formuliervalidatie voor de hoekapplicatie maken

Om toegang te krijgen tot de validatie-eigenschappen die deel uitmaken van de sjabloongestuurde aanpak van Angular, moet u de FormulierenModule in de app.module.ts het dossier.

Het app.module.ts-bestand

importeren { NgModule } van '@hoekig/kern';
importeren { FormulierenModule } van '@hoekig/vormen';
importeren { BrowserModule } van '@hoekig/platform-browser';
importeren { ValidateEqualModule } van 'ng-valideren-gelijk'
importeren { AppRoutingModule } van './app-routing.module';
importeren { App Component } van './app.component';
importeren { FormSignupComponent } van './form-signup/form-signup.component';
importeren { FormSuccessComponent } van './vorm-succes/vorm-succes.component';
@NgModule({
 verklaringen: [
 AppComponent,
 FormulierAanmeldenComponent,
 VormSuccesComponent
 ],
 invoer: [
 BrowserModule,
 FormulierenModule,
 ValideerEqualModule,
 AppRoutingModule
 ],
aanbieders: [],
bootstrap: [ App Component ]
})
exporterenklasAppModule{ }

Door het importeren van de FormulierenModule in het bestand hierboven heb je nu toegang tot een reeks verschillende validatie-eigenschappen. U moet de. toevoegen ngModel eigenschap toe aan de invoervelden van de Angular HTML-sjabloon. Als je terugkijkt naar de Angular-sjabloon hierboven, zul je zien dat elk van de invoerelementen deze eigenschap heeft.

De FormulierenModule en ngModel geef de ontwikkelaar toegang tot validatie-eigenschappen zoals: Geldig en ongeldig. De paragraafsectie van de Angular HTML-sjabloon gebruikt de #gebruikersnaam=”ngModel” eigendom. Het geeft een waarschuwing als de gegevens in het invoerveld ongeldig zijn en de gebruiker deze heeft gewijzigd.

In de app.module.ts bestand, ziet u ook de ValidateEqualModule, die de twee wachtwoorden vergelijkt. Om dit te doen, moet u een modelobject maken in de formulier-aanmelding.component.ts het dossier.

Het bestand form-signup.component.ts

importeren { Component, OnInit } van '@hoekig/kern';
@Component({
 keuze: 'app-formulier-aanmelding',
 sjabloonUrl: './form-signup.component.html',
 stijlUrl's: ['./form-signup.component.css']
})
exporteren klasFormulierAanmeldenOnderdeelimplementeertOnInit{
constructeur() { }
 ngOnInit(): leegte {}
 model = {
 wachtwoord: nul,
 bevestig wachtwoord: nul
 };
}

Het tweede wachtwoord in de Angular HTML-sjabloon gebruikt de model- object in het bestand hierboven, om de waarde ervan te vergelijken met het eerste wachtwoord.

De gehandicapt eigenschap op de verzendknop zorgt ervoor dat deze inactief blijft totdat elk invoerveld geldige gegevens bevat. Het indienen van het formulier brengt de gebruiker naar een succespagina met behulp van de router van Angular.

Het app.routing.module.ts-bestand

importeren { NgModule } van '@hoekig/kern';
importeren { RouterModule, Routes } van '@hoekig/router';
importeren { FormSignupComponent } van './form-signup/form-signup.component';
importeren { FormSuccessComponent } van './vorm-succes/vorm-succes.component';
const routes: routes = [{
 pad: '',
 component: FormSignupComponent
},{
 pad: 'succes',
 component: FormSuccessComponent
}];
@NgModule({
importeert: [RouterModule.forRoot (routes)],
exporteert: [RouterModule]
})
exporterenklasAppRoutingModule{ }

De routeringsmodule hierboven bevat twee paden; het hoofdpad voor het formulier en een succespad voor het succescomponent.

Het app.component.html-bestand

<router-uitgang></router-outlet>

Met de routeruitgang in het app-componentbestand hierboven kan een gebruiker gemakkelijk navigeren tussen de formulier-aanmelding en vorm-succes componenten met behulp van URL's.

De formuliervalidatie voor de React-toepassing maken

exporterenstandaardfunctievalideerGegevens(waarden) {
laat fouten = {}
indien (!waarden.gebruikersnaam.trim()) {
 fouten.gebruikersnaam = "Gebruikersnaam (verplicht";
 }
indien (!waarden.wachtwoord) {
 errors.wachtwoord = "wachtwoord benodigd";
 }
indien (!waarden.wachtwoordvalideren) {
 errors.passwordvalidate = "wachtwoord benodigd";
 } andersindien (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Wachtwoorden doennietwedstrijd";
 }
opbrengst fouten;
}

De validData.js bestand bevat de bovenstaande code. Het controleert elk invoerveld in het formulier om ervoor te zorgen dat elk veld geldige gegevens bevat.

Het useForm.js-bestand

importeren {useState, useEffect} van 'Reageer';
const useForm = (terugbellen, valideren) => {
const [waarden, setValues] = useState({
 gebruikersnaam: '',
 wachtwoord: '',
 wachtwoord valideren: ''
 });
const [fouten, setErrors] = useState ({});
const [isSubmitting, setIsSubmitting] = useState (vals)
const handvatWijzigen = e => {
const {naam, waarde} = e.doel;
setWaarden({
 ...waarden,
[naam]: waarde
 });
 }
const handvatSubmit = e => {
e.voorkom standaard();
 setFouten (valideren(waarden));
 setIsSubmitting(WAAR);
 }
 gebruikEffect(() => {
 if (Object.keys (errors).length 0 && isSubmitting) {
 Bel terug();
 }
 }, [fouten, terugbellen, isSubmitting]);
opbrengst {handleChange, waarden, handleSubmit, fouten};
}
exporterenstandaard gebruikFormulier;

de gewoonte gebruikForm hook hierboven bepaalt of de gebruiker het formulier succesvol indient. Deze gebeurtenis vindt alleen plaats als alle gegevens in het formulier geldig zijn.

Het Form.js-bestand

importeren Reageer van "Reageer";
importeren Inschrijven van "./Inschrijven";
importeren Succes van "./Succes"
importeren { useState } van "Reageer";
const Vorm = () => {
const [isSubmitted, setIsSubmitted] = useState(vals);
functieformulier indienen() {
 setIsSubmitted(WAAR);
 }
opbrengst (
<div>
 {!isIngediend? (<Aanmelden submitForm={submitForm} />): (<Succes />)}
</div>
 )
}
exporterenstandaard Formulier;

De Formulier component hierboven schakelt de weergave tussen de Inschrijven onderdeel en de Succes component als het formulier wordt ingediend.

Het App.js-bestand

importeren Formulier van "./componenten/Formulier";
functieApp() {
opbrengst (
<div className="App">
<Formulier/>
</div>
 );
}
exporterenstandaard App;

De Angular Application UI

De gebruikersinterface geeft een formulier weer met één invoer voor de gebruikersnaam en twee wachtwoordinvoer.

Als het formulier ongeldige gegevens bevat, worden op de pagina's foutberichten weergegeven:

Wanneer het formulier geldige gegevens bevat, kan de gebruiker het succesvol indienen:

De gebruikersinterface van de React-toepassing

Als het formulier ongeldige gegevens bevat:

Als het formulier geldige gegevens bevat:

Overeenkomsten en verschillen tussen React en Angular

De Angular- en React-frameworks zijn opmerkelijk vergelijkbaar en kunnen identieke resultaten opleveren. De tools die u zou kunnen gebruiken om deze resultaten te bereiken, zullen echter verschillen. Angular is een ontwikkelplatform dat toegang geeft tot tools zoals een router en een formulierbibliotheek. React vereist wat meer creativiteit van de ontwikkelaar om dezelfde resultaten te bereiken.

Reageren tegen Angular: waarom is React zo veel populairder?

Lees volgende

Over de auteur