Leņķiskais JS vs. Reaģēt JS

Angular un React ir divas no populārākajām tīmekļa lietojumprogrammu priekšgala sistēmām. Lai gan to darbības joma ir nedaudz atšķirīga (viena ir izstrādes platforma, otra ir bibliotēka), tie tiek uzskatīti par galvenajiem konkurentiem. Var droši pieņemt, ka lietojumprogrammas izstrādei varat izmantot jebkuru sistēmu.

Pēc tam galvenais jautājums ir: kāpēc izvēlēties vienu, nevis otru? Šī raksta mērķis ir atbildēt uz to, izstrādājot vienkāršu pierakstīšanās veidlapu. Veidlapa būs balstīta tikai uz katras sistēmas validācijas iespējām.

Priekšnoteikumi

Lai turpinātu, jums vajadzētu būt iespējai instalēt React un ir vispārēja izpratne par kā darbojas React lietojumprogramma. Jums vajadzētu arī zināt, kā instalēt un izmantojiet Angular.

Katras lietojumprogrammas faila struktūra

React formai ir šāda failu struktūra:

Angular formai ir šāda faila struktūra:

Augšējā attēlā ir redzama tikai rediģētā lietojumprogrammas Angular sadaļa.

No iepriekš minētajām failu struktūrām var redzēt, ka abas sistēmas lielā mērā ir atkarīgas no komponentu izmantošanas.

Loģikas izveide katrai veidlapas lietojumprogrammai

Katram pieteikumam būs viens un tas pats mērķis: veidlapa tiek iesniegta tikai tad, ja katrs ievades lauks satur derīgus datus. Lietotājvārda lauks ir derīgs, ja tajā ir vismaz viena rakstzīme. Abi paroles lauki ir derīgi, ja to vērtības ir identiskas.

Angular nodrošina divas veidlapu izveides metodes: veidnes vadītu un reaktīvo. Reaktīvā pieeja ļauj izstrādātājam izveidot pielāgotus validācijas kritērijus. Uz veidni balstītai pieejai ir rekvizīti, kas vienkāršo veidlapas validāciju.

React spēj izstrādāt tikai veidlapu ar pielāgotu validāciju. Tomēr React ir populārākais ietvars, un tam ir lielāka kopiena, tāpēc React ir pieejamas daudzas veidlapu apstrādes bibliotēkas. Tā kā mērķis šeit ir izvairīties no ārēju bibliotēku izmantošanas, lietojumprogramma React paļausies uz pielāgotu validāciju.

Veidnes izstrāde katrai lietojumprogrammai

Abas lietojumprogrammas paļaujas uz veidnēm, lai izveidotu galīgo HTML izvadi.

Leņķa HTML veidne

The form-signup.component.html fails satur šādu kodu:

<div klase="forma-saturs">
<forma klase="formā" #manaForma="ngForm">
<h1>Aizpildiet veidlapu, lai pievienotos mūsu kopienai!</h1>
<div klase="formas ievades">
<etiķete ="lietotājvārds" klase="veidlapas etiķete">Lietotājvārds:</label>
<ievade
 id="lietotājvārds"
 tips="tekstu"
klasē="form-input"
 vietturis="Ievadiet lietotājvārdu"
 vārds ="lietotājvārds"
 ngModelis
 nepieciešams
 #lietotājvārds="ngModelis"
 />
<p *ngIf="lietotājvārds.nederīgs && lietotājvārds.touched">Nepieciešams lietotājvārds</lpp>
</div>
<div klase="formas ievades">
<etiķete ="parole" klase="veidlapas etiķete">Parole:</label>
<ievade
 id="parole"
 tips="parole"
 vārds ="parole"
klasē="form-input"
 vietturis="Ievadi paroli"
 ngModelis
 nepieciešams
 #parole="ngModelis"
 [(ngModelis)]="modelis.parole"
 />
