Angular JS vs. Reagovat JS

Angular a React jsou dva z nejlepších frontendových frameworků pro webové aplikace. Přestože se jejich rozsahy mírně liší (jedna vývojová platforma, druhá knihovna), jsou považováni za hlavní konkurenty. Je bezpečné předpokládat, že k vývoji aplikace můžete použít kterýkoli rámec.

Hlavní otázka pak zní: proč byste si vybrali jedno před druhým? Tento článek si klade za cíl odpovědět na to vytvořením jednoduchého přihlašovacího formuláře. Formulář se bude spoléhat pouze na možnosti ověření každého rámce.

Předpoklady

Chcete-li pokračovat, měli byste být schopni nainstalovat React a mít obecné porozumění jak funguje aplikace React. Měli byste také vědět, jak nainstalovat a použijte Angular.

Struktura souborů každé aplikace

Formulář React má následující strukturu souborů:

Angular forma má následující strukturu souboru:

Obrázek výše zobrazuje pouze upravenou část aplikace Angular.

Z výše uvedených struktur souborů můžete vidět, že oba rámce do značné míry spoléhají na použití komponent.

Vytvoření logiky pro každou formulářovou aplikaci

Každá žádost bude mít stejný účel: formulář se odešle pouze v případě, že každé vstupní pole obsahuje platná data. Pole uživatelského jména je platné, pokud obsahuje alespoň jeden znak. Dvě pole hesla jsou platná, pokud jsou jejich hodnoty totožné.

Angular poskytuje dvě metody vytváření formulářů: řízené šablonou a reaktivní. Reaktivní přístup umožňuje vývojářům vytvářet vlastní ověřovací kritéria. Přístup řízený šablonami přichází s vlastnostmi, které zjednodušují ověřování formulářů.

React je schopen vyvinout pouze formulář s vlastní validací. React je však populárnější rámec a má větší komunitu, takže pro React je k dispozici mnoho knihoven pro zpracování formulářů. Vzhledem k tomu, že cílem je vyhnout se použití externích knihoven, bude aplikace React spoléhat na vlastní ověřování.

Vývoj šablony pro každou aplikaci

Obě aplikace se při vytváření konečného výstupu HTML spoléhají na šablony.

Úhlová HTML šablona

The form-signup.component.html soubor obsahuje následující kód:

<div třída="forma-obsah">
<třída formuláře="formulář" #myForm="ngForm">
<h1>Vyplňte formulář a připojte se k naší komunitě!</h1>
<div třída="formulářové vstupy">
<štítek pro ="uživatelské jméno" třída="formulář-štítek">uživatelské jméno:</label>
<vstup
 id="uživatelské jméno"
 typ="text"
třída="form-input"
 zástupný symbol="Zadejte uživatelské jméno"
 jméno="uživatelské jméno"
 ngModel
 Požadované
 #uživatelské jméno="ngModel"
 />
<p *ngIf="username.invalid && uživatelské jméno.dotkl">Je vyžadováno uživatelské jméno</str>
</div>
<div třída="formulářové vstupy">
<štítek pro ="Heslo" třída="formulář-štítek">Heslo:</label>
<vstup
 id="Heslo"
 typ="Heslo"
 jméno="Heslo"
třída="form-input"
 zástupný symbol="Zadejte heslo"
 ngModel
 Požadované
 #heslo="ngModel"
 [(ngModel)]="model.heslo"
 />
<p *ngIf="neplatné heslo && heslo.dotkl">vyžadováno heslo</str>
</div>
<div třída="formulářové vstupy">
<štítek pro ="ověřit heslo" třída="formulář-štítek">Heslo:</label>
<vstup
 id="Potvrďte heslo"
 typ="Heslo"
 jméno="Potvrďte heslo"
třída="form-input"
 zástupný symbol="Potvrďte heslo"
 ngModel
 Požadované
 #heslo2="ngModel"
 ngValidateEqual="Heslo"
 [(ngModel)]="model.potvrdit heslo"
 />
<div *ngIf="(password2.dirty || password2.touched) && heslo2.neplatné">
<p *ngIf="password2.hasError('poznámkaStejný') && heslo.platný">
 Hesla dělatnezápas
</str>
</div>
</div>
<knoflík
třída="form-input-btn"
 typ="Předložit"
 [vypnuto]="myForm.invalid"
 routerLink="/success"
>
 Přihlásit se
</button>
</form>
</div>

React HTML šablona

The Signup.js soubor obsahuje následující kód:

import Reagovat z "reagovat";
import useForm z "../useForm";
import ověřit z "../validateData";
import "./Signup.css"
konst Registrace = ({submitForm}) => {
konst {handleChange, values, handleSubmit, errors} = useForm( submitForm, validate);
vrátit se (
<div název_třídy="forma-obsah">
<formulář název třídy="formulář" onSubmit={handleSubmit}>
<h1>Vyplňte formulář a připojte se k naší komunitě!</h1>
<div název_třídy="formulářové vstupy">
<label htmlFor="uživatelské jméno" className="formulář-štítek">uživatelské jméno:</label>
<vstup
 id="uživatelské jméno"
 typ="text"
 jméno="uživatelské jméno"
 className="formulář-vstup"
 zástupný symbol="Zadejte uživatelské jméno"
 value={values.username}
 onChange={handleChange}
 />
{errors.username &&<p>{errors.username}</str>}
</div>
<div název_třídy="formulářové vstupy">
<label htmlFor="Heslo" className="formulář-štítek"> Heslo: </label>
<vstup
 id="Heslo"
 typ="Heslo"
 jméno="Heslo"
 className="formulář-vstup"
 zástupný symbol="Zadejte heslo"
 value={values.password}
 onChange={handleChange}
 />
{errors.password &&<p>{errors.password}</str>}
</div>
<div název_třídy="formulářové vstupy">
<label htmlFor="ověřit heslo" className="formulář-štítek"> Heslo: </label>
<vstup
 id="ověřit heslo"
 typ="Heslo"
 jméno="ověřit heslo"
 className="formulář-vstup"
 zástupný symbol="Potvrďte heslo"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<p>{errors.passwordvalidate}</str>}
</div>
<tlačítko className="form-input-btn" typ="Předložit">Přihlásit se</button>
</form>
</div>
 )
}
vývoznívýchozí Přihlásit se;

Všimnete si, že obě aplikace používají základní HTML kód, až na některé drobné rozdíly. Například aplikace Angular používá standardní atribut „class“ k identifikaci tříd CSS. React používá svou vlastní vlastnost „className“. React to transformuje na standardní atribut „class“ v konečném výstupu. Uživatelské rozhraní hraje důležitou roli v úspěchu jakékoli aplikace. Protože obě aplikace používají stejnou strukturu HTML a názvy tříd, mohou obě aplikace používat stejnou šablonu stylů.

Všechny nestandardní vlastnosti ve výše uvedených šablonách se týkají ověřování.

Vytvoření ověření formuláře pro aplikaci Angular

Chcete-li získat přístup k vlastnostem ověření, které jsou součástí přístupu Angular založeného na šablonách, budete muset importovat FormsModule v app.module.ts soubor.

Soubor app.module.ts

import { NgModule } z '@angular/core';
import { FormsModule } z '@angular/forms';
import { BrowserModule } z '@angular/platform-browser';
import { ValidateEqualModule } z 'ng-validate-equal'
import { AppRoutingModule } z './app-routing.module';
import { AppComponent } z './app.component';
import { FormSignupComponent } z './form-signup/form-signup.component';
import { FormSuccessComponent } z './form-success/form-success.component';
@NgModule({
 prohlášení: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 dovoz: [
 modul prohlížeče,
 FormsModule,
 ValidateEqualModule,
 AppRoutingModule
 ],
poskytovatelé: [],
bootstrap: [ AppComponent ]
})
vývoznítřídaAppModule{ }

Importem FormsModule ve výše uvedeném souboru máte nyní přístup k řadě různých ověřovacích vlastností. Budete muset přidat ngModel vlastnost do vstupních polí šablony HTML Angular. Pokud se podíváte zpět na šablonu Angular výše, uvidíte, že každý ze vstupních prvků má tuto vlastnost.

The FormsModule a ngModel poskytnout vývojáři přístup k vlastnostem ověření, jako je např platný a neplatný. Část odstavce šablony Angular HTML používá #username=”ngModel” vlastnictví. Vygeneruje varování, pokud jsou data ve vstupním poli neplatná a uživatel je změnil.

V app.module.ts soubor, uvidíte také ValidateEqualModule, který porovnává dvě hesla. Chcete-li to provést, budete muset vytvořit objekt modelu v form-signup.component.ts soubor.

Soubor form-signup.component.ts

