Угловой JS против. Реагировать JS

Angular и React — два лучших фреймворка для веб-приложений. Хотя их области применения немного различаются (одна — платформа для разработки, другая — библиотека), они считаются основными конкурентами. Можно с уверенностью предположить, что вы можете использовать любой фреймворк для разработки приложения.

Тогда возникает главный вопрос: почему вы предпочли бы одно другому? Эта статья призвана ответить на него, разработав простую форму регистрации. Форма будет полагаться исключительно на возможности проверки каждого фреймворка.

Предпосылки

Чтобы продолжить, вы должны быть в состоянии установить Реакт и иметь общее представление о как работает приложение React. Вы также должны знать, как установить и использовать угловой.

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

Форма React имеет следующую файловую структуру:

Форма Angular имеет следующую файловую структуру:

На изображении выше показан только отредактированный раздел приложения Angular.

Из вышеприведенных файловых структур видно, что обе платформы в значительной степени полагаются на использование компонентов.

Создание логики для каждого приложения формы

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

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

React способен разработать форму только с пользовательской проверкой. Однако React является более популярным фреймворком и имеет более широкое сообщество, поэтому для React доступно множество библиотек для обработки форм. Учитывая, что цель здесь — избежать использования внешних библиотек, приложение React будет полагаться на пользовательскую проверку.

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

Оба приложения полагаются на шаблоны для создания окончательного вывода HTML.

Угловой HTML-шаблон

форма-signup.component.html файл содержит следующий код:

<раздел класс ="форма-содержание">
<класс формы ="форма" #мояФорма="нгформ">
<h1>Заполните форму, чтобы присоединиться к нашему сообществу!</h1>
<раздел класс ="форма-входы">
<метка для ="имя пользователя" класс="бланк-этикетка">Имя пользователя:</label>
<вход
 идентификатор ="имя пользователя"
 тип="текст"
класс="форма-ввод"
 заполнитель ="Введите имя пользователя"
 имя="имя пользователя"
 нгМодель
 обязательный
 #имя пользователя="нгМодель"
 />
<р *нгЕсли="имя пользователя.неверный && имя пользователя.touched">Требуется имя пользователя</п>
</div>
<раздел класс ="форма-входы">
<метка для ="пароль" класс="бланк-этикетка">Пароль:</label>
<вход
 идентификатор ="пароль"
 тип="пароль"
 имя="пароль"
класс="форма-ввод"
 заполнитель ="Введите пароль"
 нгМодель
 обязательный
 #пароль="нгМодель"
 [(нгМодель)]="модель.пароль"
 />
<р *нгЕсли="пароль.неверный && пароль.тронутый">Требуется пароль</п>
</div>
<раздел класс ="форма-входы">
<метка для ="проверка пароля" класс="бланк-этикетка">Пароль:</label>
<вход
 идентификатор ="Подтвердить Пароль"
 тип="пароль"
 имя="Подтвердить Пароль"
класс="форма-ввод"
 заполнитель ="Подтвердить Пароль"
 нгМодель
 обязательный
 #пароль2="нгМодель"
 ngValidateEqual ="пароль"
 [(нгМодель)]="model.confirmpassword"
 />
<div *ngIf="(password2.dirty || password2.touched) && пароль2.неверный">
<р *нгЕсли="пароль2.hasError('не равный') && пароль.действительный">
 Пароли делатьнетсовпадение
</п>
</div>
</div>
<кнопка
класс="форма-ввод-кнопка"
 тип="Отправить"
 [отключено]="myForm.invalid"
 роутерСсылка="/success"
>
 Зарегистрироваться
</button>
</form>
</div>

Реагировать на HTML-шаблон

Signup.js файл содержит следующий код:

импорт Реагировать от "реагировать";
импорт использоватьформу от "../использоватьФорму";
импорт подтверждать от "../проверитьДанные";
импорт "./Регистрация.css"
константа Регистрация = ({submitForm}) => {
константа {handleChange, значения, handleSubmit, ошибки} = useForm (submitForm, validate);
возврат (
<div имя_класса ="форма-содержание">
<имя класса формы ="форма" onSubmit={handleSubmit}>
<h1>Заполните форму, чтобы присоединиться к нашему сообществу!</h1>
<div имя_класса ="форма-входы">
<метка htmlFor="имя пользователя" имя_класса="бланк-этикетка">Имя пользователя:</label>
<вход
 идентификатор ="имя пользователя"
 тип="текст"
 имя="имя пользователя"
 имя_класса="ввод формы"
 заполнитель ="Введите имя пользователя"
 значение={значения.имя пользователя}
 onChange={handleChange}
 />
{ошибки.имя пользователя &&<п>{ошибки.имя пользователя}</п>}
</div>
<div имя_класса ="форма-входы">
<метка htmlFor="пароль" имя_класса="бланк-этикетка"> Пароль: </label>
<вход
 идентификатор ="пароль"
 тип="пароль"
 имя="пароль"
 имя_класса="ввод формы"
 заполнитель ="Введите пароль"
 значение={значения.пароль}
 onChange={handleChange}
 />
{ошибки.пароль &&<п>{ошибки.пароль}</п>}
</div>
<div имя_класса ="форма-входы">
<метка htmlFor="проверка пароля" имя_класса="бланк-этикетка"> Пароль: </label>
<вход
 идентификатор ="проверка пароля"
 тип="пароль"
 имя="проверка пароля"
 имя_класса="ввод формы"
 заполнитель ="Подтвердить Пароль"
 значение = {значения.passwordvalidate}
 onChange={handleChange}
 />
{ошибки.passwordvalidate &&<п>{ошибки.парольвалидате}</п>}
</div>
<кнопка className="форма-ввод-кнопка" тип="Отправить">Зарегистрироваться</button>
</form>
</div>
 )
}
экспортПо умолчанию Зарегистрироваться;

Вы заметите, что оба приложения используют базовый код HTML, за исключением некоторых незначительных различий. Например, приложение Angular использует стандартный атрибут «класс» для идентификации классов CSS. React использует собственное свойство className. React преобразует это в стандартный атрибут «класс» в конечном выводе. Пользовательский интерфейс играет важную роль в успехе любого приложения. Поскольку оба приложения используют одинаковую структуру HTML и имена классов, оба приложения могут использовать одну и ту же таблицу стилей.

Все нестандартные свойства в шаблонах выше относятся к валидации.

Создание проверки формы для приложения Angular

Чтобы получить доступ к свойствам проверки, которые являются частью основанного на шаблонах подхода Angular, вам необходимо импортировать ФормыМодуль в app.module.ts файл.

Файл app.module.ts

импорт {НгМодуле} от '@угловой/ядро';
импорт {Модуль форм} от '@угловые/формы';
импорт {Браузермодуль} от '@angular/платформа-браузер';
импорт { Валидатекуалмодуле } от 'нг-валидировать-равно'
импорт { AppRoutingModule } от './app-routing.module';
импорт {Компонент приложения} от './приложение.компонент';
импорт {ФормаПодписиКомпонент} от './form-signup/form-signup.component';
импорт {Компонент Успеха Формы} от './форма-успех/форма-успех.компонент';
@NgModule({
 декларации: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 импорт: [
 БраузерМодуль,
 форммодуль,
 валидатекуалмодуле,
 AppRoutingModule
 ],
провайдеры: [],
начальная загрузка: [ Компонент приложения ]
})
экспортклассAppModule{ }

Импортируя ФормыМодуль в приведенном выше файле у вас теперь есть доступ к ряду различных свойств проверки. Вам нужно будет добавить нгМодель в поля ввода шаблона Angular HTML. Если вы посмотрите на шаблон Angular выше, вы увидите, что каждый из элементов ввода имеет это свойство.

ФормыМодуль и нгМодель предоставить разработчику доступ к свойствам проверки, таким как действительный и неверный. Раздел абзаца шаблона Angular HTML использует #username="ngModel" свойство. Выдает предупреждение, если данные в поле ввода недействительны и пользователь их изменил.

в app.module.ts файл, вы также увидите Валидатекуалмодуле, который сравнивает два пароля. Для этого вам нужно создать объект модели в форма-signup.component.ts файл.

Файл form-signup.component.ts

импорт {Компонент, OnInit} от '@угловой/ядро';
@Составная часть({
 селектор: 'приложение-форма-регистрация',
 URL-адрес шаблона: './form-signup.component.html',
 URL стиля: ['./form-signup.component.css']
})
экспорт классFormSignupComponentреализуетOnInit{
конструктор() { }
 нгонинит(): пустота {}
 модель = {
 пароль: нулевой,
 Подтвердить Пароль: нулевой
 };
}

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

Отключено Свойство кнопки отправки гарантирует, что она останется неактивной до тех пор, пока каждое поле ввода не будет содержать действительные данные. Отправка формы приводит пользователя на страницу успеха с помощью маршрутизатора Angular.

Файл app.routing.module.ts

