Angular JS vs. Reacționează JS

Angular și React sunt două dintre cadrele frontale de top pentru aplicațiile web. Deși domeniile lor sunt ușor diferite (una o platformă de dezvoltare, cealaltă o bibliotecă), ei sunt văzuți ca concurenți majori. Este sigur să presupunem că puteți utiliza oricare cadru pentru a dezvolta o aplicație.

Întrebarea majoră devine atunci: de ce ai alege unul în locul celuilalt? Acest articol își propune să răspundă prin dezvoltarea unui formular simplu de înscriere. Formularul se va baza exclusiv pe capacitățile de validare ale fiecărui cadru.

Cerințe preliminare

Pentru a continua, ar trebui să poți instalați React și au o înțelegere generală a cum funcționează o aplicație React. De asemenea, ar trebui să știți cum să instalați și utilizați Angular.

Structura de fișiere a fiecărei aplicații

Formularul React are următoarea structură de fișiere:

Formularul Angular are următoarea structură de fișiere:

Imaginea de mai sus afișează doar secțiunea editată a aplicației Angular.

Din structurile de fișiere de mai sus puteți vedea că ambele cadre se bazează în mare măsură pe utilizarea componentelor.

Crearea logicii pentru fiecare cerere de formular

Fiecare cerere va avea același scop: formularul se trimite numai dacă fiecare câmp de introducere conține date valide. Câmpul nume de utilizator este valid dacă conține cel puțin un caracter. Cele două câmpuri de parolă sunt valide dacă valorile lor sunt identice.

Angular oferă două metode de creare a formularelor: bazată pe șablon și reactivă. Abordarea reactivă permite dezvoltatorului să creeze criterii de validare personalizate. Abordarea bazată pe șablon vine cu proprietăți care simplifică validarea formularelor.

React este capabil să dezvolte doar un formular cu validare personalizată. Cu toate acestea, React este cel mai popular cadru și are o comunitate mai mare, așa că multe biblioteci de gestionare a formularelor sunt disponibile pentru React. Având în vedere că scopul aici este evitarea utilizării bibliotecilor externe, aplicația React se va baza pe validarea personalizată.

Dezvoltarea șablonului pentru fiecare aplicație

Ambele aplicații se bazează pe șabloane pentru a crea rezultatul HTML final.

Șablon HTML unghiular

The form-signup.component.html fișierul conține următorul cod:

<div class="formă-conținut">
<forma clasa="formă" #myForm="ngForm">
<h1>Completați formularul pentru a vă alătura comunității noastre!</h1>
<div class="formulare-intrari">
<etichetă pentru="nume de utilizator" clasa="formă-etichetă">Nume de utilizator:</label>
<intrare
 id="nume de utilizator"
 tip="text"
clasă="form-input"
 substituent="Introduceti numele de utilizator"
 nume="nume de utilizator"
 ngModel
 necesar
 #nume utilizator="ngModel"
 />
<p *ngIf="nume de utilizator.invalid && nume de utilizator.atins">Numele de utilizator este necesar</p>
</div>
<div class="formulare-intrari">
<etichetă pentru="parola" clasa="formă-etichetă">Parola:</label>
<intrare
 id="parola"
 tip="parola"
 nume="parola"
clasă="form-input"
 substituent="Introdu parola"
 ngModel
 necesar
 #parola="ngModel"
 [(ngModel)]="model.parolă"
 />
<p *ngIf="Parolă invalidă && parola.atins">este necesară parola</p>
</div>
<div class="formulare-intrari">
<etichetă pentru="parolavalidate" clasa="formă-etichetă">Parola:</label>
<intrare
 id="Confirmă parola"
 tip="parola"
 nume="Confirmă parola"
clasă="form-input"
 substituent="Confirmă parola"
 ngModel
 necesar
 #parola2="ngModel"
 ngValidateEqual="parola"
 [(ngModel)]="model.confirma parola"
 />
<div *ngIf="(parola2.murdar || parola2.atins) && parola2.invalid">
<p *ngIf="parola2.hasError('nu este egal') && parola.valid">
 Parole donuMeci
</p>
</div>
</div>
<buton
clasă="form-input-btn"
 tip="Trimite"
 [dezactivat]="myForm.invalid"
 routerLink="/success"
>
 Inscrie-te
</button>
</form>
</div>

Șablon HTML React

The Signup.js fișierul conține următorul cod:

