Angular JS vs. Reagálj JS

Az Angular és a React a webalkalmazások két legnépszerűbb frontend keretrendszere. Bár hatókörük kissé eltér (az egyik fejlesztői platform, a másik egy könyvtár), jelentős versenytársaknak tekintik őket. Feltételezhető, hogy bármelyik keretrendszert használhatja egy alkalmazás fejlesztésére.

A fő kérdés ezután az: miért választaná az egyiket a másik helyett? Ez a cikk erre keres választ egy egyszerű regisztrációs űrlap kidolgozásával. Az űrlap kizárólag az egyes keretrendszerek érvényesítési képességeire támaszkodik.

Előfeltételek

A folytatáshoz képesnek kell lennie telepítse a Reactot és általános megértése van hogyan működik egy React alkalmazás. Azt is tudnia kell, hogyan kell telepíteni és használd az Angular-t.

Az egyes alkalmazások fájlszerkezete

A React űrlap a következő fájlszerkezettel rendelkezik:

Az Angular form a következő fájlszerkezettel rendelkezik:

A fenti kép csak az Angular alkalmazás szerkesztett részét mutatja.

A fenti fájlstruktúrákból látható, hogy mindkét keretrendszer nagymértékben támaszkodik az összetevők használatára.

Logika létrehozása minden űrlapalkalmazáshoz

Minden pályázatnak ugyanaz a célja: az űrlap csak akkor kerül benyújtásra, ha minden beviteli mező érvényes adatot tartalmaz. A felhasználónév mező akkor érvényes, ha legalább egy karaktert tartalmaz. A két jelszómező akkor érvényes, ha értékeik azonosak.

Az Angular két űrlap-létrehozási módszert biztosít: sablonvezérelt és reaktív. A reaktív megközelítés lehetővé teszi a fejlesztő számára, hogy egyéni érvényesítési feltételeket hozzon létre. A sablonvezérelt megközelítés olyan tulajdonságokkal rendelkezik, amelyek leegyszerűsítik az űrlap érvényesítését.

A React csak egyéni érvényesítéssel tud űrlapot fejleszteni. A React azonban a népszerűbb keretrendszer, és nagyobb közösséggel rendelkezik, így sok űrlapkezelő könyvtár érhető el a React számára. Tekintettel arra, hogy itt a cél a külső könyvtárak használatának elkerülése, a React alkalmazás egyéni ellenőrzésre támaszkodik.

Sablon fejlesztése minden alkalmazáshoz

Mindkét alkalmazás sablonokra támaszkodik a végső HTML-kimenet létrehozásához.

Szögletes HTML sablon

A form-signup.component.html fájl a következő kódot tartalmazza:

<div class="forma-tartalom">
<form class="forma" #myForm="ngForm">
<h1>Töltse ki az űrlapot, hogy csatlakozzon közösségünkhöz!</h1>
<div class="forma-bemenetek">
<címke ="felhasználónév" osztály="forma-címke">Felhasználónév:</label>
<bemenet
 id="felhasználónév"
 típus="szöveg"
osztály="form-input"
 helyőrző="Adja meg a felhasználónevet"
 név="felhasználónév"
 ngModel
 kívánt
 #felhasználónév="ngModel"
 />
<p *ngIf="username.invalid && username.touched">Felhasználónév szükséges</p>
</div>
<div class="forma-bemenetek">
<címke ="Jelszó" osztály="forma-címke">Jelszó:</label>
<bemenet
 id="Jelszó"
 típus="Jelszó"
 név="Jelszó"
osztály="form-input"
 helyőrző="Írd be a jelszót"
 ngModel
 kívánt
 #jelszó="ngModel"
 [(ngModel)]="modell.jelszó"
 />
<p *ngIf="Érvénytelen jelszó && jelszó.érintett">jelszó szükséges</p>
</div>
<div class="forma-bemenetek">
<címke ="jelszó érvényesítése" osztály="forma-címke">Jelszó:</label>
<bemenet
 id="jelszó megerősítése"
 típus="Jelszó"
 név="jelszó megerősítése"
osztály="form-input"
 helyőrző="Jelszó megerősítése"
 ngModel
 kívánt
 #jelszó2="ngModel"
 ngValidateEqual="Jelszó"
 [(ngModel)]="model.confirmpassword"
 />
<div *ngIf="(password2.dirty || password2.touched) && jelszó2.invalid">
<p *ngIf="password2.hasError('nem egyenlő') && jelszó.érvényes">
 Jelszavak csináldnemmérkőzés
</p>
</div>
</div>
<gomb
osztály="form-input-btn"
 típus="Beküldés"
 [letiltva]="myForm.invalid"
 routerLink="/success"
>
 Regisztrálj
</button>
</form>
</div>

React HTML sablon

A Signup.js fájl a következő kódot tartalmazza:

import Reagál tól től "reagál";
import useForm tól től "../useForm";
import érvényesít tól től "../validateData";
import "./Signup.css"
const Regisztráció = ({submitForm}) => {
const {handleChange, value, handleSubmit, errors} = useForm( submitForm, validate);
Visszatérés (
<div className="forma-tartalom">
<form className="forma" onSubmit={handleSubmit}>
<h1>Töltse ki az űrlapot, hogy csatlakozzon közösségünkhöz!</h1>
<div className="forma-bemenetek">
<címke htmlFor="felhasználónév" osztálynév="forma-címke">Felhasználónév:</label>
<bemenet
 id="felhasználónév"
 típus="szöveg"
 név="felhasználónév"
 osztálynév="forma-bevitel"
 helyőrző="Adja meg a felhasználónevet"
 érték={értékek.felhasználónév}
 onChange={handleChange}
 />
{errors.username &&<p>{errors.username}</p>}
</div>
<div className="forma-bemenetek">
<címke htmlFor="Jelszó" osztálynév="forma-címke"> Jelszó: </label>
<bemenet
 id="Jelszó"
 típus="Jelszó"
 név="Jelszó"
 osztálynév="forma-bevitel"
 helyőrző="Írd be a jelszót"
 value={values.password}
 onChange={handleChange}
 />
{errors.password &&<p>{errors.password}</p>}
</div>
<div className="forma-bemenetek">
<címke htmlFor="jelszó érvényesítése" osztálynév="forma-címke"> Jelszó: </label>
<bemenet
 id="jelszó érvényesítése"
 típus="Jelszó"
 név="jelszó érvényesítése"
 osztálynév="forma-bevitel"
 helyőrző="Jelszó megerősítése"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<p>{errors.passwordvalidate}</p>}
</div>
<gomb className="form-input-btn" típus="Beküldés">Regisztrálj</button>
</form>
</div>
 )
}
exportalapértelmezett Regisztrálj;

Észreveheti, hogy mindkét alkalmazás alapvető HTML-kódot használ, néhány kisebb eltéréstől eltekintve. Például az Angular alkalmazás a szabványos „class” attribútumot használja a CSS-osztályok azonosítására. A React saját egyéni „className” tulajdonságát használja. A React ezt a szabványos „class” attribútummá alakítja át a végső kimenetben. A felhasználói felület fontos szerepet játszik bármely alkalmazás sikerében. Mivel mindkét alkalmazás ugyanazt a HTML-struktúrát és osztályneveket használja, mindkét alkalmazás ugyanazt a stíluslapot használhatja.

A fenti sablonokban szereplő összes nem szabványos tulajdonság érvényesítésre vonatkozik.

Űrlapérvényesítés létrehozása a szögletes alkalmazáshoz

Az Angular sablonvezérelt megközelítésének részét képező érvényesítési tulajdonságok eléréséhez importálnia kell a FormsModule ban,-ben app.module.ts fájlt.

Az app.module.ts fájl

import { NgModule } tól től '@szögletes/mag';
import { FormsModule } tól től '@angular/forms';
import { BrowserModule } tól től '@angular/platform-browser';
import { ValidateEqualModule } tól től "ng-validate-equal"
import { AppRoutingModule } tól től './app-routing.module';
import { AppComponent } tól től './app.component';
import { FormSignupComponent } tól től './form-signup/form-signup.component';
import { FormSuccessComponent } tól től './form-success/form-success.component';
@NgModule({
 nyilatkozatok: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 import: [
 Böngészőmodul,
 FormsModule,
 ValidateEqualModule,
 AppRoutingModule
 ],
szolgáltatók: [],
bootstrap: [ AppComponent ]
})
exportosztályAppModule{ }

Az importálással a FormsModule a fenti fájlban most számos különböző érvényesítési tulajdonsághoz férhet hozzá. Hozzá kell adnia a ngModel tulajdonságot az Angular HTML sablon beviteli mezőihez. Ha visszanéz a fenti Angular sablonra, látni fogja, hogy minden bemeneti elem rendelkezik ezzel a tulajdonsággal.

A FormsModule és ngModel hozzáférést biztosít a fejlesztőnek az érvényesítési tulajdonságokhoz, mint pl érvényes és érvénytelen. Az Angular HTML sablon bekezdés szakasza a #username=”ngModel” ingatlan. Figyelmeztetést ad, ha a beviteli mezőben szereplő adatok érvénytelenek és a felhasználó megváltoztatta azokat.

Ban,-ben app.module.ts fájlt is látni fogja ValidateEqualModule, amely összehasonlítja a két jelszót. Ehhez létre kell hoznia egy modellobjektumot a form-signup.component.ts fájlt.

A form-signup.component.ts fájl

