Angular JS vs. Reagoi JS

Angular ja React ovat kaksi suosituinta verkkosovellusten käyttöliittymäkehystä. Vaikka niiden soveltamisalat ovat hieman erilaisia ​​(toinen kehitysalusta, toinen kirjasto), niitä pidetään merkittävinä kilpailijoina. On turvallista olettaa, että voit käyttää kumpaa tahansa kehystä sovelluksen kehittämiseen.

Suurin kysymys on sitten: miksi valitsisit yhden toisen sijaan? Tämän artikkelin tarkoituksena on vastata siihen kehittämällä yksinkertainen rekisteröitymislomake. Lomake perustuu yksinomaan kunkin kehyksen validointiominaisuuksiin.

Edellytykset

Jatkaksesi sinun pitäisi pystyä asenna React ja heillä on yleinen käsitys kuinka React-sovellus toimii. Sinun tulisi myös tietää kuinka asentaa ja käytä Angular.

Jokaisen sovelluksen tiedostorakenne

React-lomakkeella on seuraava tiedostorakenne:

Angular-lomakkeella on seuraava tiedostorakenne:

Yllä oleva kuva näyttää vain Angular-sovelluksen muokatun osan.

Yllä olevista tiedostorakenteista näet, että molemmat kehykset ovat vahvasti riippuvaisia ​​komponenttien käytöstä.

Logiikan luominen jokaiselle lomakesovellukselle

Jokaisella hakemuksella on sama tarkoitus: lomake lähetetään vain, jos jokainen syöttökenttä sisältää kelvollisia tietoja. Käyttäjätunnuskenttä on kelvollinen, jos se sisältää vähintään yhden merkin. Kaksi salasanakenttää ovat voimassa, jos niiden arvot ovat samat.

Angular tarjoaa kaksi lomakkeenluontimenetelmää: mallipohjaisen ja reaktiivisen. Reaktiivisen lähestymistavan avulla kehittäjä voi luoda mukautettuja validointiehtoja. Mallipohjainen lähestymistapa sisältää ominaisuuksia, jotka yksinkertaistavat lomakkeiden validointia.

React pystyy kehittämään vain mukautetun vahvistuksen sisältävän lomakkeen. React on kuitenkin suosituin kehys ja sillä on suurempi yhteisö, joten Reactille on saatavilla monia lomakkeiden käsittelykirjastoja. Koska tavoitteena on välttää ulkoisten kirjastojen käyttöä, React-sovellus luottaa mukautettuun validointiin.

Mallin kehittäminen jokaiselle sovellukselle

Molemmat sovellukset luottavat malleihin lopullisen HTML-tulosteen luomiseksi.

Kulmikas HTML-malli

The form-signup.component.html tiedosto sisältää seuraavan koodin:

<div class="lomakkeen sisältö">
<muotoluokka ="muodossa" #omalomake="ngForm">
<h1>Täytä lomake liittyäksesi yhteisöömme!</h1>
<div class="muoto-syötteet">
<otsikko ="käyttäjätunnus" luokka="lomake-etiketti">Käyttäjätunnus:</label>
<syöttö
 id="käyttäjätunnus"
 tyyppi="teksti"
luokkaa="lomake-syöttö"
 paikkamerkki="Syötä käyttäjätunnus"
 nimi ="käyttäjätunnus"
 ngModel
 edellytetään
 #käyttäjänimi="ngModel"
 />
<p *ngIf="käyttäjätunnus.invalid && username.touched">Käyttäjätunnus vaaditaan</s>
</div>
<div class="muoto-syötteet">
<otsikko ="Salasana" luokka="lomake-etiketti">Salasana:</label>
<syöttö
 id="Salasana"
 tyyppi="Salasana"
 nimi ="Salasana"
luokkaa="lomake-syöttö"
 paikkamerkki="Kirjoita salasana"
 ngModel
 edellytetään
 #salasana="ngModel"
 [(ngModel)]="malli.salasana"
 />
