Angular JS vs. Reagirajte JS

Angular i React dva su od najboljih frontend okvira za web aplikacije. Premda su im opsegi neznatno drugačiji (jedan je razvojna platforma, drugi knjižnica), oni se smatraju glavnim konkurentima. Sigurno je pretpostaviti da možete koristiti bilo koji okvir za razvoj aplikacije.

Glavno pitanje tada postaje: zašto biste odabrali jedno umjesto drugog? Ovaj članak ima za cilj odgovoriti na njega razvijanjem jednostavnog obrasca za prijavu. Obrazac će se oslanjati isključivo na mogućnosti provjere valjanosti svakog okvira.

Preduvjeti

Da biste nastavili, trebali biste moći instalirajte React i imaju opće razumijevanje kako React aplikacija radi. Također biste trebali znati kako instalirati i koristite Angular.

Struktura datoteka svake aplikacije

React obrazac ima sljedeću strukturu datoteke:

Obrazac Angular ima sljedeću strukturu datoteke:

Gornja slika prikazuje samo uređeni dio aplikacije Angular.

Iz gornjih struktura datoteka možete vidjeti da se oba okvira uvelike oslanjaju na korištenje komponenti.

Stvaranje logike za svaku aplikaciju obrasca

Svaka prijava imat će istu svrhu: obrazac se šalje samo ako svako polje za unos sadrži valjane podatke. Polje korisničkog imena vrijedi ako sadrži barem jedan znak. Dva polja lozinke su važeća ako su njihove vrijednosti identične.

Angular nudi dvije metode kreiranja obrasca: vođenu predloškom i reaktivnu. Reaktivni pristup omogućuje programeru da stvori prilagođene kriterije provjere valjanosti. Pristup vođen predloškom dolazi sa svojstvima koja pojednostavljuju provjeru valjanosti obrasca.

React je sposoban razviti samo obrazac s prilagođenom provjerom valjanosti. Međutim, React je popularniji okvir i ima veću zajednicu, tako da je Reactu dostupno mnogo knjižnica za rukovanje obrascima. S obzirom da je ovdje cilj izbjeći korištenje vanjskih knjižnica, React aplikacija će se oslanjati na prilagođenu provjeru valjanosti.

Izrada predloška za svaku aplikaciju

Obje se aplikacije oslanjaju na predloške za izradu konačnog HTML izlaza.

Kutni HTML predložak

The obrazac-prijava.komponenta.html datoteka sadrži sljedeći kod:

<div klasa="oblik-sadržaj">
<oblik klasa="oblik" #moj obrazac="ngForm">
<h1>Ispunite obrazac da se pridružite našoj zajednici!</h1>
<div klasa="form-unosi">
<oznaka za="Korisničko ime" razred="obrazac-oznaka">Korisničko ime:</label>
<ulazni
 id="Korisničko ime"
 vrsta="tekst"
razreda="form-input"
 rezervirano mjesto="Unesite korisničko ime"
 ime="Korisničko ime"
 ngModel
 potreban
 #korisničko ime="ngModel"
 />
<p *ngIf="korisničko ime.nevažeće && korisničko ime.dodirnuto">Potrebno je korisničko ime</str>
</div>
<div klasa="form-unosi">
<oznaka za="lozinka" razred="obrazac-oznaka">Lozinka:</label>
<ulazni
 id="lozinka"
 vrsta="lozinka"
 ime="lozinka"
razreda="form-input"
 rezervirano mjesto="Upišite lozinku"
 ngModel
 potreban
 #lozinka="ngModel"
 [(ngModel)]="model.lozinka"
 />
<p *ngIf="lozinka.nevažeća && lozinka.dodirnuta">potrebna lozinka</str>
</div>
<div klasa="form-unosi">
<oznaka za="passwordvalidate" razred="obrazac-oznaka">Lozinka:</label>
<ulazni
 id="potvrdi lozinku"
 vrsta="lozinka"
 ime="potvrdi lozinku"
razreda="form-input"
 rezervirano mjesto="Potvrdi lozinku"
 ngModel
 potreban
 #lozinka2="ngModel"
 ngValidateEqual="lozinka"
 [(ngModel)]="model.confirmpasword"
 />
<div *ngIf="(lozinka2.prljavo || lozinka2.dodirnuto) && lozinka2.nevažeća">
<p *ngIf="password2.hasError('nejednak') && lozinka.važeća">
 Lozinke čininepodudarati
</str>
</div>
</div>
<dugme
razreda="form-input-btn"
 vrsta="podnijeti"
 [onemogućeno]="myForm.nevažeći"
 routerLink="/success"
>
 Prijavite se
</button>
</form>
</div>

React HTML predložak

The Signup.js datoteka sadrži sljedeći kod:

uvoz Reagirati iz "reagirati";
uvoz useForm iz "../useForm";
uvoz potvrditi iz "../validateData";
uvoz "./Signup.css"
konst Prijava = ({submitForm}) => {
konst {handleChange, values, handleSubmit, errors} = useForm( submitForm, validate);
povratak (
<div ime klase="oblik-sadržaj">
<obrazac Ime klase="oblik" onSubmit={handleSubmit}>
<h1>Ispunite obrazac da se pridružite našoj zajednici!</h1>
<div ime klase="form-unosi">
<oznaka htmlFor="Korisničko ime" className="obrazac-oznaka">Korisničko ime:</label>
<ulazni
 id="Korisničko ime"
 vrsta="tekst"
 ime="Korisničko ime"
 className="obrazac-unos"
 rezervirano mjesto="Unesite korisničko ime"
 vrijednost={vrijednosti.korisničko ime}
 onChange={handleChange}
 />
{errors.username &&<str>{errors.username}</str>}
</div>
<div ime klase="form-unosi">
<oznaka htmlFor="lozinka" className="obrazac-oznaka"> Lozinka: </label>
<ulazni
 id="lozinka"
 vrsta="lozinka"
 ime="lozinka"
 className="obrazac-unos"
 rezervirano mjesto="Upišite lozinku"
 vrijednost={values.password}
 onChange={handleChange}
 />
{pogreške.lozinka &&<str>{errors.password}</str>}
</div>
<div ime klase="form-unosi">
<oznaka htmlFor="passwordvalidate" className="obrazac-oznaka"> Lozinka: </label>
<ulazni
 id="passwordvalidate"
 vrsta="lozinka"
 ime="passwordvalidate"
 className="obrazac-unos"
 rezervirano mjesto="Potvrdi lozinku"
 vrijednost={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<str>{errors.passwordvalidate}</str>}
</div>
<gumb Ime klase="obrazac-unos-btn" vrsta="podnijeti">Prijavite se</button>
</form>
</div>
 )
}
izvozzadano Prijava;

Primijetit ćete da obje aplikacije koriste osnovni HTML kod, osim nekih manjih razlika. Na primjer, Angular aplikacija koristi standardni atribut "class" za identifikaciju CSS klasa. React koristi vlastito prilagođeno svojstvo "className". React to pretvara u standardni atribut "class" u konačnom izlazu. UI igra važnu ulogu u uspjehu svake aplikacije. Budući da obje aplikacije koriste istu HTML strukturu i nazive klasa, obje aplikacije mogu koristiti istu tablicu stilova.

Sva nestandardna svojstva u gornjim predlošcima odnose se na provjeru valjanosti.

Izrada provjere valjanosti obrasca za aplikaciju Angular

Da biste pristupili svojstvima provjere koja su dio Angularovog pristupa vođenog predlošcima, morat ćete uvesti FormsModule u app.module.ts datoteka.

Datoteka app.module.ts

uvoz { NgModule } iz '@angular/core';
uvoz { FormsModule } iz '@kutni/oblici';
uvoz {BrowserModule} iz '@angular/platform-browser';
uvoz { ValidateEqualModule } iz 'ng-validate-equal'
uvoz { AppRoutingModule } iz './app-routing.module';
uvoz { AppComponent } iz './app.component';
uvoz { FormSignupComponent } iz './form-signup/form-signup.component';
uvoz { FormSuccessComponent } iz './form-success/form-success.component';
@NgModule({
 izjave: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 uvozi: [
 Modul preglednika,
 Modul obrasca,
 ValidateEqualModule,
 AppRoutingModule
 ],
pružatelji usluga: [],
bootstrap: [Komponenta aplikacije]
})
izvozrazredaAppModule{ }

Uvozom FormsModule u gornjoj datoteci sada imate pristup nizu različitih svojstava provjere valjanosti. Morat ćete dodati ngModel svojstvo na polja za unos Angular HTML predloška. Ako se osvrnete na gornji predložak Angular, vidjet ćete da svaki od ulaznih elemenata ima ovo svojstvo.

The FormsModule i ngModel dajte programeru pristup svojstvima provjere valjanosti kao što su valjano i nevažećim. Odjeljak paragrafa Angular HTML predloška koristi #username=”ngModel” imovine. Prikazuje upozorenje ako su podaci u polju za unos nevažeći, a korisnik ih je promijenio.

U app.module.ts datoteku, također ćete vidjeti ValidateEqualModule, koji uspoređuje dvije lozinke. Da biste to učinili, morat ćete stvoriti objekt modela u obrazac-prijava.komponenta.ts datoteka.

Datoteka form-signup.component.ts

