Angular JS vs. Reagovať JS

Angular a React sú dva z najlepších frontend frameworkov pre webové aplikácie. Aj keď sú ich rozsahy mierne odlišné (jedna vývojová platforma, druhá knižnica), považujú sa za hlavných konkurentov. Je bezpečné predpokladať, že na vývoj aplikácie môžete použiť ktorýkoľvek z týchto rámcov.

Hlavná otázka potom znie: prečo by ste si vybrali jedno pred druhým? Cieľom tohto článku je odpovedať na to vytvorením jednoduchého registračného formulára. Formulár sa bude spoliehať výlučne na možnosti overenia každého rámca.

Predpoklady

Ak chcete pokračovať, mali by ste byť schopní nainštalovať React a mať všeobecné pochopenie ako funguje aplikácia React. Mali by ste tiež vedieť, ako nainštalovať a použite Angular.

Štruktúra súborov každej aplikácie

Formulár React má nasledujúcu štruktúru súboru:

Uhlový formulár má nasledujúcu štruktúru súboru:

Obrázok vyššie zobrazuje iba upravenú časť aplikácie Angular.

Zo štruktúr súborov vyššie môžete vidieť, že oba rámce sa vo veľkej miere spoliehajú na používanie komponentov.

Vytvorenie logiky pre každú aplikáciu formulára

Každá žiadosť bude mať rovnaký účel: formulár sa odošle iba vtedy, ak každé vstupné pole obsahuje platné údaje. Pole používateľského mena je platné, ak obsahuje aspoň jeden znak. Dve polia hesla sú platné, ak sú ich hodnoty identické.

Angular poskytuje dve metódy vytvárania formulárov: šablónové a reaktívne. Reaktívny prístup umožňuje vývojárom vytvoriť vlastné overovacie kritériá. Prístup založený na šablónach prichádza s vlastnosťami, ktoré zjednodušujú overovanie formulárov.

React je schopný vyvinúť iba formulár s vlastnou validáciou. React je však populárnejším rámcom a má väčšiu komunitu, takže pre React je k dispozícii veľa knižníc na spracovanie formulárov. Vzhľadom na to, že cieľom je vyhnúť sa používaniu externých knižníc, aplikácia React sa bude spoliehať na vlastnú validáciu.

Vývoj šablóny pre každú aplikáciu

Obe aplikácie sa pri vytváraní konečného výstupu HTML spoliehajú na šablóny.

Uhlová HTML šablóna

The form-signup.component.html súbor obsahuje nasledujúci kód:

<trieda div="forma-obsah">
<trieda formulára="formulár" #myForm="ngForm">
<h1>Vyplňte formulár a pripojte sa k našej komunite!</h1>
<trieda div="formulárové vstupy">
<štítok pre ="užívateľské meno" trieda="forma-štítok">Používateľské meno:</label>
<vstup
 id="užívateľské meno"
 typ="text"
trieda="form-input"
 zástupný symbol ="Zadajte používateľské meno"
 meno="užívateľské meno"
 ngModel
 požadovaný
 #používateľské meno="ngModel"
 />
<p *ngIf="username.invalid && používateľské meno.dotknuté">Vyžaduje sa používateľské meno</str>
</div>
<trieda div="formulárové vstupy">
<štítok pre ="heslo" trieda="forma-štítok">heslo:</label>
<vstup
 id="heslo"
 typ="heslo"
 meno="heslo"
trieda="form-input"
 zástupný symbol ="Zadajte heslo"
 ngModel
 požadovaný
 #heslo="ngModel"
 [(ngModel)]="model.heslo"
 />
<p *ngIf="heslo.neplatné && heslo.dotkol">vyžaduje sa heslo</str>
</div>
<trieda div="formulárové vstupy">
<štítok pre ="overiť heslo" trieda="forma-štítok">heslo:</label>
<vstup
 id="Potvrďte heslo"
 typ="heslo"
 meno="Potvrďte heslo"
trieda="form-input"
 zástupný symbol ="Potvrďte heslo"
 ngModel
 požadovaný
 #heslo2="ngModel"
 ngValidateEqual="heslo"
 [(ngModel)]="model.potvrdiť heslo"
 />
<div *ngIf="(password2.dirty || password2.touched) && heslo2.neplatné">
<p *ngIf="password2.hasError('nerovná sa') && heslo.platné">
 Heslá robiťniezápas
</str>
</div>
</div>
<tlačidlo
trieda="form-input-btn"
 typ="Predložiť"
 [zakázané]="myForm.invalid"
 routerLink="/success"
>
 Prihlásiť Se
</button>
</form>
</div>

React HTML šablóna

The Signup.js súbor obsahuje nasledujúci kód:

importovať Reagovať od "reagovať";
importovať useForm od "../useForm";
importovať potvrdiť od "../validateData";
importovať "./Signup.css"
konšt Registrácia = ({submitForm}) => {
konšt {handleChange, values, handleSubmit, errors} = useForm( submitForm, validate);
vrátiť (
<div názov triedy="forma-obsah">
<formulár Názov triedy="formulár" onSubmit={handleSubmit}>
<h1>Vyplňte formulár a pripojte sa k našej komunite!</h1>
<div názov triedy="formulárové vstupy">
<label htmlFor="užívateľské meno" className="forma-štítok">Používateľské meno:</label>
<vstup
 id="užívateľské meno"
 typ="text"
 meno="užívateľské meno"
 className="formulár-vstup"
 zástupný symbol ="Zadajte používateľské meno"
 value={values.username}
 onChange={handleChange}
 />
{errors.username &&<p>{errors.username}</str>}
</div>
<div názov triedy="formulárové vstupy">
<label htmlFor="heslo" className="forma-štítok"> heslo: </label>
<vstup
 id="heslo"
 typ="heslo"
 meno="heslo"
 className="formulár-vstup"
 zástupný symbol ="Zadajte heslo"
 value={values.password}
 onChange={handleChange}
 />
{errors.password &&<p>{errors.password}</str>}
</div>
<div názov triedy="formulárové vstupy">
<label htmlFor="overiť heslo" className="forma-štítok"> heslo: </label>
<vstup
 id="overiť heslo"
 typ="heslo"
 meno="overiť heslo"
 className="formulár-vstup"
 zástupný symbol ="Potvrďte heslo"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<p>{errors.passwordvalidate}</str>}
</div>
<button className="form-input-btn" typ="Predložiť">Prihlásiť Se</button>
</form>
</div>
 )
}
exportpredvolená Prihlásiť Se;

Všimnete si, že obe aplikácie používajú základný kód HTML, s výnimkou niektorých menších rozdielov. Napríklad aplikácia Angular používa štandardný atribút „class“ na identifikáciu tried CSS. React používa svoju vlastnú vlastnosť „className“. React to transformuje na štandardný atribút „class“ v konečnom výstupe. UI hrá dôležitú úlohu v úspechu akejkoľvek aplikácie. Keďže obe aplikácie používajú rovnakú štruktúru HTML a názvy tried, obe aplikácie môžu používať rovnakú šablónu so štýlmi.

Všetky neštandardné vlastnosti vo vyššie uvedených šablónach sa týkajú validácie.

Vytvorenie overenia formulára pre aplikáciu Angular

Ak chcete získať prístup k vlastnostiam validácie, ktoré sú súčasťou prístupu Angular založeného na šablónach, budete musieť importovať FormsModule v app.module.ts súbor.

Súbor app.module.ts

importovať { NgModule } od '@angular/core';
importovať { FormsModule } od '@angular/forms';
importovať { BrowserModule } od '@angular/platform-browser';
importovať { ValidateEqualModule } od 'ng-validate-equal'
importovať { AppRoutingModule } od './app-routing.module';
importovať { AppComponent } od './app.component';
importovať { FormSignupComponent } od './form-signup/form-signup.component';
importovať { FormSuccessComponent } od './form-success/form-success.component';
@NgModule({
 vyhlásenia: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 dovoz: [
 Modul prehliadača,
 FormsModule,
 ValidateEqualModule,
 AppRoutingModule
 ],
poskytovateľov: [],
bootstrap: [ Komponent aplikácie ]
})
exporttriedaAppModule{ }

Importovaním FormsModule vo vyššie uvedenom súbore máte teraz prístup k rôznym vlastnostiam overenia. Budete musieť pridať ngModel vlastnosť do vstupných polí šablóny HTML Angular. Ak sa pozriete späť na šablónu Angular vyššie, uvidíte, že každý zo vstupných prvkov má túto vlastnosť.

The FormsModule a ngModel poskytnúť vývojárovi prístup k overovacím vlastnostiam ako napr platné a neplatný. Časť odseku šablóny Angular HTML používa #username=”ngModel” nehnuteľnosť. Ak sú údaje vo vstupnom poli neplatné a používateľ ich zmenil, zobrazí varovanie.

V app.module.ts súbor, uvidíte aj súbor ValidateEqualModule, ktorý porovnáva tieto dve heslá. Ak to chcete urobiť, musíte vytvoriť objekt modelu v form-signup.component.ts súbor.

Súbor form-signup.component.ts

