JS sudut vs. Bereaksi JS

Angular dan React adalah dua kerangka kerja frontend teratas untuk aplikasi web. Meskipun cakupannya sedikit berbeda (satu platform pengembangan, yang lain perpustakaan), mereka dipandang sebagai pesaing utama. Aman untuk mengasumsikan bahwa Anda dapat menggunakan salah satu kerangka kerja untuk mengembangkan aplikasi.

Pertanyaan utama kemudian menjadi: mengapa Anda memilih salah satu dari yang lain? Artikel ini bertujuan untuk menjawabnya dengan mengembangkan formulir pendaftaran sederhana. Formulir hanya akan bergantung pada kemampuan validasi setiap kerangka kerja.

Prasyarat

Untuk melanjutkan, Anda harus bisa instal Bereaksi dan memiliki pemahaman umum tentang cara kerja aplikasi React. Anda juga harus tahu cara menginstal dan gunakan Sudut.

Struktur File Setiap Aplikasi

Formulir React memiliki struktur file berikut:

Bentuk Angular memiliki struktur file berikut:

Gambar di atas hanya menampilkan bagian yang diedit dari aplikasi Angular.

Dari struktur file di atas Anda dapat melihat bahwa kedua kerangka kerja sangat bergantung pada penggunaan komponen.

Membuat Logika untuk Setiap Aplikasi Formulir

Setiap aplikasi akan memiliki tujuan yang sama: formulir hanya dikirimkan jika setiap kolom input berisi data yang valid. Bidang nama pengguna valid jika berisi setidaknya satu karakter. Kedua bidang kata sandi valid jika nilainya sama.

Angular menyediakan dua metode pembuatan formulir: template-driven dan reaktif. Pendekatan reaktif memungkinkan pengembang untuk membuat kriteria validasi khusus. Pendekatan berbasis template hadir dengan properti yang menyederhanakan validasi formulir.

Bereaksi hanya mampu mengembangkan formulir dengan validasi khusus. Namun, React adalah framework yang lebih populer dan memiliki komunitas yang lebih besar, sehingga banyak library penanganan formulir yang tersedia untuk React. Mengingat bahwa tujuannya di sini adalah untuk menghindari penggunaan pustaka eksternal, aplikasi React akan bergantung pada validasi kustom.

Mengembangkan Template untuk Setiap Aplikasi

Kedua aplikasi mengandalkan template untuk membuat keluaran HTML akhir.

Template HTML Sudut

Itu form-signup.component.html file berisi kode berikut:

<kelas div="bentuk-konten">
<bentuk kelas ="membentuk" #myForm="ngForm">
<h1>Lengkapi formulir untuk bergabung dengan komunitas kami!</h1>
<kelas div="form-input">
<label untuk ="nama belakang" kelas="bentuk-label">Nama belakang:</label>
<memasukkan
 id="nama belakang"
 jenis="teks"
kelas= "masukan-formulir"
 tempat penampung="Masukkan nama pengguna"
 nama="nama belakang"
 ngModel
 diperlukan
 #namapengguna="ngModel"
 />
<p *ngJika="nama pengguna.tidak valid && username.touched">Nama pengguna diperlukan</p>
</div>
<kelas div="form-input">
<label untuk ="kata sandi" kelas="bentuk-label">Kata sandi:</label>
<memasukkan
 id="kata sandi"
 jenis="kata sandi"
 nama="kata sandi"
kelas= "masukan-formulir"
 tempat penampung="Masukkan kata kunci"
 ngModel
 diperlukan
 #kata sandi="ngModel"
 [(ngModel)]="model.kata sandi"
 />
<p *ngJika="kata sandi.tidak valid && kata sandi.sentuh">kata sandi diperlukan</p>
</div>
<kelas div="form-input">
<label untuk ="validasi kata sandi" kelas="bentuk-label">Kata sandi:</label>
<memasukkan
 id="konfirmasi sandi"
 jenis="kata sandi"
 nama="konfirmasi sandi"
kelas= "masukan-formulir"
 tempat penampung="Konfirmasi sandi"
 ngModel
 diperlukan
 #sandi2="ngModel"
 ngValidateEqual="kata sandi"
 [(ngModel)]="model.konfirmasi kata sandi"
 />
<div *ngJika="(password2.dirty || password2.touched) && kata sandi2.tidak valid">
<p *ngJika="kata sandi2.hasError('tidak sama') && kata sandi.valid">
 kata sandi melakukanbukancocok
</p>
</div>
</div>
<tombol
kelas=="form-input-btn"
 jenis="Kirimkan"
 [dengan disabilitas]="formulir saya.tidak valid"
 routerLink="/success"
>
 Mendaftar
</button>
</form>
</div>

React HTML Template

Itu Daftar.js file berisi kode berikut:

impor Reaksi dari "reaksi";
impor gunakanForm dari "../useForm";
impor mengesahkan dari "../validateData";
impor "./Signup.css"
konstan Daftar = ({submitForm}) => {
konstan {handleChange, nilai, handleSubmit, error} = useForm( submitForm, memvalidasi);
kembali (
<div namakelas="bentuk-konten">
<bentuk className="membentuk" onSubmit={handleSubmit}>
<h1>Lengkapi formulir untuk bergabung dengan komunitas kami!</h1>
<div namakelas="form-input">
<label htmlUntuk="nama belakang" namakelas="bentuk-label">Nama belakang:</label>
<memasukkan
 id="nama belakang"
 jenis="teks"
 nama="nama belakang"
 namakelas="masukan formulir"
 tempat penampung="Masukkan nama pengguna"
 nilai={nilai.namapengguna}
 onChange={handleChange}
 />
{errors.nama pengguna &&<p>{errors.namapengguna}</p>}
</div>
<div namakelas="form-input">
<label htmlUntuk="kata sandi" namakelas="bentuk-label"> Kata sandi: </label>
<memasukkan
 id="kata sandi"
 jenis="kata sandi"
 nama="kata sandi"
 namakelas="masukan formulir"
 tempat penampung="Masukkan kata kunci"
 nilai={nilai.sandi}
 onChange={handleChange}
 />
{errors.password &&<p>{errors.password}</p>}
</div>
<div namakelas="form-input">
<label htmlUntuk="validasi kata sandi" namakelas="bentuk-label"> Kata sandi: </label>
<memasukkan
 id="validasi kata sandi"
 jenis="kata sandi"
 nama="validasi kata sandi"
 namakelas="masukan formulir"
 tempat penampung="Konfirmasi sandi"
 nilai={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<p>{errors.passwordvalidate}</p>}
</div>
<tombol className="form-input-btn" jenis="Kirimkan">Mendaftar</button>
</form>
</div>
 )
}
eksporbawaan Daftar;

Anda akan melihat bahwa kedua aplikasi menggunakan kode HTML dasar, kecuali beberapa perbedaan kecil. Misalnya, aplikasi Angular menggunakan atribut "kelas" standar untuk mengidentifikasi kelas CSS. React menggunakan properti "className" kustomnya sendiri. React mengubah ini menjadi atribut "kelas" standar di hasil akhir. UI memainkan peran penting dalam keberhasilan aplikasi apa pun. Karena kedua aplikasi menggunakan struktur HTML dan nama kelas yang sama, kedua aplikasi dapat menggunakan stylesheet yang sama.

Semua properti non-standar dalam template di atas berhubungan dengan validasi.

Membuat Validasi Formulir untuk Aplikasi Angular

Untuk mengakses properti validasi yang merupakan bagian dari pendekatan berbasis template Angular, Anda harus mengimpor FormulirModul dalam app.module.ts mengajukan.

File app.module.ts

impor { NgModul } dari '@sudut/inti';
impor { FormulirModul } dari '@sudut/bentuk';
impor {Modul Peramban } dari '@angular/platform-browser';
impor { ValidateEqualModule } dari 'ng-validasi-sama'
impor { AppRoutingModule } dari './app-routing.module';
impor { Komponen Aplikasi } dari './app.component';
impor { Komponen FormSignup } dari './form-signup/form-signup.component';
impor { FormSuccessComponent } dari './form-success/form-success.component';
@NgModule({
 deklarasi: [
 Komponen Aplikasi,
 KomponenPendaftaran formulir,
 FormSuccessKomponen
 ],
 impor: [
 Modul Peramban,
 FormulirModul,
 ValidasiEqualModule,
 AppRoutingModul
 ],
penyedia: [],
bootstrap: [ Komponen Aplikasi ]
})
eksporkelasModul Aplikasi{ }

Dengan mengimpor FormulirModul dalam file di atas, Anda sekarang memiliki akses ke berbagai properti validasi yang berbeda. Anda harus menambahkan ngModel properti ke bidang input dari template HTML Angular. Jika Anda melihat kembali template Angular di atas, Anda akan melihat bahwa setiap elemen input memiliki properti ini.

Itu FormulirModul dan ngModel beri pengembang akses ke properti validasi seperti sah dan tidak sah. Bagian paragraf dari template HTML Angular menggunakan #namapengguna="ngModel" Properti. Ini menghasilkan peringatan jika data di bidang input tidak valid dan pengguna telah mengubahnya.

Dalam app.module.ts file, Anda juga akan melihat ValidasiEqualModule, yang membandingkan dua kata sandi. Untuk melakukan ini, Anda harus membuat objek model di form-signup.component.ts mengajukan.

File form-signup.component.ts

impor { Komponen, OnInit } dari '@sudut/inti';
@Komponen({
 pemilih: 'formulir-aplikasi-pendaftaran',
 templateUrl: './form-signup.component.html',
 gayaUrl: ['./form-signup.component.css']
})
ekspor kelasKomponenPendaftaran FormulirmengimplementasikanOnInit{
konstruktor() { }
 ngOnInit(): ruang kosong {}
 model = {
 kata sandi: batal,
 konfirmasi sandi: batal
 };
}

Kata sandi kedua dalam template HTML Angular menggunakan model objek dalam file di atas, untuk membandingkan nilainya dengan kata sandi pertama.

Itu dengan disabilitas properti pada tombol kirim memastikan bahwa itu tetap tidak aktif sampai setiap bidang input berisi data yang valid. Mengirimkan formulir membawa pengguna ke halaman sukses dengan bantuan router Angular.

