Angular JS срещу Реагирайте JS

Angular и React са две от най-добрите предни рамки за уеб приложения. Въпреки че техните обхвати са малко по-различни (едната платформа за разработка, другата библиотека), те се разглеждат като основни конкуренти. Безопасно е да се предположи, че можете да използвате която и да е рамка за разработване на приложение.

Тогава основният въпрос е: защо бихте избрали едно пред друго? Тази статия има за цел да отговори на него, като разработи проста форма за регистрация. Формулярът ще разчита единствено на възможностите за валидиране на всяка рамка.

Предпоставки

За да продължите, трябва да можете инсталирайте React и имат общо разбиране за как работи приложението React. Вие също трябва да знаете как да инсталирате и използвайте Angular.

Файловата структура на всяко приложение

Формулярът React има следната файлова структура:

Формулярът Angular има следната файлова структура:

Изображението по-горе показва само редактирания раздел на приложението Angular.

От файловите структури по-горе можете да видите, че и двете рамки разчитат в голяма степен на използването на компоненти.

Създаване на логиката за всяко приложение за формуляр

Всяко приложение ще има една и съща цел: формулярът се изпраща само ако всяко поле за въвеждане съдържа валидни данни. Полето за потребителско име е валидно, ако съдържа поне един знак. Двете полета за парола са валидни, ако стойностите им са идентични.

Angular предоставя два метода за създаване на формуляри: задвижван от шаблони и реактивен. Реактивният подход позволява на разработчика да създаде персонализирани критерии за валидиране. Подходът, управляван от шаблони, идва със свойства, които опростяват валидирането на формуляра.

React може да разработи само форма с персонализирана валидация. Въпреки това, React е по-популярната рамка и има по-голяма общност, така че много библиотеки за обработка на форми са налични за React. Като се има предвид, че целта тук е да се избегне използването на външни библиотеки, приложението React ще разчита на персонализирано валидиране.

Разработване на шаблон за всяко приложение

И двете приложения разчитат на шаблони за създаване на крайния HTML изход.

Ъглов HTML шаблон

В form-signup.component.html файл съдържа следния код:

<div клас="форма-съдържание">
<форма клас="форма" #моята форма="ngForm">
<h1>Попълнете формуляра, за да се присъедините към нашата общност!</h1>
<div клас="формуляри">
<етикет за="потребителско име" клас="формуляр-етикет">потребителско име:</label>
<вход
 id="потребителско име"
 тип="текст"
клас="форма-вход"
 заместител="Въведете потребителско име"
 име="потребителско име"
 ngModel
 задължително
 #потребителско име="ngModel"
 />
<p *ngIf="потребителско име.невалидно && потребителско име.докосна">Изисква се потребителско име</стр>
</div>
<div клас="формуляри">
<етикет за="парола" клас="формуляр-етикет">парола:</label>
<вход
 id="парола"
 тип="парола"
 име="парола"
клас="форма-вход"
 заместител="Въведете паролата"
 ngModel
 задължително
 #парола="ngModel"
 [(ngModel)]="модел.парола"
 />
<p *ngIf="парола.невалидна && парола.докосна">изисква се парола</стр>
</div>
<div клас="формуляри">
<етикет за="валидиране на паролата" клас="формуляр-етикет">парола:</label>
<вход
 id="потвърди парола"
 тип="парола"
 име="потвърди парола"
клас="форма-вход"
 заместител="Потвърди парола"
 ngModel
 задължително
 #парола2="ngModel"
 ngValidateEqual="парола"
 [(ngModel)]="модел.потвърди парола"
 />
<div *ngIf="(password2.dirty || password2.touched) && парола2.невалидна">
<p *ngIf="password2.hasError('не е равно') && парола.валидна">
 Пароли направинесъвпада
</стр>
</div>
</div>
<бутон
клас="form-input-btn"
 тип="Изпращане"
 [забранено]="myForm.invalid"
 routerLink="/success"
>
 Регистрирай се
</button>
</form>
</div>

Реагирайте HTML шаблон

В Signup.js файл съдържа следния код:

внос Реагирайте от "реагира";
внос useForm от "../useForm";
внос валидиране от "../validateData";
внос "./Signup.css"
const Регистрация = ({submitForm}) => {
const {handleChange, values, handleSubmit, errors} = useForm( submitForm, validate);
връщане (
<div className="форма-съдържание">
<форма име на клас="форма" onSubmit={handleSubmit}>
<h1>Попълнете формуляра, за да се присъедините към нашата общност!</h1>
<div className="формуляри">
<етикет htmlFor="потребителско име" име на клас="формуляр-етикет">потребителско име:</label>
<вход
 id="потребителско име"
 тип="текст"
 име="потребителско име"
 име на клас="формуляр за въвеждане"
 заместител="Въведете потребителско име"
 стойност={values.username}
 onChange={handleChange}
 />
{errors.username &&<стр>{errors.username}</стр>}
</div>
<div className="формуляри">
<етикет htmlFor="парола" име на клас="формуляр-етикет"> парола: </label>
<вход
 id="парола"
 тип="парола"
 име="парола"
 име на клас="формуляр за въвеждане"
 заместител="Въведете паролата"
 стойност={стойности.парола}
 onChange={handleChange}
 />
{errors.password &&<стр>{errors.password}</стр>}
</div>
<div className="формуляри">
<етикет htmlFor="валидиране на паролата" име на клас="формуляр-етикет"> парола: </label>
<вход
 id="валидиране на паролата"
 тип="парола"
 име="валидиране на паролата"
 име на клас="формуляр за въвеждане"
 заместител="Потвърди парола"
 стойност={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<стр>{errors.passwordvalidate}</стр>}
</div>
<бутон име на клас="форма-вход-btn" тип="Изпращане">Регистрирай се</button>
</form>
</div>
 )
}
износпо подразбиране Регистрирай се;

Ще забележите, че и двете приложения използват основен HTML код, с изключение на някои малки разлики. Например приложението Angular използва стандартния атрибут „class“, за да идентифицира CSS класове. React използва собствено персонализирано свойство „className“. React трансформира това в стандартния атрибут „class“ в крайния изход. Потребителският интерфейс играе важна роля за успеха на всяко приложение. Тъй като и двете приложения използват една и съща HTML структура и имена на класове, и двете приложения могат да използват една и съща таблица със стилове.

Всички нестандартни свойства в шаблоните по-горе се отнасят до валидиране.

Създаване на валидиране на формуляра за приложението Angular

За достъп до свойствата за валидиране, които са част от подхода на Angular, управляван от шаблони, ще трябва да импортирате FormsModule в app.module.ts файл.

Файлът app.module.ts

внос { NgModule } от '@angular/core';
внос { FormsModule } от '@angular/forms';
внос {BrowserModule} от '@angular/platform-browser';
внос { ValidateEqualModule } от 'ng-validate-equal'
внос { AppRoutingModule } от './app-routing.module';
внос { AppComponent } от './app.component';
внос { FormSignupComponent } от './form-signup/form-signup.component';
внос { FormSuccessComponent } от './form-success/form-success.component';
@NgModule({
 декларации: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 внос: [
 модул за браузър,
 FormsModule,
 ValidateEqualModule,
 AppRoutingModule
 ],
доставчици: [],
bootstrap: [ AppComponent ]
})
износкласAppModule{ }

Чрез импортиране на FormsModule във файла по-горе, вече имате достъп до редица различни свойства за валидиране. Ще трябва да добавите ngModel свойство към полетата за въвеждане на Angular HTML шаблона. Ако погледнете назад към шаблона Angular по-горе, ще видите, че всеки от входните елементи има това свойство.

В FormsModule и ngModel дайте на разработчика достъп до свойства за валидиране, като напр валиден и невалиден. Разделът с параграф на шаблона на Angular HTML използва #username=”ngModel” Имот. Той издава предупреждение, ако данните в полето за въвеждане са невалидни и потребителят ги е променил.

В app.module.ts файл, вие също ще видите ValidateEqualModule, който сравнява двете пароли. За да направите това, ще трябва да създадете модел на обект в form-signup.component.ts файл.

Файлът form-signup.component.ts