<p *ngIf="parole.nederīga && parole.pieskāries">nepieciešama parole</lpp>
</div>
<div klase="formas ievades">
<etiķete ="paroles apstiprināšana" klase="veidlapas etiķete">Parole:</label>
<ievade
 id="apstipriniet paroli"
 tips="parole"
 vārds ="apstipriniet paroli"
klasē="form-input"
 vietturis="Apstipriniet paroli"
 ngModelis
 nepieciešams
 #parole2="ngModelis"
 ngValidateEqual="parole"
 [(ngModelis)]="model.confirmpassword"
 />
<div *ngIf="(password2.dirty || password2.touched) && parole2.nederīga">
<p *ngIf="password2.hasError('piezīme Vienāds') && parole.derīga">
 Paroles darītnēatbilst
</lpp>
</div>
</div>
<pogu
klasē="form-input-btn"
 tips="Iesniegt"
 [atspējots]="myForm.invalid"
 routerLink="/success"
>
 Pierakstīties
</button>
</form>
</div>

Reaģēt uz HTML veidni

The Signup.js fails satur šādu kodu:

imports Reaģēt no "reaģēt";
imports lietošanas veidlapa no "../useForm";
imports apstiprināt no "../validateData";
imports "./Signup.css"
konst Reģistrēšanās = ({submitForm}) => {
konst {handleChange, vērtības, handleSubmit, errors} = useForm( submitForm, validēt);
atgriezties (
<div klasesNosaukums="forma-saturs">
<forma klasesNosaukums="formā" onSubmit={handleSubmit}>
<h1>Aizpildiet veidlapu, lai pievienotos mūsu kopienai!</h1>
<div klasesNosaukums="formas ievades">
<etiķete htmlFor="lietotājvārds" klasesNosaukums="veidlapas etiķete">Lietotājvārds:</label>
<ievade
 id="lietotājvārds"
 tips="tekstu"
 vārds ="lietotājvārds"
 klasesNosaukums="formas ievade"
 vietturis="Ievadiet lietotājvārdu"
 vērtība={vērtības.lietotājvārds}
 onChange={handleChange}
 />
{errors.username &&<lpp>{errors.username}</lpp>}
</div>
<div klasesNosaukums="formas ievades">
<etiķete htmlFor="parole" klasesNosaukums="veidlapas etiķete"> Parole: </label>
<ievade
 id="parole"
 tips="parole"
 vārds ="parole"
 klasesNosaukums="formas ievade"
 vietturis="Ievadi paroli"
 value={values.password}
 onChange={handleChange}
 />
{errors.password &&<lpp>{errors.password}</lpp>}
</div>
<div klasesNosaukums="formas ievades">
<etiķete htmlFor="paroles apstiprināšana" klasesNosaukums="veidlapas etiķete"> Parole: </label>
<ievade
 id="paroles apstiprināšana"
 tips="parole"
 vārds ="paroles apstiprināšana"
 klasesNosaukums="formas ievade"
 vietturis="Apstipriniet paroli"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<lpp>{errors.passwordvalidate}</lpp>}
</div>
<poga klasesNosaukums="forma-input-btn" tips="Iesniegt">Pierakstīties</button>
</form>
</div>
 )
}
eksportētnoklusējuma Pierakstīties;

Jūs ievērosiet, ka abas lietojumprogrammas izmanto pamata HTML kodu, izņemot dažas nelielas atšķirības. Piemēram, lietojumprogramma Angular izmanto standarta atribūtu “class”, lai identificētu CSS klases. React izmanto savu pielāgoto rekvizītu “className”. React pārveido to par standarta “class” atribūtu galīgajā izvadē. UI ir svarīga loma jebkuras lietojumprogrammas panākumos. Tā kā abas lietojumprogrammas izmanto vienu un to pašu HTML struktūru un klašu nosaukumus, abas lietojumprogrammas var izmantot vienu un to pašu stila lapu.

Visi nestandarta rekvizīti iepriekš minētajās veidnēs attiecas uz validāciju.

Veidlapas apstiprināšanas izveide leņķa lietojumprogrammai

