Angular JS vs. Reageeri JS

Angular ja React on veebirakenduste kaks populaarseimat kasutajaliidese raamistikku. Kuigi nende ulatus on veidi erinev (üks arendusplatvorm, teine ​​raamatukogu), peetakse neid peamiste konkurentidena. Võib julgelt eeldada, et saate rakenduse arendamiseks kasutada mõlemat raamistikku.

Peamine küsimus on siis: miks valida ühe teise asemel? Selle artikli eesmärk on sellele vastata, töötades välja lihtsa registreerumisvormi. Vorm tugineb ainult iga raamistiku valideerimisvõimalustele.

Eeltingimused

Jätkamiseks peaksite saama installige React ja neil on üldine arusaam kuidas Reacti rakendus töötab. Samuti peaksite teadma, kuidas installida ja kasutage Angular.

Iga rakenduse failistruktuur

Vormil React on järgmine failistruktuur:

Nurgavormil on järgmine failistruktuur:

Ülaltoodud pilt kuvab ainult rakenduse Angular redigeeritud osa.

Ülaltoodud failistruktuuridest näete, et mõlemad raamistikud sõltuvad suuresti komponentide kasutamisest.

Loogika loomine iga vormirakenduse jaoks

Igal taotlusel on sama eesmärk: vorm esitatakse ainult siis, kui iga sisestusväli sisaldab kehtivaid andmeid. Kasutajanime väli on kehtiv, kui see sisaldab vähemalt ühte tähemärki. Kaks paroolivälja kehtivad, kui nende väärtused on identsed.

Angular pakub kahte vormi loomise meetodit: mallipõhine ja reaktiivne. Reaktiivne lähenemine võimaldab arendajal luua kohandatud valideerimiskriteeriume. Mallipõhisel lähenemisviisil on omadused, mis lihtsustavad vormi kinnitamist.

React on võimeline välja töötama ainult kohandatud valideerimisega vormi. React on aga populaarsem raamistik ja sellel on suurem kogukond, nii et Reacti jaoks on saadaval palju vormikäsitluse teeke. Arvestades, et siin on eesmärk vältida väliste teekide kasutamist, tugineb rakendus React kohandatud valideerimisele.

Iga rakenduse malli väljatöötamine

Mõlemad rakendused toetuvad lõpliku HTML-väljundi loomiseks mallidele.

Nurgeline HTML-mall

The form-signup.component.html fail sisaldab järgmist koodi:

<div klass="vorm-sisu">
<vormi klass="vormi" #minuvorm="ngvorm">
<h1>Meie kogukonnaga liitumiseks täitke vorm!</h1>
<div klass="vormi-sisendid">
<silt ="kasutajanimi" klass="vormisilt">Kasutajanimi:</label>
<sisend
 id="kasutajanimi"
 tüüp="tekst"
klass="vorm-input"
 kohatäide="Sisesta kasutajanimi"
 nimi ="kasutajanimi"
 ngModel
 nõutud
 #kasutajanimi="ngModel"
 />
<p *ngIf="kasutajanimi.invalid && kasutajanimi.touched">Nõutav kasutajanimi</lk>
</div>
<div klass="vormi-sisendid">
<silt ="parool" klass="vormisilt">Parool:</label>
<sisend
 id="parool"
 tüüp="parool"
 nimi ="parool"
klass="vorm-input"
 kohatäide="Sisestage parool"
 ngModel
 nõutud
 #parool="ngModel"
 [(ngModel)]="mudel.parool"
 />
<p *ngIf="parool.invalid && parool.puudutatud">nõutav parool</lk>
</div>
<div klass="vormi-sisendid">
<silt ="parooli kinnitamine" klass="vormisilt">Parool:</label>
<sisend
 id="Kinnita salasõna"
 tüüp="parool"
 nimi ="Kinnita salasõna"
klass="vorm-input"
 kohatäide="Kinnita salasõna"
 ngModel
 nõutud
 #password2="ngModel"
 ngValidateEqual="parool"
 [(ngModel)]="model.confirmpassword"
 />
<div *ngIf="(password2.dirty || password2.touched) && parool2.invalid">
<p *ngIf="password2.hasError('pole võrdne') && parool.kehtiv">
 Paroolid tehamittevaste
</lk>
</div>
</div>
<nuppu
klass="vorm-input-btn"
 tüüp="Esita"
 [keelatud]="myForm.invalid"
 ruuterLink="/success"
>
 Registreeri
</button>
</form>
</div>

Reageeri HTML-i mall

The Signup.js fail sisaldab järgmist koodi:

importida Reageerige alates "reageerida";
importida kasutusvorm alates "../useForm";
importida kinnitada alates "../validateData";
importida "./Signup.css"
konst Registreerumine = ({submitForm}) => {
konst {handleChange, väärtused, käepideSubmit, vead} = useForm( submitForm, valide);
tagasi (
<div klassiNimi="vorm-sisu">
<vormi klassinimi="vormi" onSubmit={handleSubmit}>
<h1>Meie kogukonnaga liitumiseks täitke vorm!</h1>
<div klassiNimi="vormi-sisendid">
<silt htmlFor="kasutajanimi" klassinimi="vormisilt">Kasutajanimi:</label>
<sisend
 id="kasutajanimi"
 tüüp="tekst"
 nimi ="kasutajanimi"
 klassinimi="vorm-sisend"
 kohatäide="Sisesta kasutajanimi"
 väärtus={väärtused.kasutajanimi}
 onChange={handleChange}
 />
{errors.username &&<lk>{errors.username}</lk>}
</div>
<div klassiNimi="vormi-sisendid">
<silt htmlFor="parool" klassinimi="vormisilt"> Parool: </label>
<sisend
 id="parool"
 tüüp="parool"
 nimi ="parool"
 klassinimi="vorm-sisend"
 kohatäide="Sisestage parool"
 väärtus={values.password}
 onChange={handleChange}
 />
{errors.password &&<lk>{errors.password}</lk>}
</div>
<div klassiNimi="vormi-sisendid">
<silt htmlFor="parooli kinnitamine" klassinimi="vormisilt"> Parool: </label>
<sisend
 id="parooli kinnitamine"
 tüüp="parool"
 nimi ="parooli kinnitamine"
 klassinimi="vorm-sisend"
 kohatäide="Kinnita salasõna"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<lk>{errors.passwordvalidate}</lk>}
</div>
<nupu klassinimi="vorm-sisend-btn" tüüp="Esita">Registreeri</button>
</form>
</div>
 )
}
eksportidavaikimisi Registreeri;

Märkate, et mõlemad rakendused kasutavad tavalist HTML-koodi, välja arvatud mõned väikesed erinevused. Näiteks rakendus Angular kasutab CSS-i klasside tuvastamiseks standardset atribuuti “class”. React kasutab oma kohandatud atribuuti "className". React muudab selle lõppväljundis standardseks atribuudiks “class”. Kasutajaliides mängib iga rakenduse edukuses olulist rolli. Kuna mõlemad rakendused kasutavad sama HTML-i struktuuri ja klassinimesid, saavad mõlemad rakendused kasutada sama laaditabelit.

Kõik ülaltoodud mallide mittestandardsed omadused on seotud valideerimisega.

Nurgarakenduse vormi kinnitamise loomine

Angulari mallipõhise lähenemisviisi osaks olevatele valideerimisatribuutidele juurdepääsu saamiseks peate importima Vormide moodul aastal app.module.ts faili.

Fail app.module.ts

importida { NgModule } alates '@nurk/tuum';
importida { FormsModule } alates '@nurk/vormid';
importida { BrowserModule } alates '@angular/platform-browser';
importida { ValidateEqualModule } alates 'ng-validate-equal'
importida { AppRoutingModule } alates './app-routing.module';
importida { AppComponent } alates './app.component';
importida { FormSignupComponent } alates './form-signup/form-signup.component';
importida { FormSuccessComponent } alates './form-success/form-success.component';
@NgModule({
 deklaratsioonid: [
 AppComponent,
 FormSignupComponent,
 VormSuccessComponent
 ],
 import: [
 brauseri moodul,
 FormsModule,
 ValidateEqualModule,
 AppRoutingModule
 ],
pakkujad: [],
bootstrap: [ AppComponent ]
})
eksportidaklassAppModule{ }

Importides Vormide moodul ülaltoodud failis on teil nüüd juurdepääs erinevatele valideerimisatribuutidele. Peate lisama ngModel atribuut Angular HTML-malli sisestusväljadele. Kui vaatate tagasi ülaltoodud nurgamallile, näete, et igal sisendelemendil on see omadus.

The Vormide moodul ja ngModel anda arendajale juurdepääs valideerimisatribuutidele, näiteks kehtiv ja kehtetu. Nurga HTML-i malli lõigujaotis kasutab #kasutajanimi=”ngModel” vara. See annab hoiatuse, kui sisestusvälja andmed on kehtetud ja kasutaja on neid muutnud.

Aastal app.module.ts faili, näete ka ValidateEqualModule, mis võrdleb kahte parooli. Selleks peate looma mudeliobjekti form-signup.component.ts faili.

Fail form-signup.component.ts