<p *ngIf="salasana.invalid && salasana.kosketti">salasana vaaditaan</s>
</div>
<div class="muoto-syötteet">
<otsikko ="salasanan vahvistaminen" luokka="lomake-etiketti">Salasana:</label>
<syöttö
 id="vahvista salasana"
 tyyppi="Salasana"
 nimi ="vahvista salasana"
luokkaa="lomake-syöttö"
 paikkamerkki="Vahvista salasana"
 ngModel
 edellytetään
 #salasana2="ngModel"
 ngValidateEqual="Salasana"
 [(ngModel)]="model.confirmpassword"
 />
<div *ngIf="(password2.dirty || password2.touched) && salasana2.invalid">
<p *ngIf="password2.hasError('notTasainen') && salasana.valid">
 Salasanat tehdäeiottelu
</s>
</div>
</div>
<-painiketta
luokkaa="lomake-syöttö-btn"
 tyyppi="Lähetä"
 [pois käytöstä]="myForm.invalid"
 routerLink="/success"
>
 Kirjaudu
</button>
</form>
</div>

React HTML-malli

The Signup.js tiedosto sisältää seuraavan koodin:

tuonti Reagoi alkaen "reagoi";
tuonti käyttölomake alkaen "../useForm";
tuonti vahvistaa alkaen "../validateData";
tuonti "./Signup.css"
konst Ilmoittautuminen = ({submitForm}) => {
konst {handleChange, arvot, handleSubmit, errors} = useForm( submitForm, validate);
palata (
<div className="lomakkeen sisältö">
<muodossa luokannimi="muodossa" onSubmit={handleSubmit}>
<h1>Täytä lomake liittyäksesi yhteisöömme!</h1>
<div className="muoto-syötteet">
<otsikko htmlFor="käyttäjätunnus" luokannimi="lomake-etiketti">Käyttäjätunnus:</label>
<syöttö
 id="käyttäjätunnus"
 tyyppi="teksti"
 nimi ="käyttäjätunnus"
 luokannimi="muoto-syöttö"
 paikkamerkki="Syötä käyttäjätunnus"
 arvo={arvot.käyttäjänimi}
 onChange={handleChange}
 />
{errors.username &&<p>{errors.username}</s>}
</div>
<div className="muoto-syötteet">
<otsikko htmlFor="Salasana" luokannimi="lomake-etiketti"> Salasana: </label>
<syöttö
 id="Salasana"
 tyyppi="Salasana"
 nimi ="Salasana"
 luokannimi="muoto-syöttö"
 paikkamerkki="Kirjoita salasana"
 arvo={arvot.salasana}
 onChange={handleChange}
 />
{errors.password &&<p>{errors.password}</s>}
</div>
<div className="muoto-syötteet">
<otsikko htmlFor="salasanan vahvistaminen" luokannimi="lomake-etiketti"> Salasana: </label>
<syöttö
 id="salasanan vahvistaminen"
 tyyppi="Salasana"
 nimi ="salasanan vahvistaminen"
 luokannimi="muoto-syöttö"
 paikkamerkki="Vahvista salasana"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<p>{errors.passwordvalidate}</s>}
</div>
<painike luokanNimi="form-input-btn" tyyppi="Lähetä">Kirjaudu</button>
</form>
</div>
 )
}
viedäoletuksena Kirjaudu;

Huomaat, että molemmat sovellukset käyttävät HTML-peruskoodia, lukuun ottamatta joitain pieniä eroja. Esimerkiksi Angular-sovellus käyttää standardia "class" attribuuttia CSS-luokkien tunnistamiseen. React käyttää omaa mukautettua "className" -ominaisuutta. React muuttaa tämän tavalliseksi "luokka"-attribuutiksi lopullisessa lähdössä. Käyttöliittymällä on tärkeä rooli minkä tahansa sovelluksen onnistumisessa. Koska molemmat sovellukset käyttävät samaa HTML-rakennetta ja luokkanimiä, molemmat sovellukset voivat käyttää samaa tyylitaulukkoa.

Kaikki yllä olevien mallien epästandardit ominaisuudet liittyvät validointiin.

Lomakkeen vahvistuksen luominen kulmasovellukselle

