Ангулар ЈС вс. Реацт ЈС

Ангулар и Реацт су два од најбољих фронтенд оквира за веб апликације. Иако су њихови домети мало другачији (једна развојна платформа, друга библиотека), они се сматрају главним конкурентима. Сигурно је претпоставити да можете користити било који оквир за развој апликације.

Главно питање тада постаје: зашто бисте изабрали једно уместо другог? Овај чланак има за циљ да одговори на њега развијањем једноставног обрасца за регистрацију. Образац ће се ослањати искључиво на могућности валидације сваког оквира.

Предуслови

Да бисте наставили, требало би да будете у могућности инсталирајте Реацт и имају опште разумевање како функционише Реацт апликација. Такође би требало да знате како да инсталирате и користите Ангулар.

Структура датотека сваке апликације

Реацт образац има следећу структуру датотеке:

Угаона форма има следећу структуру датотеке:

Слика изнад приказује само уређени одељак апликације Ангулар.

Из горњих структура датотека можете видети да се оба оквира у великој мери ослањају на употребу компоненти.

Креирање логике за сваку апликацију за образац

Свака апликација ће имати исту сврху: образац се шаље само ако свако поље за унос садржи важеће податке. Поље корисничког имена је важеће ако садржи најмање један знак. Два поља лозинке су важећа ако су њихове вредности идентичне.

Ангулар пружа две методе креирања образаца: вођене шаблонима и реактивне. Реактивни приступ омогућава програмеру да креира прилагођене критеријуме валидације. Приступ вођен шаблонима долази са својствима која поједностављују валидацију обрасца.

Реацт може само да развије образац са прилагођеном валидацијом. Међутим, Реацт је популарнији оквир и има већу заједницу, тако да су многе библиотеке за руковање формама доступне за Реацт. С обзиром да је овде циљ да се избегне коришћење спољних библиотека, Реацт апликација ће се ослањати на прилагођену валидацију.

Израда шаблона за сваку апликацију

Обе апликације се ослањају на шаблоне за креирање коначног ХТМЛ излаза.

Угаони ХТМЛ шаблон

Тхе форм-сигнуп.цомпонент.хтмл датотека садржи следећи код:

<див цласс="форма-садржај">
<форм цласс="форму" #миФорм="нгФорм">
<х1>Попуните формулар да бисте се придружили нашој заједници!</h1>
<див цласс="форм-инпутс">
<ознака за="корисничко име" цласс="образац-ознака">Корисничко име:</label>
<улазни
 ид="корисничко име"
 типе="текст"
класа="форм-инпут"
 плацехолдер="Унесите име"
 наме="корисничко име"
 нгМодел
 потребан
 #корисничко име="нгМодел"
 />
<п *нгИф="корисничко име.неважеће && корисничко име.додирнуто">Потребно је корисничко име</п>
</div>
<див цласс="форм-инпутс">
<ознака за="Лозинка" цласс="образац-ознака">Лозинка:</label>
<улазни
 ид="Лозинка"
 типе="Лозинка"
 наме="Лозинка"
класа="форм-инпут"
 плацехолдер="Унесите лозинку"
 нгМодел
 потребан
 #пассворд="нгМодел"
 [(нгМодел)]="модел.лозинка"
 />
<п *нгИф="лозинка.неважећа && лозинка.додирнуто">Захтева се шифра</п>
</div>
<див цласс="форм-инпутс">
<ознака за="пассвордвалидате" цласс="образац-ознака">Лозинка:</label>
<улазни
 ид="Потврди лозинку"
 типе="Лозинка"
 наме="Потврди лозинку"
класа="форм-инпут"
 плацехолдер="Потврди лозинку"
 нгМодел
 потребан
 #пассворд2="нгМодел"
 нгВалидатеЕкуал="Лозинка"
 [(нгМодел)]="модел.цонфирмпасворд"
 />
<див *нгИф="(пассворд2.дирти || пассворд2.тоуцхед) && лозинка2.неважећи">
<п *нгИф="пассворд2.хасЕррор('није једнако') && лозинка.важећа">
 Лозинке урадитенеутакмица
</п>
</div>
</div>
<дугме
класа="форм-инпут-бтн"
 типе="прихвати"
 [онемогућено]="миФорм.инвалид"
 роутерЛинк="/success"
>
 Пријави се
</button>
</form>
</div>

Реацт ХТМЛ шаблон

Тхе Сигнуп.јс датотека садржи следећи код:

увоз Реаговати из "реаговати";
увоз усеФорм из "../усеФорм";
увоз валидирати из "../валидатеДата";
увоз "./Сигнуп.цсс"
конст Регистрација = ({субмитФорм}) => {
конст {хандлеЦханге, валуес, хандлеСубмит, еррорс} = усеФорм( субмитФорм, валидате);
повратак (
<див цлассНаме="форма-садржај">
<форм цлассНаме="форму" онСубмит={хандлеСубмит}>
<х1>Попуните формулар да бисте се придружили нашој заједници!</h1>
<див цлассНаме="форм-инпутс">
<ознака хтмлФор="корисничко име" цлассНаме="образац-ознака">Корисничко име:</label>
<улазни
 ид="корисничко име"
 типе="текст"
 наме="корисничко име"
 цлассНаме="образац-унос"
 плацехолдер="Унесите име"
 валуе={валуес.усернаме}
 онЦханге={хандлеЦханге}
 />
{еррорс.усернаме &&<стр>{еррорс.усернаме}</п>}
</div>
<див цлассНаме="форм-инпутс">
<ознака хтмлФор="Лозинка" цлассНаме="образац-ознака"> Лозинка: </label>
<улазни
 ид="Лозинка"
 типе="Лозинка"
 наме="Лозинка"
 цлассНаме="образац-унос"
 плацехолдер="Унесите лозинку"
 валуе={валуес.пассворд}
 онЦханге={хандлеЦханге}
 />
{еррорс.пассворд &&<стр>{еррорс.пассворд}</п>}
</div>
<див цлассНаме="форм-инпутс">
<ознака хтмлФор="пассвордвалидате" цлассНаме="образац-ознака"> Лозинка: </label>
<улазни
 ид="пассвордвалидате"
 типе="Лозинка"
 наме="пассвордвалидате"
 цлассНаме="образац-унос"
 плацехолдер="Потврди лозинку"
 валуе={валуес.пассвордвалидате}
 онЦханге={хандлеЦханге}
 />
{еррорс.пассвордвалидате &&<стр>{еррорс.пассвордвалидате}</п>}
</div>
<дугме Име класе="форм-инпут-бтн" типе="прихвати">Пријави се</button>
</form>
</div>
 )
}
извозУобичајено Пријави се;

Приметићете да обе апликације користе основни ХТМЛ код, осим неких мањих разлика. На пример, Ангулар апликација користи стандардни атрибут „цласс“ да идентификује ЦСС класе. Реацт користи сопствено прилагођено својство „цлассНаме“. Реацт трансформише ово у стандардни атрибут „класе“ у коначном излазу. УИ игра важну улогу у успеху било које апликације. Пошто обе апликације користе исту ХТМЛ структуру и имена класа, обе апликације могу да користе исти стил.

Сва нестандардна својства у горњим шаблонима односе се на валидацију.

Креирање валидације обрасца за Ангулар апликацију

Да бисте приступили својствима валидације која су део Ангулар-овог приступа заснованог на шаблонима, мораћете да увезете ФормсМодуле у апп.модуле.тс фајл.

Датотека апп.модуле.тс

увоз { НгМодуле } из '@ангулар/цоре';
увоз { ФормсМодуле } из '@ангулар/формс';
увоз {БровсерМодуле} из '@ангулар/платформ-бровсер';
увоз { ВалидатеЕкуалМодуле } из 'нг-валидате-екуал'
увоз { АппРоутингМодуле } из './апп-роутинг.модуле';
увоз { АппЦомпонент } из './апп.цомпонент';
увоз { ФормСигнупЦомпонент } из './форм-сигнуп/форм-сигнуп.цомпонент';
увоз { ФормСуццессЦомпонент } из './форм-суццесс/форм-суццесс.цомпонент';
@НгМодуле({
 декларације: [
 АппЦомпонент,
 ФормСигнупЦомпонент,
 ФормСуццессЦомпонент
 ],
 увози: [
 БровсерМодуле,
 ФормсМодуле,
 ВалидатеЕкуалМодуле,
 АппРоутингМодуле
 ],
провајдери: [],
боотстрап: [ Компонента апликације ]
})
извозкласаАппМодуле{ }

Увозом ФормсМодуле у горњој датотеци, сада имате приступ низу различитих својстава валидације. Мораћете да додате нгМодел својство на поља за унос Ангулар ХТМЛ шаблона. Ако се осврнете на горњи шаблон Ангулар, видећете да сваки од улазних елемената има ово својство.

Тхе ФормсМодуле и нгМодел дајте програмеру приступ својствима валидације као што су валидан и неважећим. Одељак пасуса ХТМЛ шаблона Ангулар користи #усернаме=”нгМодел” својство. Он производи упозорење ако су подаци у пољу за унос неважећи и корисник их је променио.

У апп.модуле.тс датотеку, такође ћете видети ВалидатеЕкуалМодуле, који упоређује две лозинке. Да бисте то урадили, мораћете да креирате објекат модела у форм-сигнуп.цомпонент.тс фајл.

Датотека форм-сигнуп.цомпонент.тс

увоз { Компонента, ОнИнит } из '@ангулар/цоре';
@Саставни део({
 селектор: 'апп-форм-сигнуп',
 темплатеУрл: './форм-сигнуп.цомпонент.хтмл',
 стилеУрлс: ['./форм-сигнуп.цомпонент.цсс']
})
извоз класаФормСигнупЦомпонентимплементираОнИнит{
конструктор() { }
 нгОнИнит(): празнина {}
 модел = {
 Лозинка: нула,
 Потврди лозинку: нула
 };
}

Друга лозинка у Ангулар ХТМЛ шаблону користи модел објекат у горњој датотеци, да бисте упоредили његову вредност са првом лозинком.