import { Komponenta, OnInit } z '@angular/core';
@Součástka({
 volič: 'aplikace-formulář-registrace',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
vývozní třídaFormSignupComponentnářadíOnInit{
konstruktér() { }
 ngOnInit(): prázdnota {}
 model = {
 Heslo: nula,
 Potvrďte heslo: nula
 };
}

Druhé heslo v šabloně Angular HTML používá Modelka objekt v souboru výše, abyste porovnali jeho hodnotu s prvním heslem.

The zakázáno vlastnost na tlačítku Odeslat zajišťuje, že zůstane neaktivní, dokud každé vstupní pole nebude obsahovat platná data. Odesláním formuláře se uživatel dostane na úspěšnou stránku pomocí routeru Angular.

Soubor app.routing.module.ts

import { NgModule } z '@angular/core';
import { RouterModule, Routes } z '@angular/router';
import { FormSignupComponent } z './form-signup/form-signup.component';
import { FormSuccessComponent } z './form-success/form-success.component';
konst routes: Routes = [{
 cesta: '',
 komponenta: FormSignupComponent
},{
 cesta: 'úspěch',
 komponenta: FormSuccessComponent
}];
@NgModule({
dovozy: [RouterModule.forRoot (trasy)],
exportů: [RouterModule]
})
vývoznítřídaAppRoutingModule{ }

Směrovací modul výše obsahuje dvě cesty; hlavní cesta pro formu a cesta úspěchu pro složku úspěchu.

Soubor app.component.html

<router-zásuvka></router-outlet>

Zásuvka routeru v souboru komponent aplikace výše umožňuje uživateli snadno procházet mezi formulář-registrace a forma-úspěch komponenty pomocí URL.

Vytvoření ověření formuláře pro aplikaci React

vývoznívýchozífunkcevalidateData(hodnoty) {
nechat chyby = {}
-li (!hodnoty.uživatelské jméno.oříznout()) {
 errors.username = "Je vyžadováno uživatelské jméno";
 }
-li (!hodnoty.Heslo) {
 chyby.heslo = "Je vyžadováno heslo";
 }
-li (!hodnoty.passwordvalidate) {
 errors.passwordvalidate = "Je vyžadováno heslo";
 } jiný-li (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Hesla dělatnezápas";
 }
vrátit se chyby;
}

The validateData.js soubor obsahuje výše uvedený kód. Sleduje každé vstupní pole ve formuláři, aby bylo zajištěno, že každé pole obsahuje platná data.

Soubor useForm.js

import {useState, useEffect} z 'reagovat';
konst useForm = (zpětné volání, ověření) => {
konst [values, setValues] = useState({
 uživatelské jméno: '',
 Heslo: '',
 ověření hesla: ''
 });
konst [chyby, setErrors] = useState ({});
konst [isSubmitting, setIsSubmitting] = useState (Nepravdivé)
konst handleChange = e => {
konst {jméno, hodnota} = e.cíl;
setValues({
 ...hodnoty,
[název]: hodnota
 });
 }
konst handleSubmit = e => {
E.preventDefault();
 setErrors (validate(hodnoty));
 setIsSubmitting(skutečný);
 }
 useEffect(() => {
 if (Object.keys (errors).length 0 && isSubmitting) {
 zpětné volání ();
 }
 }, [chyby, zpětné volání, isSubmitting]);
vrátit se { handleChange, values, handleSubmit, errors };
}
vývoznívýchozí useForm;

Zvyk useForm hook výše určuje, zda uživatel úspěšně odešle formulář. Tato událost nastane, pouze pokud jsou všechna data ve formuláři platná.

Soubor Form.js

import Reagovat z "reagovat";
import Přihlásit se z "./Přihlásit se";
import Úspěch z "./Úspěch"
import { useState } z "reagovat";
konst Form = () => {
konst [isSubmitted, setIsSubmitted] = useState(Nepravdivé);
funkceOdeslat formulář() {
 setIsSubmitted(skutečný);
 }
vrátit se (
<div>
 {!isSubmitted? (<Registrace submitForm={submitForm} />): (<Úspěch />)}
</div>
 )
}
vývoznívýchozí Formulář;

The Formulář výše uvedená komponenta přepíná pohled mezi Přihlásit se komponenta a Úspěch komponentu, pokud se formulář odešle.

Soubor App.js

import Formulář z "./components/Form";
funkceAplikace() {
vrátit se (
<div název_třídy="Aplikace">
<Formulář/>
</div>
 );
}
vývoznívýchozí Aplikace;

Uživatelské rozhraní aplikace Angular

Uživatelské rozhraní zobrazí formulář s jedním vstupem pro uživatelské jméno a dvěma vstupy pro heslo.

Pokud formulář obsahuje neplatná data, stránky zobrazí chybové zprávy:

Pokud formulář obsahuje platná data, může jej uživatel úspěšně odeslat:

Uživatelské rozhraní aplikace React

Pokud formulář obsahuje neplatná data:

Když formulář obsahuje platné údaje:

Podobnosti a rozdíly mezi React a Angular

Rámce Angular a React jsou pozoruhodně podobné a jsou schopny produkovat identické výsledky. Nástroje, které můžete použít k dosažení těchto výsledků, se však budou lišit. Angular je vývojová platforma, která poskytuje přístup k nástrojům, jako je router a knihovna formulářů. React vyžaduje od vývojáře trochu více kreativity, aby bylo dosaženo stejných výsledků.

Reagovat vs. Angular: Proč je React mnohem populárnější?

Přečtěte si další

O autorovi