Angular JS vs. Reagera JS

Angular och React är två av de bästa frontend-ramverken för webbapplikationer. Även om deras omfattning är något annorlunda (en en utvecklingsplattform, den andra ett bibliotek), ses de som stora konkurrenter. Det är säkert att anta att du kan använda båda ramarna för att utveckla en applikation.

Den stora frågan blir då: varför skulle du välja det ena framför det andra? Den här artikeln syftar till att besvara det genom att utveckla ett enkelt registreringsformulär. Formuläret kommer enbart att förlita sig på valideringsmöjligheterna för varje ramverk.

Förutsättningar

För att fortsätta bör du kunna installera React och har en allmän förståelse för hur en React-applikation fungerar. Du bör också veta hur man installerar och använd Angular.

Filstrukturen för varje applikation

React-formuläret har följande filstruktur:

Angular-formen har följande filstruktur:

Bilden ovan visar bara den redigerade delen av Angular-applikationen.

Från filstrukturerna ovan kan du se att båda ramverken är mycket beroende av användningen av komponenter.

Skapa logiken för varje formuläransökan

Varje ansökan kommer att ha samma syfte: formuläret skickas endast om varje inmatningsfält innehåller giltiga data. Användarnamnsfältet är giltigt om det innehåller minst ett tecken. De två lösenordsfälten är giltiga om deras värden är identiska.

Angular tillhandahåller två metoder för att skapa formulär: malldrivna och reaktiva. Det reaktiva tillvägagångssättet tillåter utvecklaren att skapa anpassade valideringskriterier. Det malldrivna tillvägagångssättet kommer med egenskaper som förenklar formulärvalidering.

React kan bara utveckla ett formulär med anpassad validering. Men React är det mer populära ramverket och det har en större community, så många formulärhanteringsbibliotek är tillgängliga för React. Med tanke på att målet här är att undvika användningen av externa bibliotek, kommer React-applikationen att förlita sig på anpassad validering.

Utveckla mallen för varje applikation

Båda applikationerna förlitar sig på mallar för att skapa den slutliga HTML-utdata.

Vinkel HTML-mall

De form-signup.component.html filen innehåller följande kod:

<div klass="form-innehåll">
<form klass="form" #myForm="ngForm">
<h1>Fyll i formuläret för att gå med i vår community!</h1>
<div klass="formuläringångar">
<etikett för="Användarnamn" klass="form-etikett">Användarnamn:</label>
<inmatning
 id="Användarnamn"
 typ="text"
klass="formulär-inmatning"
 platshållare="Skriv in ditt användarnamn"
 namn="Användarnamn"
 ngmodell
 nödvändig
 #användarnamn="ngmodell"
 />
<p *ngIf="användarnamn.ogiltigt && användarnamn.berörd">Användarnamn krävs</s>
</div>
<div klass="formuläringångar">
<etikett för="Lösenord" klass="form-etikett">Lösenord:</label>
<inmatning
 id="Lösenord"
 typ="Lösenord"
 namn="Lösenord"
klass="formulär-inmatning"
 platshållare="Skriv in lösenord"
 ngmodell
 nödvändig
 #lösenord="ngmodell"
 [(ngModel)]="modell.lösenord"
 />
<p *ngIf="Felaktigt lösenord && lösenord.berörd">Lösenord krävs</s>
</div>
<div klass="formuläringångar">
<etikett för="lösenordsvalidera" klass="form-etikett">Lösenord:</label>
<inmatning
 id="bekräfta lösenord"
 typ="Lösenord"
 namn="bekräfta lösenord"
klass="formulär-inmatning"
 platshållare="Bekräfta lösenord"
 ngmodell
 nödvändig
 #lösenord2="ngmodell"
 ngValidateEqual="Lösenord"
 [(ngModel)]="model.confirmpassword"
 />
<div *ngIf="(lösenord2.smutsigt || lösenord2.berört) && lösenord2.ogiltigt">
<p *ngIf="lösenord2.hasError('inte lika med') && lösenord.giltigt">
 Lösenord dointematch
</s>
</div>
</div>
<knapp
klass="form-input-btn"
 typ="Skicka in"
 [inaktiverad]="myForm.invalid"
 routerLink="/success"
>
 Bli Medlem
</button>
</form>
</div>

Reager HTML-mall

De Signup.js filen innehåller följande kod:

importera Reagera från "reagera";
importera useForm från "../useForm";
importera bekräfta från "../validateData";
importera "./Signup.css"
konst Registrering = ({submitForm}) => {
konst {handleChange, values, handleSubmit, errors} = useForm( submitForm, validate);
lämna tillbaka (
<div className="form-innehåll">
<form className="form" onSubmit={handleSubmit}>
<h1>Fyll i formuläret för att gå med i vår community!</h1>
<div className="formuläringångar">
<etikett htmlFor="Användarnamn" klassnamn="form-etikett">Användarnamn:</label>
<inmatning
 id="Användarnamn"
 typ="text"
 namn="Användarnamn"
 klassnamn="formulärinmatning"
 platshållare="Skriv in ditt användarnamn"
 värde={values.username}
 onChange={handleChange}
 />
{errors.username &&<sid>{errors.username}</s>}
</div>
<div className="formuläringångar">
<etikett htmlFor="Lösenord" klassnamn="form-etikett"> Lösenord: </label>
<inmatning
 id="Lösenord"
 typ="Lösenord"
 namn="Lösenord"
 klassnamn="formulärinmatning"
 platshållare="Skriv in lösenord"
 value={values.password}
 onChange={handleChange}
 />
{errors.password &&<sid>{errors.password}</s>}
</div>
<div className="formuläringångar">
<etikett htmlFor="lösenordsvalidera" klassnamn="form-etikett"> Lösenord: </label>
<inmatning
 id="lösenordsvalidera"
 typ="Lösenord"
 namn="lösenordsvalidera"
 klassnamn="formulärinmatning"
 platshållare="Bekräfta lösenord"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<sid>{errors.passwordvalidate}</s>}
</div>
<knappen klassnamn="form-ingång-btn" typ="Skicka in">Bli Medlem</button>
</form>
</div>
 )
}
exporterastandard Bli Medlem;

Du kommer att märka att båda applikationerna använder grundläggande HTML-kod, med undantag för några mindre skillnader. Till exempel använder Angular-applikationen standardattributet "class" för att identifiera CSS-klasser. React använder sin egen anpassade "className"-egenskap. React omvandlar detta till standardattributet "class" i slutresultatet. Användargränssnittet spelar en viktig roll för framgången för alla applikationer. Eftersom båda applikationerna använder samma HTML-struktur och klassnamn, kan båda applikationerna använda samma stilmall.

Alla icke-standardegenskaper i mallarna ovan hänför sig till validering.

Skapa formulärvalidering för Angular-applikationen

För att komma åt valideringsegenskaperna som är en del av Angulars malldrivna tillvägagångssätt, måste du importera FormsModule i app.modul.ts fil.

App.module.ts-filen

importera { NgModule } från '@angular/kärna';
importera { FormsModule } från '@angular/former';
importera { BrowserModule } från '@angular/plattform-webbläsare';
importera { ValidateEqualModule } från 'ng-validate-equal'
importera { AppRoutingModule } från './app-routing.module';
importera { AppComponent } från './app.component';
importera { FormSignupComponent } från './form-signup/form-signup.component';
importera { FormSuccessComponent } från './form-success/form-success.component';
@NgModule({
 deklarationer: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 importer: [
 BrowserModule,
 FormsModule,
 ValidateEqualModule,
 AppRoutingModule
 ],
leverantörer: [],
bootstrap: [ AppComponent ]
})
exporteraklassAppModule{ }

Genom att importera FormsModule i filen ovan har du nu tillgång till en rad olika valideringsegenskaper. Du måste lägga till ngmodell egenskapen till inmatningsfälten i Angular HTML-mallen. Om du tittar tillbaka på Angular-mallen ovan ser du att vart och ett av ingångselementen har denna egenskap.

De FormsModule och ngmodell ge utvecklaren tillgång till valideringsegenskaper som t.ex giltig och ogiltig. Paragrafsektionen i Angular HTML-mallen använder #username="ngModel" fast egendom. Det ger en varning om data i inmatningsfältet är ogiltigt och användaren har ändrat det.

I den app.modul.ts fil ser du också ValideraEqualModule, som jämför de två lösenorden. För att göra detta måste du skapa ett modellobjekt i form-signup.component.ts fil.

Filen form-signup.component.ts