Jotta voit käyttää vahvistusominaisuuksia, jotka ovat osa Angularin mallipohjaista lähestymistapaa, sinun on tuotava FormsModule in app.module.ts tiedosto.

App.module.ts-tiedosto

tuonti { NgModule } alkaen '@kulma/ydin';
tuonti { FormsModule } alkaen '@kulma/muodot';
tuonti { BrowserModule } alkaen '@kulma/alusta-selain';
tuonti { ValidateEqualModule } alkaen 'ng-validate-equal'
tuonti { AppRoutingModule } alkaen './app-routing.module';
tuonti { AppComponent } alkaen './app.component';
tuonti { FormSignupComponent } alkaen './form-signup/form-signup.component';
tuonti { FormSuccessComponent } alkaen './form-success/form-success.component';
@NgModule({
 ilmoitukset: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 tuonti: [
 Selainmoduuli,
 FormsModule,
 ValidateEqualModule,
 AppRoutingModule
 ],
tarjoajat: [],
bootstrap: [ AppComponent ]
})
viedäluokkaaAppModule{ }

Tuomalla FormsModule yllä olevassa tiedostossa sinulla on nyt pääsy useisiin eri vahvistusominaisuuksiin. Sinun on lisättävä ngModel ominaisuuden Angular HTML -mallin syöttökenttiin. Jos katsot taaksepäin yllä olevaa Angular-mallia, huomaat, että jokaisella syöttöelementillä on tämä ominaisuus.

The FormsModule ja ngModel anna kehittäjälle pääsy validointiominaisuuksiin, kuten pätevä ja virheellinen. Angular HTML -mallin kappaleosiossa käytetään #username=”ngModel” omaisuutta. Se tuottaa varoituksen, jos syöttökentän tiedot ovat virheellisiä ja käyttäjä on muuttanut niitä.

Vuonna app.module.ts tiedosto, näet myös ValidateEqualModule, joka vertaa kahta salasanaa. Tätä varten sinun on luotava malliobjekti tiedostoon form-signup.component.ts tiedosto.

Form-signup.component.ts-tiedosto