importida { Komponent, OnInit } alates '@nurk/tuum';
@Component({
 valija: 'rakendus-vorm-registreerimine',
 malliUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
eksportida klassFormSignupComponentrakendabOnInit{
konstruktor() { }
 ngOnInit(): tühine {}
 mudel = {
 parool: null,
 Kinnita salasõna: null
 };
}

Angular HTML-i malli teine ​​parool kasutab mudel objekti ülaltoodud failis, et võrrelda selle väärtust esimese parooliga.

The puudega atribuut esitamisnupul tagab, et see jääb passiivseks, kuni iga sisestusväli sisaldab kehtivaid andmeid. Vormi esitamine viib kasutaja Angulari ruuteri abil edulehele.

Fail app.routing.module.ts

importida { NgModule } alates '@nurk/tuum';
importida { RouterModule, Routes } alates '@angular/ruuter';
importida { FormSignupComponent } alates './form-signup/form-signup.component';
importida { FormSuccessComponent } alates './form-success/form-success.component';
konst marsruudid: Marsruudid = [{
 tee: '',
 komponent: FormSignupComponent
},{
 tee: 'edu',
 komponent: FormSuccessComponent
}];
@NgModule({
import: [RouterModule.forRoot (marsruudid)],
eksporti: [ruuterimoodul]
})
eksportidaklassAppRoutingModule{ }

Ülaltoodud marsruutimismoodul sisaldab kahte teed; vormi põhitee ja edukomponendi edutee.

Fail app.component.html

<ruuter-väljund></router-outlet>

Ülaltoodud rakenduse komponendi failis olev ruuteri väljund võimaldab kasutajal hõlpsalt navigeerida vorm-registreerimine ja vormi-edu URL-e kasutades.

Reacti rakenduse vormi kinnitamise loomine

eksportidavaikimisifunktsioonivalideData(väärtused) {
lase vead = {}
kui (!väärtused.kasutajanimi.trimmi()) {
 errors.username = "Nõutav kasutajanimi";
 }
kui (!väärtused.parool) {
 errors.password = "Vajalik parool";
 }
kui (!väärtused.passwordvalidate) {
 errors.passwordvalidate = "Vajalik parool";
 } muidukui (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Paroolid tehamittevaste";
 }
tagasi vead;
}

The validateData.js fail sisaldab ülaltoodud koodi. See jälgib vormi iga sisendvälja tagamaks, et iga väli sisaldab kehtivaid andmeid.

Fail useForm.js

importida {useState, useEffect} alates 'reageerida';
konst useForm = (tagasihelistamine, kinnitamine) => {
konst [väärtused, setValues] = useState({
 kasutajanimi: '',
 parool: '',
 parooli kinnitamine: ''
 });
konst [errors, setErrors] = useState ({});
konst [isSubmitting, setIsSubmitting] = useState (vale)
konst HandChange = e => {
konst {nimi, väärtus} = e.sihtmärk;
setValues({
 ...väärtused,
[nimi]: väärtus
 });
 }
konst handleSubmit = e => {
e.preventDefault();
 setErrors (validate(väärtused));
 setIsSubmitting(tõsi);
 }
 useEffect(() => {
 if (Objekt.võtmed (vead).pikkus 0 && isSubmitting) {
 helista tagasi();
 }
 }, [vead, tagasihelistamine, on esitamine]);
tagasi { HandChange, Values, HandsSubmit, errors };
}
eksportidavaikimisi kasutusvorm;

Kombe kasutusvorm ülaltoodud konks määrab, kas kasutaja esitab vormi edukalt. See sündmus toimub ainult siis, kui kõik vormi andmed on kehtivad.

Form.js fail

importida Reageerige alates "reageerida";
importida Registreeri alates "./Registreeri";
importida Edu alates "./Edu"
importida { useState } alates "reageerida";
konst Vorm = () => {
konst [isSubmitted, setIsSubmitted] = useState(vale);
funktsiooniesita vorm() {
 setIsSubmitted(tõsi);
 }
tagasi (
<div>
 {!is Submitted? (<Registreerumine submitForm={submitForm} />): (<Edu />)}
</div>
 )
}
eksportidavaikimisi Vorm;

The Vorm ülaltoodud komponent vahetab vaadet vahel Registreeri komponent ja Edu komponent, kui vorm esitab.

App.js fail

importida Vorm alates "./components/Form";
funktsiooniRakendus() {
tagasi (
<div klassiNimi="Rakendus">
<Vorm/>
</div>
 );
}
eksportidavaikimisi Rakendus;

Nurgarakenduse kasutajaliides

Kasutajaliides kuvab vormi, milles on üks kasutajanime sisestus ja kaks parooli.

Kui vorm sisaldab kehtetuid andmeid, kuvatakse lehtedel veateated:

Kui vorm sisaldab kehtivaid andmeid, saab kasutaja need edukalt esitada:

Reacti rakenduse kasutajaliides

Kui vorm sisaldab kehtetuid andmeid:

Kui vorm sisaldab kehtivaid andmeid:

Reaktsiooni ja nurga sarnasused ja erinevused

Angular ja React raamistikud on märkimisväärselt sarnased ja suudavad anda identseid tulemusi. Nende tulemuste saavutamiseks kasutatavad tööriistad on aga erinevad. Angular on arendusplatvorm, mis pakub juurdepääsu sellistele tööriistadele nagu ruuter ja vormiteek. React nõuab samade tulemuste saavutamiseks arendajalt veidi rohkem loovust.

Reageeri vs. Angular: miks on React nii palju populaarsem?

Loe edasi

Autori kohta