Lai piekļūtu validācijas rekvizītiem, kas ir daļa no Angular uz veidni balstītās pieejas, jums ir jāimportē FormsModule iekš app.module.ts failu.

Fails app.module.ts

imports { NgModule } no '@leņķa/kodols';
imports { FormsModule } no '@leņķa/formas';
imports { BrowserModule } no '@leņķa/platformas pārlūks';
imports { ValidateEqualModule } no "ng-validate-equal"
imports { AppRoutingModule } no './app-routing.module';
imports { AppComponent } no './app.component';
imports { FormSignupComponent } no './form-signup/form-signup.component';
imports { FormSuccessComponent } no './form-success/form-success.component';
@NgModule({
 deklarācijas: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 imports: [
 pārlūkprogrammas modulis,
 FormsModule,
 ValidateEqualModule,
 AppRoutingModule
 ],
pakalpojumu sniedzēji: [],
bootstrap: [ AppComponent ]
})
eksportētklasēAppModule{ }

Importējot FormsModule augstāk esošajā failā tagad varat piekļūt dažādiem validācijas rekvizītiem. Jums būs jāpievieno ngModelis rekvizītu Angular HTML veidnes ievades laukiem. Atskatoties uz iepriekš redzamo leņķisko veidni, redzēsit, ka katram no ievades elementiem ir šis īpašums.

The FormsModule un ngModelis dot izstrādātājam piekļuvi validācijas rekvizītiem, piemēram, derīgs un nederīgs. Angular HTML veidnes rindkopu sadaļā tiek izmantots #lietotājvārds=”ngModel” īpašums. Tas rada brīdinājumu, ja dati ievades laukā ir nederīgi un lietotājs tos ir mainījis.

Iekš app.module.ts failu, jūs redzēsit arī ValidateEqualModule, kurā tiek salīdzinātas abas paroles. Lai to izdarītu, jums būs jāizveido modeļa objekts form-signup.component.ts failu.

Fails form-signup.component.ts

