Angular JS vs. Reager JS

Angular og React er to av de beste frontend-rammeverkene for webapplikasjoner. Selv om omfanget deres er litt annerledes (den ene en utviklingsplattform, den andre et bibliotek), blir de sett på som store konkurrenter. Det er trygt å anta at du kan bruke begge rammene for å utvikle en applikasjon.

Det store spørsmålet blir da: hvorfor ville du velge det ene fremfor det andre? Denne artikkelen tar sikte på å svare på det ved å utvikle et enkelt registreringsskjema. Skjemaet vil kun stole på valideringsmulighetene til hvert rammeverk.

Forutsetninger

For å fortsette bør du kunne installer React og har en generell forståelse av hvordan en React-applikasjon fungerer. Du bør også vite hvordan du installerer og bruk Angular.

Filstrukturen til hver applikasjon

React-skjemaet har følgende filstruktur:

Angular-formen har følgende filstruktur:

Bildet ovenfor viser bare den redigerte delen av Angular-applikasjonen.

Fra filstrukturene ovenfor kan du se at begge rammeverkene er avhengige av bruk av komponenter.

Opprette logikken for hver skjemasøknad

Hver søknad vil ha samme formål: skjemaet sendes bare inn hvis hvert inndatafelt inneholder gyldige data. Brukernavnfeltet er gyldig hvis det inneholder minst ett tegn. De to passordfeltene er gyldige hvis verdiene deres er identiske.

Angular gir to skjemaopprettingsmetoder: maldrevet og reaktivt. Den reaktive tilnærmingen lar utvikleren lage tilpassede valideringskriterier. Den maldrevne tilnærmingen kommer med egenskaper som forenkler skjemavalidering.

React er bare i stand til å utvikle et skjema med tilpasset validering. Imidlertid er React det mer populære rammeverket og det har et større fellesskap, så mange skjemahåndteringsbiblioteker er tilgjengelige for React. Gitt at målet her er å unngå bruk av eksterne biblioteker, vil React-applikasjonen stole på tilpasset validering.

Utvikle malen for hver applikasjon

Begge applikasjonene er avhengige av maler for å lage den endelige HTML-utdata.

Kantet HTML-mal

De form-signup.component.html filen inneholder følgende kode:

<div klasse="form-innhold">
<form klasse="form" #myForm="ngForm">
<h1>Fyll ut skjemaet for å bli med i fellesskapet vårt!</h1>
<div klasse="skjemainnganger">
<merke for="brukernavn" klasse="form-etikett">Brukernavn:</label>
<input
 id="brukernavn"
 type="tekst"
klasse="skjemainndata"
 plassholder="Skriv inn brukernavn"
 navn="brukernavn"
 ngModell
 nødvendig
 #brukernavn="ngModell"
 />
<p *ngHvis="brukernavn.ugyldig && brukernavn.berørt">Brukernavn kreves</s>
</div>
<div klasse="skjemainnganger">
<merke for="passord" klasse="form-etikett">Passord:</label>
<input
 id="passord"
 type="passord"
 navn="passord"
klasse="skjemainndata"
 plassholder="Oppgi passord"
 ngModell
 nødvendig
 #passord="ngModell"
 [(ngModel)]="modell.passord"
 />
<p *ngHvis="passord.ugyldig && passord.rørt">Passord kreves</s>
</div>
<div klasse="skjemainnganger">
<merke for="passordvalidere" klasse="form-etikett">Passord:</label>
<input
 id="bekreft passord"
 type="passord"
 navn="bekreft passord"
klasse="skjemainndata"
 plassholder="Bekreft passord"
 ngModell
 nødvendig
 #passord2="ngModell"
 ngValidateEqual="passord"
 [(ngModel)]="model.confirmpassword"
 />
<div *ngIf="(passord2.dirty || passord2.rørt) && passord2.ugyldig">
<p *ngHvis="passord2.hasError('ikke lik') && passord.gyldig">
 Passord gjøreikkekamp
</s>
</div>
</div>
<knapp
klasse="form-input-btn"
 type="sende inn"
 [deaktivert]="myForm.invalid"
 routerLink="/success"
>
 Melde deg på
</button>
</form>
</div>

Reager HTML-mal

De Signup.js filen inneholder følgende kode:

import Reagere fra "reagere";
import useForm fra "../useForm";
import validere fra "../validateData";
import "./Signup.css"
konst Registrering = ({submitForm}) => {
konst {handleChange, values, handleSubmit, errors} = useForm( submitForm, validate);
komme tilbake (
<div klassenavn="form-innhold">
<form klassenavn="form" onSubmit={handleSubmit}>
<h1>Fyll ut skjemaet for å bli med i fellesskapet vårt!</h1>
<div klassenavn="skjemainnganger">
<etikett htmlFor="brukernavn" klassenavn="form-etikett">Brukernavn:</label>
<input
 id="brukernavn"
 type="tekst"
 navn="brukernavn"
 klassenavn="skjemainngang"
 plassholder="Skriv inn brukernavn"
 verdi={values.username}
 onChange={handleChange}
 />
{errors.username &&<s>{errors.username}</s>}
</div>
<div klassenavn="skjemainnganger">
<etikett htmlFor="passord" klassenavn="form-etikett"> Passord: </label>
<input
 id="passord"
 type="passord"
 navn="passord"
 klassenavn="skjemainngang"
 plassholder="Oppgi passord"
 verdi={values.password}
 onChange={handleChange}
 />
{errors.password &&<s>{errors.password}</s>}
</div>
<div klassenavn="skjemainnganger">
<etikett htmlFor="passordvalidere" klassenavn="form-etikett"> Passord: </label>
<input
 id="passordvalidere"
 type="passord"
 navn="passordvalidere"
 klassenavn="skjemainngang"
 plassholder="Bekreft passord"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<s>{errors.passwordvalidate}</s>}
</div>
<knappen klassenavn="form-input-btn" type="sende inn">Melde deg på</button>
</form>
</div>
 )
}
eksportmisligholde Melde deg på;

Du vil legge merke til at begge applikasjonene bruker grunnleggende HTML-kode, bortsett fra noen mindre forskjeller. For eksempel bruker Angular-applikasjonen standard "class"-attributt for å identifisere CSS-klasser. React bruker sin egen tilpassede "className"-egenskap. React transformerer dette til standard "class"-attributt i den endelige utgangen. Brukergrensesnittet spiller en viktig rolle i suksessen til enhver applikasjon. Siden begge applikasjonene bruker samme HTML-struktur og klassenavn, kan begge applikasjonene bruke samme stilark.

Alle ikke-standardegenskapene i malene ovenfor er knyttet til validering.

Opprette skjemavalidering for Angular-applikasjonen

For å få tilgang til valideringsegenskapene som er en del av Angulars maldrevne tilnærming, må du importere FormsModule i app.modul.ts fil.

App.module.ts-filen

import { NgModule } fra '@angular/kjerne';
import { FormsModule } fra '@angular/former';
import { BrowserModule } fra '@angular/plattform-nettleser';
import { ValidateEqualModule } fra 'ng-validate-equal'
import { AppRoutingModule } fra './app-routing.module';
import { AppComponent } fra './app.component';
import { FormSignupComponent } fra './skjema-påmelding/skjema-påmelding.komponent';
import { FormSuccessComponent } fra './form-success/form-success.component';
@NgModule({
 erklæringer: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 importerer: [
 nettlesermodul,
 FormsModule,
 ValidateEqualModule,
 AppRoutingModule
 ],
tilbydere: [],
Støvelhempe: [ AppComponent ]
})
eksportklasseAppModule{ }

Ved å importere FormsModule i filen ovenfor har du nå tilgang til en rekke forskjellige valideringsegenskaper. Du må legge til ngModell egenskap til inndatafeltene til Angular HTML-malen. Hvis du ser tilbake på Angular-malen ovenfor, vil du se at hvert av inngangselementene har denne egenskapen.

De FormsModule og ngModell gi utvikleren tilgang til valideringsegenskaper som f.eks gyldig og ugyldig. Avsnittsdelen av Angular HTML-malen bruker #username="ngModel" eiendom. Den gir en advarsel hvis dataene i inndatafeltet er ugyldige og brukeren har endret dem.

I app.modul.ts fil, vil du også se ValiderEqualModule, som sammenligner de to passordene. For å gjøre dette, må du lage et modellobjekt i form-signup.component.ts fil.

Form-signup.component.ts-filen