внос { Компонент, OnInit } от '@angular/core';
@Съставна част({
 селектор: 'приложение-формуляр-регистрация',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
износ класFormSignupComponentинструментиOnInit{
конструктор() { }
 ngOnInit(): нищожен {}
 модел = {
 парола: нула,
 потвърди парола: нула
 };
}

Втората парола в Angular HTML шаблона използва модел обект във файла по-горе, за да сравните стойността му с първата парола.

В хора с увреждания свойството на бутона за изпращане гарантира, че той остава неактивен, докато всяко поле за въвеждане не съдържа валидни данни. Изпращането на формуляра отвежда потребителя до страница за успех с помощта на рутера на Angular.

Файлът app.routing.module.ts

внос { NgModule } от '@angular/core';
внос { RouterModule, Маршрути } от '@angular/router';
внос { FormSignupComponent } от './form-signup/form-signup.component';
внос { FormSuccessComponent } от './form-success/form-success.component';
const маршрути: Маршрути = [{
 път: '',
 компонент: FormSignupComponent
},{
 път: 'успех',
 компонент: FormSuccessComponent
}];
@NgModule({
внос: [RouterModule.forRoot (маршрути)],
износ: [RouterModule]
})
износкласAppRoutingModule{ }

Модулът за маршрутизиране по-горе съдържа два пътя; основният път за формуляра и пътя на успеха за компонента за успех.

Файлът app.component.html

<рутер-изход></router-outlet>

Изходът на рутера във файла с компонент на приложението по-горе позволява на потребителя лесно да навигира между формуляр-регистрация и форма-успех компоненти, използващи URL адреси.

Създаване на валидиране на формуляра за приложението React

износпо подразбиранефункцияvalidateData(стойности) {
позволявам грешки = {}
ако (!стойности.потребителско име.подстригвам()) {
 грешки.потребителско име = "Изисква се потребителско име";
 }
ако (!стойности.парола) {
 грешки.парола = "изисква се парола";
 }
ако (!стойности.passwordvalidate) {
 errors.passwordvalidate = "изисква се парола";
 } другоако (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Пароли направинесъвпада";
 }
връщане грешки;
}

В validateData.js файл съдържа кода по-горе. Той следи всяко поле за въвеждане във формуляра, за да гарантира, че всяко поле съдържа валидни данни.

Файлът useForm.js

внос {useState, useEffect} от 'реагирам';
const useForm = (обратно извикване, валидиране) => {
const [стойности, setValues] = useState({
 потребителско име: '',
 парола: '',
 валидиране на паролата: ''
 });
const [грешки, setErrors] = useState ({});
const [isSubmitting, setIsSubmitting] = useState (фалшиво)
const handleChange = e => {
const {име, стойност} = e.target;
setValues({
 ...стойности,
[име]: стойност
 });
 }
const handleSubmit = e => {
д.preventDefault();
 setErrors (провери(стойности));
 setIsSubmitting(вярно);
 }
 useEffect(() => {
 if (Object.keys (грешки).length 0 && isSubmitting) {
 обратно извикване();
 }
 }, [грешки, обратно извикване, isSubmitting]);
връщане { handleChange, values, handleSubmit, errors };
}
износпо подразбиране useForm;

Обичаят useForm куката по-горе определя дали потребителят е изпратил успешно формуляра. Това събитие се случва само ако всички данни във формуляра са валидни.

Файлът Form.js

внос Реагирайте от "реагира";
внос Регистрирай се от "./Регистрирай се";
внос успех от "./Успех"
внос {useState} от "реагира";
const Форма = () => {
const [isSubmitted, setIsSubmitted] = useState(фалшиво);
функцияПодай формуляр() {
 setIsSubmitted(вярно);
 }
връщане (
<раздел>
 {!isSubmited? (<Регистрация submitForm={submitForm} />): (<успех />)}
</div>
 )
}
износпо подразбиране Форма;

В Формуляр компонент по-горе превключва изгледа между Регистрирай се компонент и успех компонент, ако формулярът е изпратен.

Файлът App.js

внос Формуляр от "./components/Form";
функцияап() {
връщане (
<div className="ап">
<Формуляр/>
</div>
 );
}
износпо подразбиране Приложение;

Потребителският интерфейс на приложението Angular

Потребителският интерфейс показва формуляр с един вход за потребителско име и две пароли.

Когато формулярът съдържа невалидни данни, страниците показват съобщения за грешка:

Когато формулярът съдържа валидни данни, потребителят може да ги изпрати успешно:

Потребителският интерфейс на приложението React

Когато формулярът съдържа невалидни данни:

Когато формулярът съдържа валидни данни:

Прилики и разлики между React и Angular

Рамките Angular и React са забележително сходни и могат да дадат идентични резултати. Въпреки това инструментите, които може да използвате, за да постигнете тези резултати, ще се различават. Angular е платформа за разработка, която предоставя достъп до инструменти като рутер и библиотека с формуляри. React изисква малко повече креативност от разработчика, за да постигне същите резултати.

Реагирайте срещу Angular: Защо React е толкова по-популярен?

Прочетете Следващото

За автора