Тхе онеспособљени својство на дугмету за слање обезбеђује да оно остане неактивно све док свако поље за унос не садржи важеће податке. Подношење обрасца доводи корисника на страницу успеха уз помоћ Ангулар рутера.

Датотека апп.роутинг.модуле.тс

увоз { НгМодуле } из '@ангулар/цоре';
увоз { РоутерМодуле, Роутес } из '@ангулар/роутер';
увоз { ФормСигнупЦомпонент } из './форм-сигнуп/форм-сигнуп.цомпонент';
увоз { ФормСуццессЦомпонент } из './форм-суццесс/форм-суццесс.цомпонент';
конст руте: Руте = [{
 пут: '',
 компонента: ФормСигнупЦомпонент
},{
 пут: 'успех',
 компонента: ФормСуццессЦомпонент
}];
@НгМодуле({
увози: [РоутерМодуле.форРоот (руте)],
извоза: [РоутерМодуле]
})
извозкласаАппРоутингМодуле{ }

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

Датотека апп.цомпонент.хтмл

<рутер-утичница></router-outlet>

Утичница рутера у горњој датотеци компоненте апликације омогућава кориснику да се лако креће између образац-пријава и форма-успех компоненте које користе УРЛ адресе.

Креирање валидације обрасца за Реацт апликацију

извозУобичајенофункцијавалидатеДата(вредности) {
дозволити грешке = {}
ако (!вредности.корисничко име.трим()) {
 еррорс.усернаме = "Потребно је корисничко име";
 }
ако (!вредности.Лозинка) {
 еррорс.пассворд = "Захтева се шифра";
 }
ако (!вредности.пассвордвалидате) {
 еррорс.пассвордвалидате = "Захтева се шифра";
 } другоако (валуес.пассвордвалидате !== валуес.пассворд) {
 еррорс.пассвордвалидате = "Лозинке урадитенеутакмица";
 }
повратак грешке;
}

Тхе валидатеДата.јс датотека садржи код изнад. Он надгледа свако поље за унос у обрасцу како би се осигурало да свако поље садржи важеће податке.

Датотека усеФорм.јс

увоз {усеСтате, усеЕффецт} из 'реаговати';
конст усеФорм = (повратни позив, валидација) => {
конст [вредности, сетВалуес] = усеСтате({
 корисничко име: '',
 Лозинка: '',
 пассвордвалидате: ''
 });
конст [грешке, сетЕррорс] = усеСтате ({});
конст [исСубмиттинг, сетИсСубмиттинг] = усеСтате (лажно)
конст хандлеЦханге = е => {
конст {име, вредност} = е.таргет;
сетВалуес({
 ...вредности,
[име]: вредност
 });
 }
конст хандлеСубмит = е => {
е.превентДефаулт();
 сетЕррорс (потврди(вредности));
 сетИсСубмиттинг(истина);
 }
 усеЕффецт(() => {
 иф (Објецт.кеис (грешке).ленгтх 0 && исСубмиттинг) {
 позове();
 }
 }, [грешке, повратни позив, исСубмиттинг]);
повратак { хандлеЦханге, валуес, хандлеСубмит, еррорс };
}
извозУобичајено усеФорм;

Обичај усеФорм кука изнад одређује да ли је корисник успешно послао образац. Овај догађај се дешава само ако су сви подаци у обрасцу валидни.

Датотека Форм.јс

увоз Реаговати из "реаговати";
увоз Пријави се из "./Пријави се";
увоз успех из "./Успех"
увоз { усеСтате } из "реаговати";
конст Форма = () => {
конст [исСубмиттед, сетИсСубмиттед] = усеСтате(лажно);
функцијасубмитФорм() {
 сетИсСубмиттед(истина);
 }
повратак (
<див>
 {!исСубмиттед? (<Регистрација субмитФорм={субмитФорм} />): (<успех />)}
</div>
 )
}
извозУобичајено Форма;

Тхе Форма горња компонента пребацује приказ између Пријави се компонента и успех компонента ако се образац достави.

Датотека Апп.јс

увоз Форма из "./цомпонентс/Форм";
функцијаАпликација() {
повратак (
<див цлассНаме="Апликација">
<Образац/>
</div>
 );
}
извозУобичајено Апликација;

Корисничко сучеље Ангулар апликације

УИ приказује образац са једним уносом за корисничко име и два уноса лозинке.

Када образац садржи неважеће податке, странице приказују поруке о грешци:

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

Корисничко сучеље Реацт апликације

Када образац садржи неважеће податке:

Када образац садржи важеће податке:

Сличности и разлике између Реацт-а и Ангулар-а

Ангулар и Реацт оквири су изузетно слични и способни да дају идентичне резултате. Међутим, алати које можете користити за постизање ових резултата ће се разликовати. Ангулар је развојна платформа која омогућава приступ алатима као што су рутер и библиотека образаца. Реацт захтева мало више креативности од програмера да би постигао исте резултате.

Реаговати вс. Ангулар: Зашто је Реацт толико популарнији?

Реад Нект

О аутору