Angular JS vs. Reaguj JS

Angular i React to dwa z najlepszych frameworków frontendowych dla aplikacji internetowych. Chociaż ich zakresy są nieco inne (jedna platforma programistyczna, druga biblioteka), są postrzegani jako główni konkurenci. Można bezpiecznie założyć, że do tworzenia aplikacji można użyć dowolnej platformy.

Pojawia się wtedy główne pytanie: dlaczego miałbyś wybrać jedno, a nie drugie? Ten artykuł ma na celu odpowiedzieć na to pytanie, opracowując prosty formularz rejestracyjny. Formularz będzie opierał się wyłącznie na możliwościach walidacji każdego frameworka.

Warunki wstępne

Aby kontynuować, powinieneś być w stanie zainstaluj React i mieć ogólne zrozumienie jak działa aplikacja React. Powinieneś także wiedzieć, jak zainstalować i użyj Angulara.

Struktura plików każdej aplikacji

Formularz React ma następującą strukturę plików:

Formularz Angular ma następującą strukturę plików:

Powyższy obrazek wyświetla tylko edytowaną sekcję aplikacji Angular.

Z powyższych struktur plików widać, że oba frameworki w dużym stopniu opierają się na wykorzystaniu komponentów.

Tworzenie logiki dla każdej aplikacji formularza

Każdy wniosek będzie miał ten sam cel: formularz jest przesyłany tylko wtedy, gdy każde pole wejściowe zawiera prawidłowe dane. Pole nazwy użytkownika jest prawidłowe, jeśli zawiera co najmniej jeden znak. Te dwa pola hasła są prawidłowe, jeśli ich wartości są identyczne.

Angular udostępnia dwie metody tworzenia formularzy: opartą na szablonie i reaktywną. Podejście reaktywne umożliwia programiście tworzenie niestandardowych kryteriów walidacji. Podejście oparte na szablonach zawiera właściwości, które upraszczają walidację formularzy.

React jest w stanie opracować formularz tylko z niestandardową walidacją. Jednak React jest bardziej popularnym frameworkiem i ma większą społeczność, więc wiele bibliotek do obsługi formularzy jest dostępnych dla Reacta. Biorąc pod uwagę, że celem jest tutaj uniknięcie korzystania z bibliotek zewnętrznych, aplikacja React będzie polegać na niestandardowej walidacji.

Opracowanie szablonu dla każdej aplikacji

Obie aplikacje opierają się na szablonach, aby utworzyć ostateczny wynik HTML.

Kątowy szablon HTML

ten form-signup.component.html plik zawiera następujący kod:

<klasa div="treść-formularza">
<klasa formularza="Formularz" #mojformularz="ngForm">
<h1>Wypełnij formularz, aby dołączyć do naszej społeczności!</h1>
<klasa div="formularze wejściowe">
<etykieta dla="Nazwa Użytkownika" klasa="etykieta-formularza">Nazwa użytkownika:</label>
<Wejście
 id="Nazwa Użytkownika"
 typ="tekst"
klasa="formularz-wprowadzanie"
 symbol zastępczy="Wpisz nazwę użytkownika"
 nazwa="Nazwa Użytkownika"
 ngModel
 wymagany
 #nazwa użytkownika="ngModel"
 />