import Reacţiona din "reacţiona";
import useForm din „../useForm”;
import valida din „../validateData”;
import "./Signup.css"
const Înregistrare = ({submitForm}) => {
const {handleChange, values, handleSubmit, errors} = useForm( submitForm, validate);
întoarcere (
<div className="formă-conținut">
<formular className="formă" onSubmit={handleSubmit}>
<h1>Completați formularul pentru a vă alătura comunității noastre!</h1>
<div className="formulare-intrari">
<etichetă htmlFor="nume de utilizator" className="formă-etichetă">Nume de utilizator:</label>
<intrare
 id="nume de utilizator"
 tip="text"
 nume="nume de utilizator"
 className="formular-input"
 substituent="Introduceti numele de utilizator"
 value={values.username}
 onChange={handleChange}
 />
{errors.nume utilizator &&<p>{errors.username}</p>}
</div>
<div className="formulare-intrari">
<etichetă htmlFor="parola" className="formă-etichetă"> Parola: </label>
<intrare
 id="parola"
 tip="parola"
 nume="parola"
 className="formular-input"
 substituent="Introdu parola"
 valoare={values.parola}
 onChange={handleChange}
 />
{erori.parolă &&<p>{errors.password}</p>}
</div>
<div className="formulare-intrari">
<etichetă htmlFor="parolavalidate" className="formă-etichetă"> Parola: </label>
<intrare
 id="parolavalidate"
 tip="parola"
 nume="parolavalidate"
 className="formular-input"
 substituent="Confirmă parola"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<p>{errors.passwordvalidate}</p>}
</div>
<butonul className="formular-intrare-btn" tip="Trimite">Inscrie-te</button>
</form>
</div>
 )
}
exportMod implicit Inscrie-te;

Veți observa că ambele aplicații folosesc cod HTML de bază, cu excepția unor diferențe minore. De exemplu, aplicația Angular utilizează atributul standard „clasă” pentru a identifica clasele CSS. React folosește propria proprie proprietate personalizată „className”. React transformă acest lucru în atributul standard „clasă” în rezultatul final. Interfața de utilizare joacă un rol important în succesul oricărei aplicații. Deoarece ambele aplicații folosesc aceeași structură HTML și nume de clasă, ambele aplicații pot folosi aceeași foaie de stil.

Toate proprietățile non-standard din șabloanele de mai sus se referă la validare.

Crearea validării formularului pentru aplicația Angular

Pentru a accesa proprietățile de validare care fac parte din abordarea bazată pe șablon a Angular, va trebui să importați FormsModule în aplicație.modul.ts fişier.

Fișierul app.module.ts

import { NgModule } din '@angular/core';
import { FormsModule } din '@angular/forms';
import { BrowserModule } din '@angular/platform-browser';
import { ValidateEqualModule } din 'ng-validate-equal'
import { AppRoutingModule } din './app-routing.module';
import { AppComponent } din './app.component';
import { FormSignupComponent } din './form-signup/form-signup.component';
import { FormSuccessComponent } din './form-succes/form-success.component';
@NgModule({
 declarații: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 importuri: [
 BrowserModule,
 FormsModule,
 ValidateEqualModule,
 AppRoutingModule
 ],
furnizorii: [],
bootstrap: [AppComponent]
})
exportclasăAppModule{ }

Prin importul FormsModule în fișierul de mai sus, acum aveți acces la o serie de proprietăți de validare diferite. Va trebui să adăugați ngModel proprietate la câmpurile de intrare ale șablonului HTML Angular. Dacă vă uitați înapoi la șablonul Angular de mai sus, veți vedea că fiecare dintre elementele de intrare are această proprietate.

The FormsModule și ngModel oferiți dezvoltatorului acces la proprietăți de validare, cum ar fi valabil și invalid. Secțiunea de paragraf a șablonului HTML Angular utilizează #username="ngModel” proprietate. Produce un avertisment dacă datele din câmpul de intrare sunt invalide și utilizatorul le-a schimbat.

În aplicație.modul.ts fișier, veți vedea și fișierul ValidateEqualModule, care compară cele două parole. Pentru a face acest lucru, va trebui să creați un obiect model în formular-înscriere.component.ts fişier.

Fișierul form-signup.component.ts