tuonti { Komponentti, OnInit } alkaen '@kulma/ydin';
@Komponentti({
 valitsin: 'app-form-signup',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
viedä luokkaaFormSignupComponenttoteuttaaOnInit{
rakentaja() { }
 ngOnInit(): mitätön {}
 malli = {
 Salasana: tyhjä,
 vahvista salasana: tyhjä
 };
}

Angular HTML -mallin toinen salasana käyttää malli- -objekti yllä olevassa tiedostossa, jotta voit verrata sen arvoa ensimmäiseen salasanaan.

The liikuntarajoitteinen Lähetä-painikkeen ominaisuus varmistaa, että se pysyy passiivisena, kunnes jokainen syöttökenttä sisältää kelvollisia tietoja. Lomakkeen lähettäminen tuo käyttäjän menestyssivulle Angularin reitittimen avulla.

App.routing.module.ts-tiedosto

tuonti { NgModule } alkaen '@kulma/ydin';
tuonti { RouterModule, Routes } alkaen '@kulma/reititin';
tuonti { FormSignupComponent } alkaen './form-signup/form-signup.component';
tuonti { FormSuccessComponent } alkaen './form-success/form-success.component';
konst reitit: Routes = [{
 polku: '',
 komponentti: FormSignupComponent
},{
 polku: 'menestys',
 komponentti: FormSuccessComponent
}];
@NgModule({
tuonti: [RouterModule.forRoot (reitit)],
vientiä: [RouterModule]
})
viedäluokkaaAppRoutingModule{ }

Yllä oleva reititysmoduuli sisältää kaksi polkua; muodon pääpolku ja menestyskomponentin menestyspolku.

App.component.html-tiedosto

<reititin-pistorasia></router-outlet>

Yllä olevassa sovelluksen komponenttitiedostossa olevan reitittimen ulostulon avulla käyttäjä voi helposti navigoida välillä lomake-ilmoittautuminen ja muoto-menestys URL-osoitteita käyttävät komponentit.

Lomakkeen vahvistuksen luominen React-sovellukselle

viedäoletuksenatoimintovalidateData(arvot) {
antaa virheet = {}
jos (!arvot.käyttäjänimi.trimmata()) {
 errors.username = "Käyttäjätunnus vaaditaan";
 }
jos (!arvot.Salasana) {
 errors.password = "salasana vaaditaan";
 }
jos (!arvot.passwordvalidate) {
 errors.passwordvalidate = "salasana vaaditaan";
 } muujos (values.passwordvalidate !== arvot.salasana) {
 errors.passwordvalidate = "Salasanat tehdäeiottelu";
 }
palata virheet;
}

The valideData.js tiedosto sisältää yllä olevan koodin. Se valvoo jokaista lomakkeen syöttökenttää varmistaakseen, että jokainen kenttä sisältää kelvollisia tietoja.

UseForm.js-tiedosto

tuonti {useState, useEffect} alkaen "reagoi";
konst useForm = (takaisinsoitto, vahvista) => {
konst [arvot, setValues] = useState({
 käyttäjätunnus: '',
 Salasana: '',
 Vahvista salasana: ''
 });
konst [errors, setErrors] = useState ({});
konst [isSubmitting, setIsSubmitting] = useState (väärä)
konst HandChange = e => {
konst {nimi, arvo} = e.target;
setValues({
 ...arvot,
[nimi]: arvo
 });
 }
konst handleSubmit = e => {
e.preventDefault();
 setErrors (validate(arvot));
 setIsSubmitting(totta);
 }
 useEffect(() => {
 if (Object.keys (errors).length 0 && isSubmitting) {
 soita takaisin();
 }
 }, [virheet, takaisinsoitto, isSubmitting]);
palata { handleChange, values, handleSubmit, errors };
}
viedäoletuksena käyttölomake;

Tapa käyttölomake yllä oleva koukku määrittää, lähettääkö käyttäjä lomakkeen onnistuneesti. Tämä tapahtuma tapahtuu vain, jos kaikki lomakkeen tiedot ovat kelvollisia.

Form.js-tiedosto

tuonti Reagoi alkaen "reagoi";
tuonti Kirjaudu alkaen "./Kirjaudu";
tuonti Menestys alkaen "./Menestys"
tuonti { useState } alkaen "reagoi";
konst muoto = () => {
konst [isSubmitted, setIsSubmitted] = useState(väärä);
toimintoLähetä lomake() {
 setIsSubmitted(totta);
 }
palata (
<div>
 {!on Submitted? (<Ilmoittautuminen submitForm={submitForm} />): (<Menestystä />)}
</div>
 )
}
viedäoletuksena muoto;

The Lomake yllä oleva komponentti vaihtaa näkymän välillä Kirjaudu komponentti ja Menestys komponentti, jos lomake lähettää.

App.js-tiedosto

tuonti Lomake alkaen "./components/Form";
toimintoSovellus() {
palata (
<div className="Sovellus">
<Lomake/>
</div>
 );
}
viedäoletuksena Sovellus;

Angular-sovelluksen käyttöliittymä

Käyttöliittymä näyttää lomakkeen, jossa on yksi käyttäjätunnus ja kaksi salasanaa.

Kun lomake sisältää virheellisiä tietoja, sivuilla näkyy virheilmoituksia:

Kun lomake sisältää kelvollisia tietoja, käyttäjä voi lähettää ne onnistuneesti:

React-sovelluksen käyttöliittymä

Kun lomake sisältää virheellisiä tietoja:

Kun lomake sisältää kelvollisia tietoja:

Reaktion ja kulman yhtäläisyydet ja erot

Angular- ja React-kehykset ovat huomattavan samanlaisia ​​ja pystyvät tuottamaan identtisiä tuloksia. Kuitenkin työkalut, joita saatat käyttää näiden tulosten saavuttamiseen, vaihtelevat. Angular on kehitysalusta, joka tarjoaa pääsyn työkaluihin, kuten reitittimeen ja lomakekirjastoon. React vaatii kehittäjältä hieman enemmän luovuutta samojen tulosten saavuttamiseksi.

Reagoi vs. Angular: Miksi React on niin paljon suositumpi?

Lue Seuraava

Kirjailijasta