import { Komponent, OnInit } fra '@angular/kjerne';
@Komponent({
 velger: 'app-skjema-registrering',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
eksport klasseFormSignupComponentredskaperOnInit{
konstruktør() { }
 ngOnInit(): tomrom {}
 modell = {
 passord: null,
 bekreft passord: null
 };
}

Det andre passordet i Angular HTML-malen bruker modell objektet i filen ovenfor, for å sammenligne verdien med det første passordet.

De funksjonshemmet egenskapen på send-knappen sikrer at den forblir inaktiv til hvert inndatafelt inneholder gyldige data. Ved å sende inn skjemaet kommer brukeren til en suksessside ved hjelp av Angulars ruter.

App.routing.module.ts-filen

import { NgModule } fra '@angular/kjerne';
import { RouterModule, Routes } fra '@angular/ruter';
import { FormSignupComponent } fra './skjema-påmelding/skjema-påmelding.komponent';
import { FormSuccessComponent } fra './form-success/form-success.component';
konst ruter: Ruter = [{
 sti: '',
 komponent: FormSignupComponent
},{
 sti: 'suksess',
 komponent: FormSuccessComponent
}];
@NgModule({
import: [RouterModule.forRoot (ruter)],
eksport: [RouterModule]
})
eksportklasseAppRoutingModule{ }

Rutingmodulen ovenfor inneholder to baner; hovedveien for skjemaet og en suksessvei for suksesskomponenten.

App.component.html-filen

<ruter-uttak></router-outlet>

Ruteruttaket i appkomponentfilen ovenfor lar en bruker enkelt navigere mellom skjema-registrering og form-suksess komponenter som bruker URL-er.

Opprette skjemavalidering for React-applikasjonen

eksportmisligholdefunksjonvalidere Data(verdier) {
la feil = {}
hvis (!verdier.brukernavn.listverk()) {
 feil.brukernavn = "Brukernavn kreves";
 }
hvis (!verdier.passord) {
 errors.password = "Passord kreves";
 }
hvis (!verdier.passwordvalidate) {
 errors.passwordvalidate = "Passord kreves";
 } ellershvis (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Passord gjøreikkekamp";
 }
komme tilbake feil;
}

De validateData.js filen inneholder koden ovenfor. Den overvåker hvert inndatafelt i skjemaet for å sikre at hvert felt inneholder gyldige data.

UseForm.js-filen

import {useState, useEffect} fra 'reagere';
konst useForm = (tilbakeringing, valider) => {
konst [verdier, settverdier] = brukState({
 brukernavn: '',
 passord: '',
 passordvalidere: ''
 });
konst [errors, setErrors] = useState ({});
konst [isSubmitting, setIsSubmitting] = useState (falsk)
konst handleChange = e => {
konst {navn, verdi} = e.mål;
settverdier({
 ...verdier,
[Navn]: verdi
 });
 }
konst handleSubmit = e => {
e.preventDefault();
 setErrors (valider(verdier));
 setIsSubmitting(ekte);
 }
 useEffect(() => {
 if (Objekt.nøkler (feil).lengde 0 && erSender) {
 Ring tilbake();
 }
 }, [feil, tilbakeringing, sender inn]);
komme tilbake { handleChange, values, handleSubmit, errors };
}
eksportmisligholde useForm;

Tollen useForm kroken ovenfor avgjør om brukeren sender inn skjemaet. Denne hendelsen inntreffer bare hvis alle dataene i skjemaet er gyldige.

Form.js-filen

import Reagere fra "reagere";
import Melde deg på fra "./Melde deg på";
import Suksess fra "./Suksess"
import { useState } fra "reagere";
konst Form = () => {
konst [isSubmitted, setIsSubmitted] = useState(falsk);
funksjonsend inn skjema() {
 setIsSubmitted(ekte);
 }
komme tilbake (
<div>
 {!er innsendt? (<Registrering submitForm={submitForm} />): (<Suksess />)}
</div>
 )
}
eksportmisligholde Form;

De Skjema komponenten ovenfor bytter visningen mellom Melde deg på komponenten og Suksess komponent hvis skjemaet sendes inn.

App.js-filen

import Skjema fra "./components/Form";
funksjonApp() {
komme tilbake (
<div klassenavn="App">
<Skjema/>
</div>
 );
}
eksportmisligholde App;

Angular Application UI

Brukergrensesnittet viser et skjema med én inngang for brukernavnet og to passordinndata.

Når skjemaet inneholder ugyldige data, viser sidene feilmeldinger:

Når skjemaet inneholder gyldige data, kan brukeren sende det inn:

React Application UI

Når skjemaet inneholder ugyldige data:

Når skjemaet inneholder gyldige data:

Likheter og forskjeller mellom React og Angular

Angular- og React-rammeverket er bemerkelsesverdig like og i stand til å produsere identiske resultater. Verktøyene du kan bruke for å oppnå disse resultatene vil imidlertid variere. Angular er en utviklingsplattform som gir tilgang til verktøy som en ruter og et skjemabibliotek. React krever litt mer kreativitet fra utvikleren for å oppnå de samme resultatene.

Reager vs. Angular: Hvorfor er React så mye mer populært?

Les Neste

Om forfatteren