File app.routing.module.ts

impor { NgModul } dari '@sudut/inti';
impor { RouterModule, Rute } dari '@sudut/router';
impor { Komponen FormSignup } dari './form-signup/form-signup.component';
impor { FormSuccessComponent } dari './form-success/form-success.component';
konstan rute: Rute = [{
 jalur: '',
 komponen: FormSignupComponent
},{
 jalur: 'kesuksesan',
 komponen: FormSuccessComponent
}];
@NgModule({
impor: [RouterModule.forRoot (rute)],
ekspor: [Modul Router]
})
eksporkelasAppRoutingModul{ }

Modul perutean di atas berisi dua jalur; jalur utama untuk bentuk dan jalur sukses untuk komponen sukses.

File app.component.html

<router-outlet></router-outlet>

Outlet router dalam file komponen aplikasi di atas memungkinkan pengguna untuk dengan mudah menavigasi antara formulir-pendaftaran dan bentuk-sukses komponen menggunakan URL.

Membuat Validasi Formulir untuk Aplikasi React

eksporbawaanfungsivalidasiData(nilai-nilai) {
membiarkan kesalahan = {}
jika (!nilai-nilai.nama belakang.memangkas()) {
 error.nama pengguna = "Nama pengguna diperlukan";
 }
jika (!nilai-nilai.kata sandi) {
 error.password = "Kata sandi diperlukan";
 }
jika (!nilai-nilai.validasi kata sandi) {
 error.passwordvalidate = "Kata sandi diperlukan";
 } lainjika (values.passwordvalidate !== values.password) {
 error.passwordvalidate = "Kata sandi melakukanbukancocok";
 }
kembali kesalahan;
}

Itu validasiData.js file berisi kode di atas. Ini memantau setiap bidang input dalam formulir untuk memastikan bahwa setiap bidang berisi data yang valid.

File useForm.js

impor {useState, useEffect} dari 'reaksi';
konstan useForm = (panggilan balik, validasi) => {
konstan [nilai, setValues] = useState({
 nama belakang: '',
 kata sandi: '',
 validasi kata sandi: ''
 });
konstan [kesalahan, setErrors] = useState ({});
konstan [isSubmitting, setIsSubmitting] = useState (Salah)
konstan handleChange = e => {
konstan {nama, nilai} = e.target;
setNilai({
 ...nilai,
[nama]: nilai
 });
 }
konstan handleKirim = e => {
e.preventDefault();
 setErrors (validasi(nilai-nilai));
 setIsMengirim (BENAR);
 }
 gunakanEfek(() => {
 if (Object.keys (kesalahan).panjang 0 && sedang Mengirim) {
 panggilan balik();
 }
 }, [kesalahan, panggilan balik, sedang Mengirim]);
kembali { handleChange, nilai, handleSubmit, error };
}
eksporbawaan gunakanFormulir;

Adat gunakanForm kait di atas menentukan apakah pengguna berhasil mengirimkan formulir. Peristiwa ini hanya terjadi jika semua data dalam formulir valid.

File Form.js

impor Reaksi dari "reaksi";
impor Daftar dari "./Daftar";
impor Kesuksesan dari "./Kesuksesan"
impor { status penggunaan } dari "reaksi";
konstan Bentuk = () => {
konstan [isSubmitted, setIsSubmitted] = useState(Salah);
fungsimenyerahkan formulir() {
 setDikirim(BENAR);
 }
kembali (
<div>
 {!Dikirim? (<Daftar submitForm={submitForm} />): (<Kesuksesan />)}
</div>
 )
}
eksporbawaan Membentuk;

Itu Membentuk komponen di atas mengalihkan tampilan antara Daftar komponen dan Kesuksesan komponen jika formulir dikirimkan.

File App.js

impor Membentuk dari "./komponen/Formulir";
fungsiAplikasi() {
kembali (
<div namakelas="Aplikasi">
<Membentuk/>
</div>
 );
}
eksporbawaan Aplikasi;

Antarmuka Aplikasi Sudut

UI menampilkan formulir dengan satu input untuk nama pengguna dan dua input kata sandi.

Saat formulir berisi data yang tidak valid, halaman akan menampilkan pesan kesalahan:

Ketika formulir berisi data yang valid, pengguna dapat mengirimkannya dengan sukses:

UI Aplikasi React

Ketika formulir berisi data yang tidak valid:

Ketika formulir berisi data yang valid:

Persamaan dan Perbedaan Antara React dan Angular

Kerangka kerja Angular dan React sangat mirip dan mampu menghasilkan hasil yang identik. Namun, alat yang mungkin Anda gunakan untuk mencapai hasil ini akan berbeda. Angular adalah platform pengembangan yang menyediakan akses ke alat-alat seperti router dan perpustakaan formulir. Bereaksi membutuhkan sedikit lebih banyak kreativitas dari pengembang untuk mencapai hasil yang sama.

Bereaksi vs. Angular: Mengapa React Jauh Lebih Populer?

Baca Selanjutnya

Tentang Penulis