<p *ngJeżeli="nazwa_użytkownika.nieprawidłowa && nazwa_użytkownika.dotknięty">Nazwa użytkownika (wymagana</p>
</div>
<klasa div="formularze wejściowe">
<etykieta dla="hasło" klasa="etykieta-formularza">Hasło:</label>
<Wejście
 id="hasło"
 typ="hasło"
 nazwa="hasło"
klasa="formularz-wprowadzanie"
 symbol zastępczy="Wprowadź hasło"
 ngModel
 wymagany
 #hasło="ngModel"
 [(Model ng)]="model.hasło"
 />
<p *ngJeżeli="hasło.nieprawidłowe && hasło.dotknięty">wymagane hasło</p>
</div>
<klasa div="formularze wejściowe">
<etykieta dla="walidacja hasła" klasa="etykieta-formularza">Hasło:</label>
<Wejście
 id="potwierdź hasło"
 typ="hasło"
 nazwa="potwierdź hasło"
klasa="formularz-wprowadzanie"
 symbol zastępczy="Potwierdź hasło"
 ngModel
 wymagany
 #hasło2="ngModel"
 ngValidateEqual="hasło"
 [(Model ng)]="model.potwierdźhasło"
 />
<div *ngJeżeli="(hasło2.brudne || hasło2.dotknęło) && hasło2.nieprawidłowe">
<p *ngJeżeli="hasło2.hasError('nie równe') && hasło.poprawne">
 Hasła robićniedopasować
</p>
</div>
</div>
<przycisk
klasa="formularz-wejście-btn"
 typ="Zatwierdź"
 [wyłączone]="myForm.nieprawidłowy"
 routerLink="/success"
>
 Zapisać się
</button>
</form>
</div>

Reaguj szablon HTML

ten Zarejestruj się.js plik zawiera następujący kod:

import Reagować od "reagować";
import użyj formularza od "../useForm";
import uprawomocnić od "../walidacja danych";
import "./Signup.css"
stały Zarejestruj się = ({submitForm}) => {
stały {handleChange, wartości, handleSubmit, błędy} = useForm( submitForm, validate);
zwrócić (
<div className="treść-formularza">
<formularz nazwaklasy="Formularz" onSubmit={handleSubmit}>
<h1>Wypełnij formularz, aby dołączyć do naszej społeczności!</h1>
<div className="formularze wejściowe">
<etykieta htmlFor="Nazwa Użytkownika" className="etykieta-formularza">Nazwa użytkownika:</label>
<Wejście
 id="Nazwa Użytkownika"
 typ="tekst"
 nazwa="Nazwa Użytkownika"
 className="dane wejściowe formularza"
 symbol zastępczy="Wpisz nazwę użytkownika"
 wartość={wartości.nazwa użytkownika}
 onChange={handleChange}
 />
{błędy.nazwa użytkownika &&<p>{błędy.nazwa użytkownika}</p>}
</div>
<div className="formularze wejściowe">
<etykieta htmlFor="hasło" className="etykieta-formularza"> Hasło: </label>
<Wejście
 id="hasło"
 typ="hasło"
 nazwa="hasło"
 className="dane wejściowe formularza"
 symbol zastępczy="Wprowadź hasło"
 wartość={wartości.hasło}
 onChange={handleChange}
 />
{błędy.hasło &&<p>{błędy.hasło}</p>}
</div>
<div className="formularze wejściowe">
<etykieta htmlFor="walidacja hasła" className="etykieta-formularza"> Hasło: </label>
<Wejście
 id="walidacja hasła"
 typ="hasło"
 nazwa="walidacja hasła"
 className="dane wejściowe formularza"
 symbol zastępczy="Potwierdź hasło"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<p>{błędy.sprawdzanie hasła}</p>}
</div>
<button className="formularz-wejście-btn" typ="Zatwierdź">Zapisać się</button>
</form>
</div>
 )
}
eksportdomyślna Zapisz się;

Zauważysz, że obie aplikacje używają podstawowego kodu HTML, z wyjątkiem kilku drobnych różnic. Na przykład aplikacja Angular używa standardowego atrybutu „class” do identyfikacji klas CSS. React używa własnej, niestandardowej właściwości „className”. React przekształca to w standardowy atrybut „class” w ostatecznym wyniku. Interfejs użytkownika odgrywa ważną rolę w sukcesie każdej aplikacji. Ponieważ obie aplikacje używają tej samej struktury HTML i nazw klas, obie aplikacje mogą używać tego samego arkusza stylów.

Wszystkie niestandardowe właściwości w powyższych szablonach dotyczą walidacji.

Tworzenie walidacji formularza dla aplikacji Angular

Aby uzyskać dostęp do właściwości walidacji, które są częścią podejścia opartego na szablonach Angulara, musisz zaimportować Moduł formularzy w app.moduł.ts plik.