imports { Komponents, OnInit } no '@leņķa/kodols';
@Komponents({
 atlasītājs: 'app-form-signup',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
eksportēt klasēFormSignupComponentīstenoOnInit{
konstruktors() { }
 ngOnInit(): nederīgs {}
 modelis = {
 parole: null,
 apstipriniet paroli: null
 };
}

Otrajā parole Angular HTML veidnē izmanto modelis objektu augstāk esošajā failā, lai salīdzinātu tā vērtību ar pirmo paroli.

The invalīds Iesniegšanas pogas rekvizīts nodrošina, ka tas paliek neaktīvs, līdz katrs ievades lauks satur derīgus datus. Iesniedzot veidlapu, lietotājs tiek atvērts veiksmīgai lapai, izmantojot Angular maršrutētāju.

Fails app.routing.module.ts

imports { NgModule } no '@leņķa/kodols';
imports { RouterModule, Routes } no '@leņķiskais/maršrutētājs';
imports { FormSignupComponent } no './form-signup/form-signup.component';
imports { FormSuccessComponent } no './form-success/form-success.component';
konst maršruti: maršruti = [{
 ceļš: '',
 komponents: FormSignupComponent
},{
 ceļš: 'panākumus',
 komponents: FormSuccessComponent
}];
@NgModule({
imports: [RouterModule.forRoot (maršruti)],
eksportu: [RouterModule]
})
eksportētklasēAppRoutingModule{ }

Iepriekš minētais maršrutēšanas modulis satur divus ceļus; galvenais ceļš formai un veiksmes ceļš veiksmes komponentei.

Fails app.component.html

<maršrutētājs-kontaktligzda></router-outlet>

Maršrutētāja kontaktligzda iepriekš minētajā lietotnes komponenta failā ļauj lietotājam viegli pārvietoties starp veidlapa-reģistrēšanās un forma-veiksme komponenti, izmantojot URL.

Veidlapas validācijas izveide React pieteikumam

eksportētnoklusējumafunkcijavalidateData(vērtības) {
ļaut kļūdas = {}
ja (!vērtības.lietotājvārds.apgriezt()) {
 errors.username = "Nepieciešams lietotājvārds";
 }
ja (!vērtības.parole) {
 errors.password = "Nepieciešama parole";
 }
ja (!vērtības.passwordvalidate) {
 errors.passwordvalidate = "Nepieciešama parole";
 } citsja (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Paroles darītnēatbilst";
 }
atgriezties kļūdas;
}

The validteData.js fails satur iepriekš minēto kodu. Tas pārrauga katru veidlapas ievades lauku, lai nodrošinātu, ka katrā laukā ir derīgi dati.

Fails useForm.js

imports {useState, useEffect} no "reaģēt";
konst useForm = (atzvanīt, apstiprināt) => {
konst [vērtības, setValues] = useState({
 lietotājvārds: '',
 parole: '',
 paroles apstiprināšana: ''
 });
konst [errors, setErrors] = useState ({});
konst [isSubmitting, setIsSubmitting] = useState (viltus)
konst handChange = e => {
konst {nosaukums, vērtība} = e.target;
setValues({
 ...vērtības,
[vārds]: vērtību
 });
 }
konst handleSubmit = e => {
e.preventDefault();
 setErrors (validate(vērtības));
 setIsSubmitting(taisnība);
 }
 useEffect(() => {
 if (Objekts.atslēgas (kļūdas).garums 0 && isSubmitting) {
 atzvani();
 }
 }, [kļūdas, atzvanīšana, isSubmitting]);
atgriezties { handleChange, values, handleSubmit, errors };
}
eksportētnoklusējuma lietošanas forma;

Parasta lietošanas veidlapa āķis iepriekš nosaka, vai lietotājs veiksmīgi iesniedz veidlapu. Šis notikums notiek tikai tad, ja visi veidlapas dati ir derīgi.

Fails Form.js

imports Reaģēt no "reaģēt";
imports Pierakstīties no "./Pierakstīties";
imports Panākumi no "./Veiksme"
imports { useState } no "reaģēt";
konst Forma = () => {
konst [isSubmitted, setIsSubmitted] = useState(viltus);
funkcijaiesniegt formu() {
 setIsSubmitted(taisnība);
 }
atgriezties (
<div>
 {!isSubmitted? (<Reģistrēšanās submitForm={submitForm} />): (<Panākumi />)}
</div>
 )
}
eksportētnoklusējuma Veidlapa;

The Veidlapa augšējais komponents pārslēdz skatu starp Pierakstīties komponents un Panākumi komponents, ja veidlapa ir iesniegta.

Fails App.js

imports Veidlapa no "./components/Form";
funkcijaApp() {
atgriezties (
<div klasesNosaukums="App">
<Veidlapa/>
</div>
 );
}
eksportētnoklusējuma Lietotne;

Angular Application UI

UI parāda veidlapu ar vienu lietotājvārda ievadi un divām paroles ievadēm.

Ja veidlapā ir nederīgi dati, lapās tiek parādīti kļūdu ziņojumi:

Ja veidlapā ir ietverti derīgi dati, lietotājs var tos veiksmīgi iesniegt:

React lietojumprogrammas lietotāja saskarne

Ja veidlapā ir nederīgi dati:

Ja veidlapā ir derīgi dati:

Līdzības un atšķirības starp reaģēšanu un leņķi

Angular un React ietvari ir ļoti līdzīgi un spēj radīt identiskus rezultātus. Tomēr rīki, kurus varat izmantot šo rezultātu sasniegšanai, atšķirsies. Angular ir izstrādes platforma, kas nodrošina piekļuvi tādiem rīkiem kā maršrutētājs un veidlapu bibliotēka. Lai sasniegtu tādus pašus rezultātus, React no izstrādātāja prasa nedaudz vairāk radošuma.

Reaģēt vs. Angular: kāpēc React ir tik daudz populārāks?

Lasiet Tālāk

Par autoru