uvoz { Komponenta, OnInit } iz '@angular/core';
@Komponenta({
 selektor: 'aplikacija-obrazac-prijava',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
izvoz razredaFormSignupComponentprovodiOnInit{
konstruktor() { }
 ngOnInit(): poništiti {}
 model = {
 lozinka: null,
 potvrdi lozinku: null
 };
}

Druga lozinka u Angular HTML predlošku koristi model objekt u gornjoj datoteci, kako biste usporedili njegovu vrijednost s prvom lozinkom.

The onemogućeno svojstvo na gumbu za slanje osigurava da ono ostane neaktivno sve dok svako polje za unos ne sadrži valjane podatke. Podnošenje obrasca dovodi korisnika na stranicu uspjeha uz pomoć Angularovog usmjerivača.

Datoteka app.routing.module.ts

uvoz { NgModule } iz '@angular/core';
uvoz { RouterModule, Rute } iz '@angular/router';
uvoz { FormSignupComponent } iz './form-signup/form-signup.component';
uvoz { FormSuccessComponent } iz './form-success/form-success.component';
konst rute: Rute = [{
 staza: '',
 komponenta: FormSignupComponent
},{
 staza: 'uspjeh',
 komponenta: FormSuccessComponent
}];
@NgModule({
uvozi: [RouterModule.forRoot (rute)],
izvoza: [Modul usmjerivača]
})
izvozrazredaAppRoutingModule{ }

Gornji modul za usmjeravanje sadrži dva puta; glavni put za formu i put uspjeha za komponentu uspjeha.

Datoteka app.component.html

<usmjerivač-utičnica></router-outlet>

Utičnica usmjerivača u gornjoj datoteci komponente aplikacije omogućuje korisniku jednostavnu navigaciju između obrazac-prijava i forma-uspjeh komponente koje koriste URL-ove.

Izrada provjere valjanosti obrasca za React aplikaciju

izvozzadanofunkcijavalidateData(vrijednosti) {
neka pogreške = {}
ako (!vrijednosti.Korisničko ime.podrezati()) {
 pogreške.korisničko ime = "Potrebno je korisničko ime";
 }
ako (!vrijednosti.lozinka) {
 pogreške.lozinka = "potrebna lozinka";
 }
ako (!vrijednosti.passwordvalidate) {
 pogreške.passwordvalidate = "potrebna lozinka";
 } drugoako (values.passwordvalidate !== vrijednosti.password) {
 errors.passwordvalidate = "Lozinke čininepodudarati";
 }
povratak pogreške;
}

The validateData.js datoteka sadrži gornji kod. Nadzire svako polje za unos u obrascu kako bi osigurao da svako polje sadrži valjane podatke.

Datoteka useForm.js

uvoz {useState, useEffect} iz 'reagirati';
konst useForm = (povratni poziv, validacija) => {
konst [vrijednosti, setValues] = useState({
 Korisničko ime: '',
 lozinka: '',
 potvrda lozinke: ''
 });
konst [pogreške, setErrors] = useState ({});
konst [isSubmitting, setIsSubmitting] = useState (lažno)
konst handleChange = e => {
konst {ime, vrijednost} = e.target;
setValues({
 ...vrijednosti,
[Ime]: vrijednost
 });
 }
konst handleSubmit = e => {
e.preventDefault();
 setErrors (potvrdi(vrijednosti));
 setIsSubmitting(pravi);
 }
 useEffect(() => {
 if (Objekt.ključevi (pogreške).dužina 0 && isSubmitting) {
 uzvratiti poziv();
 }
 }, [pogreške, povratni poziv, isSubmitting]);
povratak { handleChange, values, handleSubmit, errors };
}
izvozzadano useForm;

Običaj useForm kuka iznad određuje je li korisnik uspješno poslao obrazac. Ovaj događaj se događa samo ako su svi podaci unutar obrasca valjani.

Datoteka Form.js

uvoz Reagirati iz "reagirati";
uvoz Prijavite se iz "./Prijava";
uvoz Uspjeh iz "./Uspjeh"
uvoz { useState } iz "reagirati";
konst Obrazac = () => {
konst [isSubmitted, setIsSubmitted] = useState(lažno);
funkcijapodnesite obrazac() {
 setIsSubmitted(pravi);
 }
povratak (
<razd>
 {!isSubmited? (<SubmitForm za prijavu={submitForm} />): (<Uspjeh />)}
</div>
 )
}
izvozzadano Oblik;

The Oblik gornja komponenta prebacuje pogled između Prijavite se komponenta i Uspjeh komponenta ako se obrazac pošalje.

Datoteka App.js

uvoz Oblik iz "./components/Form";
funkcijaApp() {
povratak (
<div ime klase="App">
<Oblik/>
</div>
 );
}
izvozzadano Aplikacija;

Korisničko sučelje aplikacije Angular

UI prikazuje obrazac s jednim unosom za korisničko ime i dva unosa lozinke.

Kada obrazac sadrži nevažeće podatke, stranice prikazuju poruke o pogrešci:

Kada obrazac sadrži valjane podatke, korisnik ih može uspješno poslati:

Korisničko sučelje React aplikacije

Kada obrazac sadrži nevažeće podatke:

Kada obrazac sadrži valjane podatke:

Sličnosti i razlike između Reacta i Angulara

Angular i React okviri su nevjerojatno slični i sposobni proizvesti identične rezultate. Međutim, alati koje možete koristiti za postizanje ovih rezultata će se razlikovati. Angular je razvojna platforma koja omogućuje pristup alatima kao što su usmjerivač i knjižnica obrazaca. React zahtijeva malo više kreativnosti od programera da bi postigao iste rezultate.

Reagirajte vs. Angular: Zašto je React toliko popularniji?

Pročitajte dalje

O autoru