import { Componentă, OnInit } din '@angular/core';
@Component({
 selector: 'aplicație-formular-înscriere',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
export clasăFormSignupComponentunelteOnInit{
constructor() { }
 ngOnInit(): vid {}
 model = {
 parola: nul,
 Confirmă parola: nul
 };
}

A doua parolă din șablonul Angular HTML folosește model obiect din fișierul de mai sus, pentru a compara valoarea acestuia cu prima parolă.

The dezactivat proprietatea de pe butonul de trimitere asigură că rămâne inactiv până când fiecare câmp de intrare conține date valide. Trimiterea formularului aduce utilizatorul la o pagină de succes cu ajutorul routerului Angular.

Fișierul app.routing.module.ts

import { NgModule } din '@angular/core';
import { RouterModule, Routes } din '@angular/router';
import { FormSignupComponent } din './form-signup/form-signup.component';
import { FormSuccessComponent } din './form-succes/form-success.component';
const rute: Rute = [{
 cale: '',
 componentă: FormSignupComponent
},{
 cale: 'succes',
 componentă: FormSuccessComponent
}];
@NgModule({
importurilor: [RouterModule.forRoot (rute)],
exporturi: [RouterModule]
})
exportclasăAppRoutingModule{ }

Modulul de rutare de mai sus conține două căi; calea principală pentru formă și o cale de succes pentru componenta de succes.

Fișierul app.component.html

<router-priză></router-outlet>

Priza routerului din fișierul component al aplicației de mai sus permite unui utilizator să navigheze cu ușurință între formular-înscriere și forma-succes componente folosind URL-uri.

Crearea validării formularului pentru aplicația React

exportMod implicitfuncţievalidateData(valorile) {
lăsa erori = {}
dacă (!valorile.nume de utilizator.tunde()) {
 errors.username = "Numele de utilizator este necesar";
 }
dacă (!valorile.parola) {
 erori.parola = "Este necesară parola";
 }
dacă (!valorile.validare parolă) {
 erori.passwordvalidate = "Este necesară parola";
 } altfeldacă (values.passwordvalidate !== values.parola) {
 errors.passwordvalidate = „Parole donuMeci";
 }
întoarcere erori;
}

The validateData.js fișierul conține codul de mai sus. Monitorizează fiecare câmp de intrare din formular pentru a se asigura că fiecare câmp conține date valide.

Fișierul useForm.js

import {useState, useEffect} din 'reacţiona';
const useForm = (apel invers, validare) => {
const [valori, setValues] = useState({
 nume de utilizator: '',
 parola: '',
 parolavalidate: ''
 });
const [errors, setErrors] = useState ({});
const [isSubmitting, setIsSubmitting] = useState (fals)
const handleChange = e => {
const {nume, valoare} = e.target;
setValues({
 ...valori,
[Nume]: valoare
 });
 }
const handleSubmit = e => {
e.preventDefault();
 setErrors (validare(valorile));
 setIsSubmitting(Adevărat);
 }
 useEffect(() => {
 if (Obiect.chei (erori).lungime 0 && isSubmitting) {
 sună din nou();
 }
 }, [erori, apel invers, isSubmitting]);
întoarcere { handleChange, values, handleSubmit, errors };
}
exportMod implicit useForm;

Obiceiul useForm cârligul de mai sus determină dacă utilizatorul trimite cu succes formularul. Acest eveniment are loc numai dacă toate datele din formular sunt valide.

Fișierul Form.js

import Reacţiona din "reacţiona";
import Inscrie-te din "./Inscrie-te";
import Succes din "./Succes"
import { useState } din "reacţiona";
const Formular = () => {
const [isSubmitted, setIsSubmitted] = useState(fals);
funcţiesubmitForm() {
 setIsSubmitted(Adevărat);
 }
întoarcere (
<div>
 {!este Trimis? (<Înregistrare submitForm={submitForm} />): (<Succes />)}
</div>
 )
}
exportMod implicit Formă;

The Formă componenta de mai sus comută vederea între Inscrie-te componentă și cel Succes componentă dacă formularul se depune.

Fișierul App.js

import Formă din „./componente/Formular”;
funcţieApp() {
întoarcere (
<div className="App">
<Formă/>
</div>
 );
}
exportMod implicit Aplicație;

Interfața de utilizare a aplicației Angular

Interfața de utilizare afișează un formular cu o intrare pentru numele de utilizator și două intrări pentru parolă.

Când formularul conține date nevalide, paginile afișează mesaje de eroare:

Când formularul conține date valide, utilizatorul le poate trimite cu succes:

Interfața de utilizare a aplicației React

Când formularul conține date nevalide:

Când formularul conține date valide:

Asemănări și diferențe între React și Angular

Cadrele Angular și React sunt remarcabil de similare și capabile să producă rezultate identice. Cu toate acestea, instrumentele pe care le puteți utiliza pentru a obține aceste rezultate vor diferi. Angular este o platformă de dezvoltare care oferă acces la instrumente precum un router și o bibliotecă de formulare. React necesită puțin mai multă creativitate din partea dezvoltatorului pentru a obține aceleași rezultate.

Reacționează vs. Angular: De ce este React atât de mult mai popular?

Citiți în continuare

Despre autor