importera { Komponent, OnInit } från '@angular/kärna';
@Komponent({
 väljare: 'app-formulär-registrering',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
exportera klassFormSignupComponentredskapOnInit{
konstruktör() { }
 ngOnInit(): tomhet {}
 modell = {
 Lösenord: null,
 bekräfta lösenord: null
 };
}

Det andra lösenordet i Angular HTML-mallen använder modell objekt i filen ovan för att jämföra dess värde med det första lösenordet.

De Inaktiverad egenskapen på skicka-knappen säkerställer att den förblir inaktiv tills varje inmatningsfält innehåller giltiga data. Att skicka in formuläret tar användaren till en framgångssida med hjälp av Angulars router.

App.routing.module.ts-filen

importera { NgModule } från '@angular/kärna';
importera { RouterModule, Rutter } från '@angular/router';
importera { FormSignupComponent } från './form-signup/form-signup.component';
importera { FormSuccessComponent } från './form-success/form-success.component';
konst rutter: Rutter = [{
 väg: '',
 komponent: FormSignupComponent
},{
 väg: 'Framgång',
 komponent: FormSuccessComponent
}];
@NgModule({
import: [RouterModule.forRoot (rutter)],
export: [RouterModule]
})
exporteraklassAppRoutingModule{ }

Routingmodulen ovan innehåller två vägar; huvudvägen för formen och en framgångsväg för framgångskomponenten.

Filen app.component.html

<router-uttag></router-outlet>

Routeruttaget i appkomponentfilen ovan låter en användare enkelt navigera mellan formulärregistrering och form-framgång komponenter som använder webbadresser.

Skapa formulärvalidering för React-applikationen

exporterastandardfungeravalidera Data(värden) {
låta fel = {}
om (!värden.Användarnamn.trim()) {
 errors.username = "Användarnamn krävs";
 }
om (!värden.Lösenord) {
 errors.password = "Lösenord krävs";
 }
om (!värden.passwordvalidate) {
 errors.passwordvalidate = "Lösenord krävs";
 } annanom (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Lösenord dointematch";
 }
lämna tillbaka fel;
}

De validateData.js filen innehåller koden ovan. Den övervakar varje inmatningsfält i formuläret för att säkerställa att varje fält innehåller giltiga data.

Filen useForm.js

importera {useState, useEffect} från 'reagera';
konst useForm = (återuppringning, validera) => {
konst [values, setValues] = useState({
 Användarnamn: '',
 Lösenord: '',
 lösenordsvalidera: ''
 });
konst [errors, setErrors] = useState ({});
konst [isSubmitting, setIsSubmitting] = useState (falsk)
konst handleChange = e => {
konst {namn, värde} = e.target;
setValues({
 ...värden,
[namn]: värde
 });
 }
konst handleSubmit = e => {
e.preventDefault();
 setErrors (validera(värden));
 setIsSubmitting(Sann);
 }
 useEffect(() => {
 if (Objekt.nycklar (fel). längd 0 && isSubmitting) {
 ring tillbaka();
 }
 }, [fel, callback, isSubmitting]);
lämna tillbaka { handleChange, values, handleSubmit, errors };
}
exporterastandard useForm;

Kunden useForm kroken ovan avgör om användaren lyckades skicka in formuläret. Denna händelse inträffar endast om all data i formuläret är giltig.

Filen Form.js

importera Reagera från "reagera";
importera Bli Medlem från "./Bli Medlem";
importera Framgång från "./Framgång"
importera { useState } från "reagera";
konst Form = () => {
konst [isSubmitted, setIsSubmitted] = useState(falsk);
fungerasubmitForm() {
 setIsSubmitted(Sann);
 }
lämna tillbaka (
<div>
 {!isSubmitted? (<Registrera submitForm={submitForm} />): (<Framgång />)}
</div>
 )
}
exporterastandard Form;

De Form komponenten ovan växlar vyn mellan Bli Medlem komponenten och Framgång komponent om formuläret skickas.

Filen App.js

importera Form från "./components/Form";
fungeraApp() {
lämna tillbaka (
<div className="App">
<Form/>
</div>
 );
}
exporterastandard App;

Angular Application UI

Användargränssnittet visar ett formulär med en inmatning för användarnamnet och två lösenordsinmatningar.

När formuläret innehåller ogiltiga data visar sidorna felmeddelanden:

När formuläret innehåller giltig data kan användaren skicka in den framgångsrikt:

React Application UI

När formuläret innehåller ogiltiga data:

När formuläret innehåller giltiga uppgifter:

Likheter och skillnader mellan React och Angular

Ramverken Angular och React är anmärkningsvärt lika och kan ge identiska resultat. Men de verktyg som du kan använda för att uppnå dessa resultat kommer att skilja sig åt. Angular är en utvecklingsplattform som ger tillgång till verktyg som en router och ett formulärbibliotek. React kräver lite mer kreativitet från utvecklaren för att uppnå samma resultat.

Reagera vs. Angular: Varför är React så mycket mer populärt?

Läs Nästa

Om författaren