импорт {НгМодуле} от '@угловой/ядро';
импорт { RouterModule, маршруты } от '@угловой/маршрутизатор';
импорт {ФормаПодписиКомпонент} от './form-signup/form-signup.component';
импорт {Компонент Успеха Формы} от './форма-успех/форма-успех.компонент';
константа маршруты: Маршруты = [{
 дорожка: '',
 компонент: Формсигнупкомпонент
},{
 дорожка: 'успех',
 компонент: FormSuccessComponent
}];
@NgModule({
импорт: [RouterModule.forRoot (маршруты)],
экспорт: [Модуль маршрутизатора]
})
экспортклассAppRoutingModule{ }

Приведенный выше модуль маршрутизации содержит два пути; основной путь для формы и путь успеха для компонента успеха.

Файл app.component.html

<роутер-розетка></router-outlet>

Выход маршрутизатора в файле компонента приложения выше позволяет пользователю легко перемещаться между форма регистрации и форма-успех компоненты с использованием URL-адресов.

Создание проверки формы для приложения React

экспортПо умолчаниюфункциявалидатедата(ценности) {
позволять ошибки = {}
если (!ценности.имя пользователя.отделка()) {
 ошибки.имя_пользователя = "Требуется имя пользователя";
 }
если (!ценности.пароль) {
 ошибки.пароль = "Требуется пароль";
 }
если (!ценности.парольвалидате) {
 ошибки.passwordvalidate = "Требуется пароль";
 } ещеесли (значения.passwordvalidate !== значения.пароль) {
 errors.passwordvalidate = "Пароли делатьнетсовпадение";
 }
возврат ошибки;
}

валидатедата.js файл содержит приведенный выше код. Он отслеживает каждое поле ввода в форме, чтобы гарантировать, что каждое поле содержит допустимые данные.

Файл useForm.js

импорт {useState, useEffect} от 'реагировать';
константа useForm = (обратный вызов, проверка) => {
константа [значения, setValues] = useState({
 имя пользователя: '',
 пароль: '',
 проверка пароля: ''
 });
константа [ошибки, setErrors] = useState ({});
константа [isSubmitting, setIsSubmitting] = useState (ЛОЖЬ)
константа handleChange = е => {
константа {имя, значение} = e.target;
установить значения ({
 ...ценности,
[название]: ценность
 });
 }
константа handleSubmit = е => {
е.preventDefault();
 setErrors (проверить(ценности));
 setIsSubmitting(истинный);
 }
 использовать эффект (() => {
 если (Object.keys (ошибки).length 0 && Отправка) {
 перезвонить();
 }
 }, [ошибки, обратный вызов, isSubmitting]);
возврат { handleChange, значения, handleSubmit, ошибки};
}
экспортПо умолчанию использоватьформу;

Обычай использоватьформу крючок выше определяет, успешно ли пользователь отправляет форму. Это событие происходит только в том случае, если все данные в форме верны.

Файл Form.js

импорт Реагировать от "реагировать";
импорт Зарегистрироваться от "./Зарегистрироваться";
импорт Успех от "./Успех"
импорт { состояние использования } от "реагировать";
константа Форма = () => {
константа [isSubmitted, setIsSubmitted] = useState(ЛОЖЬ);
функцияпредставить форму() {
 setIsSubmitted(истинный);
 }
возврат (
<див>
 {!Отправлено? (<Регистрация submitForm={submitForm} />): (<Успех />)}
</div>
 )
}
экспортПо умолчанию Форма;

Форма компонент выше переключает представление между Зарегистрироваться компонент и Успех компонент, если форма отправляется.

Файл App.js

импорт Форма от "./компоненты/Форма";
функцияПриложение() {
возврат (
<div имя_класса ="Приложение">
<Форма/>
</div>
 );
}
экспортПо умолчанию Приложение;

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

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

Когда форма содержит неверные данные, на страницах отображаются сообщения об ошибках:

Когда форма содержит действительные данные, пользователь может успешно отправить ее:

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

Когда форма содержит неверные данные:

Когда форма содержит действительные данные:

Сходства и различия между React и Angular

Фреймворки Angular и React удивительно похожи и способны давать одинаковые результаты. Однако инструменты, которые вы можете использовать для достижения этих результатов, будут отличаться. Angular — это платформа разработки, предоставляющая доступ к таким инструментам, как маршрутизатор и библиотека форм. React требует от разработчика немного больше творчества для достижения тех же результатов.

Реагировать против. Angular: почему React так популярен?

Читать далее

Об авторе