importovať { Komponent, OnInit } od '@angular/core';
@Component({
 selektor: 'aplikácia-formulár-registrácia',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
export triedaFormSignupComponentnáradiaOnInit{
konštruktér() { }
 ngOnInit(): neplatné {}
 model = {
 heslo: nulový,
 Potvrďte heslo: nulový
 };
}

Druhé heslo v šablóne Angular HTML používa Model objekt v súbore vyššie, aby ste porovnali jeho hodnotu s prvým heslom.

The zdravotne postihnutých vlastnosť na tlačidle Odoslať zaisťuje, že zostane neaktívne, kým každé vstupné pole nebude obsahovať platné údaje. Odoslaním formulára sa používateľ dostane na úspešnú stránku pomocou smerovača Angular.

Súbor app.routing.module.ts

importovať { NgModule } od '@angular/core';
importovať { RouterModule, Routes } od '@angular/router';
importovať { FormSignupComponent } od './form-signup/form-signup.component';
importovať { FormSuccessComponent } od './form-success/form-success.component';
konšt trasy: Trasy = [{
 cesta: '',
 komponent: FormSignupComponent
},{
 cesta: 'úspech',
 komponent: FormSuccessComponent
}];
@NgModule({
dovoz: [RouterModule.forRoot (trasy)],
exportov: [RouterModule]
})
exporttriedaAppRoutingModule{ }

Smerovací modul vyššie obsahuje dve cesty; hlavná cesta pre formu a cesta úspechu pre zložku úspechu.

Súbor app.component.html

<smerovač-zásuvka></router-outlet>

Zásuvka smerovača v súbore komponentu aplikácie vyššie umožňuje používateľovi jednoducho prechádzať medzi formulár-registrácia a forma-úspech komponenty pomocou adries URL.

Vytvorenie overenia formulára pre aplikáciu React

exportpredvolenáfunkciuvalidateData(hodnoty) {
nech chyby = {}
ak (!hodnoty.používateľské meno.orezať()) {
 chyby.používateľské meno = "Vyžaduje sa používateľské meno";
 }
ak (!hodnoty.heslo) {
 chyby.heslo = "Vyžaduje sa heslo";
 }
ak (!hodnoty.overenie hesla) {
 errors.passwordvalidate = "Vyžaduje sa heslo";
 } inakak (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Heslá robiťniezápas";
 }
vrátiť chyby;
}

The validateData.js súbor obsahuje vyššie uvedený kód. Monitoruje každé vstupné pole vo formulári, aby sa zabezpečilo, že každé pole obsahuje platné údaje.

Súbor useForm.js

importovať {useState, useEffect} od 'reagovať';
konšt useForm = (spätné volanie, overenie) => {
konšt [values, setValues] = useState({
 užívateľské meno: '',
 heslo: '',
 overiť heslo: ''
 });
konšt [errors, setErrors] = useState ({});
konšt [isSubmitting, setIsSubmitting] = useState (falošné)
konšt handleChange = e => {
konšt {meno, hodnota} = e.ciel;
setValues({
 ...hodnoty,
[názov]: hodnotu
 });
 }
konšt handleSubmit = e => {
e.preventPredvolené();
 setErrors (validate(hodnoty));
 setIsSubmitting(pravda);
 }
 useEffect(() => {
 if (Object.keys (errors).length 0 && isSubmitting) {
 zavolaj späť();
 }
 }, [errors, callback, isSubmitting]);
vrátiť { handleChange, values, handleSubmit, errors };
}
exportpredvolená useForm;

Zvyk useForm háčik vyššie určuje, či používateľ úspešne odošle formulár. Táto udalosť nastane iba vtedy, ak sú všetky údaje vo formulári platné.

Súbor Form.js

importovať Reagovať od "reagovať";
importovať Prihlásiť Se od "./Prihlásiť Se";
importovať Úspech od "./Úspech"
importovať { useState } od "reagovať";
konšt Form = () => {
konšt [isSubmitted, setIsSubmitted] = useState(falošné);
funkciuodoslať formulár() {
 setIsSubmitted(pravda);
 }
vrátiť (
<div>
 {!isSubmitted? (<Registrácia submitForm={submitForm} />): (<Úspech />)}
</div>
 )
}
exportpredvolená Formulár;

The Formulár komponent vyššie prepína pohľad medzi Prihlásiť Se komponent a Úspech komponentu, ak sa formulár odošle.

Súbor App.js

importovať Formulár od "./components/Form";
funkciuApp() {
vrátiť (
<div názov triedy="App">
<Formulár/>
</div>
 );
}
exportpredvolená App;

Používateľské rozhranie aplikácie Angular

Používateľské rozhranie zobrazí formulár s jedným vstupom pre používateľské meno a dvoma vstupmi pre heslo.

Keď formulár obsahuje neplatné údaje, na stránkach sa zobrazia chybové hlásenia:

Keď formulár obsahuje platné údaje, používateľ ho môže úspešne odoslať:

Používateľské rozhranie aplikácie React

Keď formulár obsahuje neplatné údaje:

Keď formulár obsahuje platné údaje:

Podobnosti a rozdiely medzi React a Angular

Rámce Angular a React sú pozoruhodne podobné a sú schopné produkovať rovnaké výsledky. Nástroje, ktoré môžete použiť na dosiahnutie týchto výsledkov, sa však budú líšiť. Angular je vývojová platforma, ktorá poskytuje prístup k nástrojom, ako je smerovač a knižnica formulárov. React vyžaduje od vývojára trochu viac kreativity na dosiahnutie rovnakých výsledkov.

Reagovať vs. Angular: Prečo je React oveľa populárnejší?

Prečítajte si ďalej

O autorovi