Plik app.module.ts

import { Moduł Ng } od „@kątowy/rdzeń”;
import { Moduł Formularzy } od „@kątowe/formy”;
import { Moduł przeglądarki } od „@angular/platform-przeglądarka”;
import { ValidateEqualModule } od 'ng-walidacja-równe'
import { AppRoutingModuł } od './app-routing.moduł';
import { Komponent aplikacji } od './komponent.aplikacji';
import { FormSignupComponent } od './form-signup/form-signup.component';
import { FormSuccessComponent } od „./form-success/form-success.component”;
@natalia({
 deklaracje: [
 Komponent aplikacji,
 Komponent formularza rejestracji,
 FormSuccessComponent
 ],
 import: [
 Moduł przeglądarki,
 Moduł Formularzy,
 ValidateEqualModule,
 AppRoutingModuł
 ],
dostawcy: [],
bootstrap: [ Komponent aplikacji ]
})
eksportklasaModuł aplikacji{ }

Importując Moduł formularzy w powyższym pliku masz teraz dostęp do szeregu różnych właściwości walidacji. Musisz dodać ngModel do pól wejściowych szablonu Angular HTML. Jeśli spojrzysz wstecz na powyższy szablon Angular, zobaczysz, że każdy z elementów wejściowych ma tę właściwość.

ten Moduł formularzy oraz ngModel dać deweloperowi dostęp do właściwości sprawdzania poprawności, takich jak ważny oraz nieważny. Sekcja akapitu szablonu Angular HTML wykorzystuje #username=”ngModel” własność. Generuje ostrzeżenie, jeśli dane w polu wejściowym są nieprawidłowe i użytkownik je zmienił.

w app.moduł.ts pliku, zobaczysz również ValidateEqualModule, który porównuje dwa hasła. Aby to zrobić, musisz utworzyć obiekt modelu w form-signup.component.ts plik.

Plik form-signup.component.ts

import { Komponent, OnInit } od „@kątowy/rdzeń”;
@Składnik({
 selektor: 'aplikacja-formularz-rejestracja',
 URL szablonu: './form-signup.component.html',
 adresy URL stylu: ['./form-signup.component.css']
})
eksport klasaFormSignupComponentprzyboryOnInit{
konstruktor() { }
 ngOnInit(): próżnia {}
 model = {
 hasło: zero,
 potwierdź hasło: zero
 };
}

Drugie hasło w szablonie Angular HTML wykorzystuje Model obiektu w powyższym pliku, aby porównać jego wartość z pierwszym hasłem.

ten niepełnosprawny Właściwość przycisku przesyłania zapewnia, że ​​pozostanie on nieaktywny, dopóki każde pole wejściowe nie będzie zawierało prawidłowych danych. Przesłanie formularza przenosi użytkownika na stronę sukcesu za pomocą routera Angulara.

Plik app.routing.module.ts

import { Moduł Ng } od „@kątowy/rdzeń”;
import { Moduł Routera, Trasy } od „@kątowy/router”;
import { FormSignupComponent } od './form-signup/form-signup.component';
import { FormSuccessComponent } od „./form-success/form-success.component”;
stały trasy: Trasy = [{
 ścieżka: '',
 komponent: FormSignupComponent
},{
 ścieżka: 'powodzenie',
 komponent: FormSuccessComponent
}];
@natalia({
import: [RouterModule.forRoot (trasy)],
eksport: [Moduł Routera]
})
eksportklasaAppRoutingModuł{ }

Powyższy moduł routingu zawiera dwie ścieżki; główna ścieżka dla formularza i ścieżka sukcesu dla komponentu sukcesu.

Plik app.component.html

<gniazdo routera></router-outlet>

Gniazdo routera w powyższym pliku komponentu aplikacji umożliwia użytkownikowi łatwe nawigowanie między formularz-rejestracja oraz forma-sukces komponenty używające adresów URL.

Tworzenie walidacji formularza dla aplikacji React