import { Komponens, OnInit } tól től '@szögletes/mag';
@Összetevő({
 választó: 'app-form-signup',
 sablonUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
export osztályFormSignupComponentmegvalósítjaOnInit{
konstruktőr() { }
 ngOnInit(): üres {}
 modell = {
 Jelszó: nulla,
 jelszó megerősítése: nulla
 };
}

Az Angular HTML sablon második jelszava a modell objektumot a fenti fájlban, hogy összehasonlítsa az értékét az első jelszóval.

A Tiltva A küldés gomb tulajdonsága biztosítja, hogy inaktív maradjon mindaddig, amíg minden beviteli mező érvényes adatot nem tartalmaz. Az űrlap elküldésével a felhasználó egy sikeres oldalra kerül az Angular router segítségével.

Az app.routing.module.ts fájl

import { NgModule } tól től '@szögletes/mag';
import { RouterModule, Routes } tól től '@angular/router';
import { FormSignupComponent } tól től './form-signup/form-signup.component';
import { FormSuccessComponent } tól től './form-success/form-success.component';
const útvonalak: Routes = [{
 pálya: '',
 komponens: FormSignupComponent
},{
 pálya: 'siker',
 komponens: FormSuccessComponent
}];
@NgModule({
behozatal: [RouterModule.forRoot (útvonalak)],
export: [RouterModule]
})
exportosztályAppRoutingModule{ }

A fenti útválasztó modul két útvonalat tartalmaz; a forma fő útja és a sikerkomponens sikerútja.

Az app.component.html fájl

<router-kimenet></router-outlet>

A fenti alkalmazáskomponens-fájlban található útválasztó kimenet lehetővé teszi a felhasználó számára, hogy könnyen navigáljon a űrlap-regisztráció és forma-siker URL-eket használó összetevők.

Űrlapérvényesítés létrehozása a React alkalmazáshoz

exportalapértelmezettfunkcióvalidateData(értékeket) {
hagyja hibák = {}
ha (!értékeket.felhasználónév.trim()) {
 errors.username = "Felhasználónév szükséges";
 }
ha (!értékeket.Jelszó) {
 errors.password = "jelszó szükséges";
 }
ha (!értékeket.passwordvalidate) {
 errors.passwordvalidate = "jelszó szükséges";
 } másha (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Jelszavak csináldnemmérkőzés";
 }
Visszatérés hibák;
}

A validateData.js fájl tartalmazza a fenti kódot. Figyeli az űrlap minden beviteli mezőjét, hogy megbizonyosodjon arról, hogy minden mező érvényes adatokat tartalmaz.

A useForm.js fájl

import {useState, useEffect} tól től 'reagál';
const useForm = (visszahívás, érvényesítés) => {
const [értékek, setValues] = useState({
 felhasználónév: '',
 Jelszó: '',
 jelszó érvényesítése: ''
 });
const [errors, setErrors] = useState ({});
const [isSubmitting, setIsSubmitting] = useState (hamis)
const handChange = e => {
const {név, érték} = e.target;
setValues({
 ...értékek,
[név]: érték
 });
 }
const handleSubmit = e => {
e.preventDefault();
 setErrors (validate(értékeket));
 setIsSubmitting(igaz);
 }
 useEffect(() => {
 if (Object.keys (errors).length 0 && isSubmitting) {
 visszahív();
 }
 }, [errors, callback, isSubmitting]);
Visszatérés { handleChange, értékek, handleSubmit, errors };
}
exportalapértelmezett useForm;

A szokás useForm A fenti hook határozza meg, hogy a felhasználó sikeresen elküldte-e az űrlapot. Ez az esemény csak akkor következik be, ha az űrlapon lévő összes adat érvényes.

A Form.js fájl

import Reagál tól től "reagál";
import Regisztrálj tól től "./Regisztrálj";
import Siker tól től "./Siker"
import { useState } tól től "reagál";
const Form = () => {
const [isSubmitted, setIsSubmitted] = useState(hamis);
funkcióűrlap benyújtása() {
 setIsSubmitted(igaz);
 }
Visszatérés (
<div>
 {!is Submitted? (<Regisztráció submitForm={submitForm} />): (<Siker />)}
</div>
 )
}
exportalapértelmezett Forma;

A Forma fenti komponens átkapcsolja a nézetet a Regisztrálj komponens és a Siker összetevőt, ha az űrlap elküldi.

Az App.js fájl

import Forma tól től "./components/Form";
funkcióApp() {
Visszatérés (
<div className="App">
<Forma/>
</div>
 );
}
exportalapértelmezett App;

Az Angular Application UI

A felhasználói felület egy űrlapot jelenít meg, amelyben egy felhasználónév és két jelszó megadható.

Ha az űrlap érvénytelen adatokat tartalmaz, az oldalak hibaüzeneteket jelenítenek meg:

Ha az űrlap érvényes adatokat tartalmaz, a felhasználó sikeresen beküldheti:

A React alkalmazás felhasználói felülete

Ha az űrlap érvénytelen adatokat tartalmaz:

Ha az űrlap érvényes adatokat tartalmaz:

Hasonlóságok és különbségek a React és az Angular között

Az Angular és React keretrendszerek rendkívül hasonlóak, és azonos eredményeket képesek produkálni. Az eredmények eléréséhez használt eszközök azonban eltérőek lehetnek. Az Angular egy fejlesztői platform, amely hozzáférést biztosít olyan eszközökhöz, mint az útválasztó és az űrlapkönyvtár. A React egy kicsit több kreativitást igényel a fejlesztőtől, hogy ugyanazokat az eredményeket érje el.

Reagálni vs. Angular: Miért olyan népszerűbb a React?

Olvassa el a következőt

A szerzőről