eksportdomyślnafunkcjonowaćwalidacja danych(wartości) {
pozwalać błędy = {}
jeśli (!wartości.Nazwa Użytkownika.przycinać()) {
 error.username = "Nazwa użytkownika (wymagana";
 }
jeśli (!wartości.hasło) {
 błędy.hasło = "wymagane hasło";
 }
jeśli (!wartości.zatwierdzanie hasła) {
 Errors.passwordvalidate = "wymagane hasło";
 } w przeciwnym raziejeśli (values.passwordvalidate !== values.password) {
 error.passwordvalidate = "Hasła robićniedopasować";
 }
zwrócić błędy;
}

ten validateData.js plik zawiera powyższy kod. Monitoruje każde pole wejściowe w formularzu, aby upewnić się, że każde pole zawiera prawidłowe dane.

Plik useForm.js

import {useState, useEffect} od 'reagować';
stały useForm = (oddzwanianie, walidacja) => {
stały [wartości, setValues] = useState({
 Nazwa Użytkownika: '',
 hasło: '',
 walidacja hasła: ''
 });
stały [błędy, setErrors] = useState ({});
stały [isSubmitting, setIsSubmitting] = useState (fałszywy)
stały handleChange = e => {
stały {nazwa, wartość} = e.cel;
ustaw wartości ({
 ...wartości,
[nazwać]: wartość
 });
 }
stały uchwytPrześlij = e => {
mi.zapobiegaj domyślnie();
 setErrors (zatwierdź(wartości));
 setIsPrzesyłanie(PRAWDA);
 }
 useEffect(() => {
 if (Object.keys (errors).length 0 && jest przesyłanie) {
 oddzwonić();
 }
 }, [błędy, callback, isSubmitting]);
zwrócić { handleChange, wartości, handleSubmit, błędy };
}
eksportdomyślna użyjFormularz;

Zwyczaj użyj formularza hook powyżej określa, czy użytkownik pomyślnie prześle formularz. To zdarzenie występuje tylko wtedy, gdy wszystkie dane w formularzu są prawidłowe.

Plik Form.js

import Reagować od "reagować";
import Zapisz się od "./Zapisz się";
import Powodzenie od "./Powodzenie"
import { stan użycia } od "reagować";
stały Formularz = () => {
stały [IsSubmitted, setIsSubmitted] = useState(fałszywy);
funkcjonowaćprześlij formularz() {
 setIsPrzesłane(PRAWDA);
 }
zwrócić (
<div>
 {!jest przesłany? (<Zarejestruj się submitForm={submitForm} />): (<Powodzenie />)}
</div>
 )
}
eksportdomyślna Formularz;

ten Formularz komponent powyżej przełącza widok między Zapisz się składnik i Powodzenie składnik, jeśli formularz zostanie przesłany.

Plik App.js

import Formularz od "./komponenty/formularz";
funkcjonowaćAplikacja() {
zwrócić (
<div className="Aplikacja">
<Formularz/>
</div>
 );
}
eksportdomyślna Aplikacja;

Interfejs aplikacji Angular

Interfejs użytkownika wyświetla formularz z jednym wejściem dla nazwy użytkownika i dwoma wejściami hasła.

Gdy formularz zawiera nieprawidłowe dane, strony wyświetlają komunikaty o błędach:

Gdy formularz zawiera prawidłowe dane, użytkownik może go pomyślnie przesłać:

Interfejs aplikacji React

Gdy formularz zawiera nieprawidłowe dane:

Gdy formularz zawiera prawidłowe dane:

Podobieństwa i różnice między React i Angular

Ramy Angular i React są niezwykle podobne i mogą dawać identyczne wyniki. Jednak narzędzia, których możesz użyć, aby osiągnąć te wyniki, będą się różnić. Angular to platforma programistyczna, która zapewnia dostęp do narzędzi takich jak router i biblioteka formularzy. React wymaga od programisty nieco więcej kreatywności, aby osiągnąć te same wyniki.

Reaguj vs. Angular: Dlaczego React jest o wiele bardziej popularny?

Czytaj dalej

O autorze