Aplikasi TODO front-end sama dengan "Hello world" dalam pemrograman normal. Saat membuat aplikasi TODO, Anda dapat mempelajari implementasi operasi CRUD menggunakan satu atau beberapa kerangka kerja lainnya. Tetapi seringkali proyek-proyek semacam itu hanya secara dangkal berhubungan dengan apa yang sebenarnya diketahui oleh kerangka kerja tersebut.
Jika Anda melihat Angular, Anda merasa bahwa kerangka kerja ini terus berubah dan diperbarui. Bahkan, berkenaan dengan Angular, kita dapat menyoroti beberapa ide yang tetap tidak berubah. Bahan, terjemahan yang kami terbitkan hari ini, memberikan gambaran umum tentang konsep-konsep Angular dasar yang perlu Anda pahami agar dapat menggunakan kapabilitas kerangka kerja ini secara tepat dan efisien.
Untuk belajar Angular, Anda harus belajar banyak. Banyak pengembang terjebak pada tahap awal pengembangan Angular. Ini disebabkan oleh fakta bahwa mereka tidak tahu ke mana harus pergi, atau tidak tahu kata kunci apa yang harus mereka cari informasi yang akan memungkinkan mereka mengambil langkah maju. Penulis materi ini mengatakan bahwa ketika dia mulai belajar Angular 2+, dia ingin dia menemukan panduan untuk kerangka kerja ini yang serupa dengan ini.
1. Arsitektur modular Angular
Secara teori, aplikasi Angular dapat dibuat dengan meletakkan semua kode pada satu halaman, dalam satu fungsi besar. Tetapi untuk melakukannya, di satu sisi, tidak direkomendasikan, dan di sisi lain, pendekatan ini tidak bisa disebut efektif dari sudut pandang penataan kode. Selain itu, ini masuk akal tentang keberadaan Angular.
Angular, sebagai bagian dari arsitektur kerangka kerjanya, memanfaatkan konsep modul secara ekstensif. Modul adalah sepotong kode yang keberadaannya hanya memiliki satu alasan. Secara umum, kita dapat mengatakan bahwa aplikasi Angular dirakit dari modul. Beberapa modul hanya digunakan di satu tempat aplikasi, beberapa di tempat yang berbeda.
Ada banyak cara untuk menyusun modul dalam suatu aplikasi. Selain itu, studi berbagai pola arsitektur membantu untuk memahami bagaimana mengatur struktur aplikasi dengan tujuan untuk menskalakannya selama pertumbuhannya. Selain itu, penggunaan modul secara hati-hati membantu mengisolasi kode dan mencegah duplikasi kode dalam suatu proyek.
Subbagian berikut akan memberikan contoh pertanyaan yang dengannya Anda dapat mencari materi tambahan tentang topik ini. Subbagian tersebut akan ditemukan di bagian lain dari bahan ini.
▍ Permintaan Pencarian
- Pola arsitektur sudut.
- Arsitektur aplikasi bersudut scalable.
2. Aliran data satu arah dan kekekalan
Banyak pengembang yang menggunakan Angular 1 menyukai konsep pengikatan dua arah. Ini, pada kenyataannya, adalah salah satu kualitas menarik dari Angular. Tetapi seiring berjalannya waktu, ketika aplikasi Angular menjadi lebih kompleks, menjadi jelas bahwa pengikatan dua arah menciptakan masalah kinerja.
Ternyata mengikat dua arah, pada kenyataannya, tidak perlu begitu sering.
Di Angular 2+, Anda masih dapat menggunakan penjilidan dua arah, tetapi hanya jika pengembang secara eksplisit menyatakan niatnya untuk menggunakan fitur ini. Pendekatan ini membuat mereka yang menulis kode aplikasi berpikir tentang arah aliran data. Ini, di samping itu, memungkinkan pekerjaan yang lebih fleksibel dengan data. Fleksibilitas dicapai melalui kemampuan untuk menyesuaikan dengan tepat bagaimana data harus dipindahkan dalam aplikasi.
▍ Permintaan Pencarian
- Praktik terbaik aliran data sudut.
- Alur uni-directional di Angular.
- Keuntungan mengikat satu arah.
3. Atribut dan arahan struktural Angular
Arahan adalah ekstensi HTML melalui elemen khusus. Arahan atribut, atau atribut, memungkinkan Anda untuk mengubah properti elemen. Arahan struktural memungkinkan Anda untuk mempengaruhi konten halaman dengan menghapus elemen dari DOM atau menambahkannya ke DOM.
Misalnya,
ngSwitch dan
ngIf adalah arahan struktural, karena mereka mengevaluasi parameter yang diberikan kepada mereka dan menentukan apakah bagian-bagian tertentu dari DOM harus ada dalam dokumen.
Atribut adalah mekanisme untuk mengubah perilaku standar elemen, disesuaikan oleh programmer.
Mempelajari cara menggunakan kedua jenis arahan ini akan membantu memperluas kemampuan aplikasi Anda dan mengurangi jumlah kode duplikat. Arahan atribut, di samping itu, dapat membantu menyoroti beberapa template untuk mengubah elemen yang digunakan di berbagai tempat aplikasi.
▍ Permintaan Pencarian
- Arahan atribut sudut (Arahan atribut sudut).
- Arahan struktural sudut.
- Pola pengarahan struktural sudut.
4. Metode siklus hidup komponen
Setiap bagian dari kode memiliki siklus hidupnya sendiri, yang menentukan bagaimana sesuatu dibuat, ditampilkan di layar, dan kemudian menghilang. Angular memiliki konsep yang disebut siklus hidup komponen. Itu terlihat seperti ini:
- Ciptaan.
- Rendering
- Rendering komponen anak.
- Periksa perubahan properti terkait data.
- Penghancuran.
- Menghapus dari DOM.
Programmer memiliki kesempatan untuk campur tangan dalam komponen pada saat-saat penting dalam siklus ini, dengan fokus, misalnya, pada peristiwa tertentu. Ini memungkinkan Anda untuk menyesuaikan bagaimana program berperilaku di berbagai titik dalam siklus hidup komponen.
Misalnya, Anda mungkin perlu memuat beberapa data sebelum halaman ditampilkan. Anda dapat melakukan ini dalam metode siklus hidup komponen
ngOnInit() . Atau, mungkin di beberapa titik dalam aplikasi, Anda perlu memutuskan koneksi dari database. Anda dapat melakukan ini dalam metode
ngOnDestroy() .
▍ Permintaan Pencarian
- Kait siklus hidup sudut.
- Siklus hidup komponen.
5. Layanan HTTP dan Objek yang Dapat Diobservasi
Apa yang kita bicarakan di sini lebih cenderung tidak terkait dengan fitur khusus Angular, tetapi untuk ES7. Kebetulan di Angular, bekerja dengan objek yang dapat diobservasi diimplementasikan pada level framework. Mekanisme serupa ada di React, Vue, dan pustaka dan kerangka kerja berbasis JavaScript lainnya.
Objek yang dapat diamati adalah pola yang membantu Anda bekerja secara efisien dengan data dalam sistem berbasis peristiwa. Agar dapat mengembangkan aplikasi Angular secara efektif, Anda perlu tahu cara menggunakan layanan HTTP dan objek yang Dapat Diobservasi.
▍ Permintaan Pencarian
- Pola yang dapat diobservasi JavaScript (Template Objek yang Dapat Diamati JavaScript)
- HTTP sudut dan dapat diobservasi (HTTP dan objek yang dapat diobservasi dalam Angular).
- Fitur yang dapat diamati ES7 (Objek yang dapat diamati dalam ES7).
6. Komponen pintar dan bodoh
Banyak, mengembangkan aplikasi Angular, berusaha untuk memasukkan segala yang diperlukan untuk pengoperasian komponen ini. Benar, ini bukan sesuatu yang bisa direkomendasikan untuk penggunaan praktis. Gagasan untuk menggunakan komponen "pintar" dan "bodoh" di Angular adalah sebuah konsep yang, mungkin, harus dibicarakan lebih sering daripada yang mereka bicarakan sekarang, terutama di kalangan pengembang pemula.
Apakah komponen itu pintar atau bodoh menentukan perannya dalam desain keseluruhan perangkat aplikasi. Komponen "konyol" sering tidak memiliki keadaan, mereka berbeda dalam perilaku yang sederhana, dapat diprediksi dan dapat dimengerti. Disarankan, jika memungkinkan, untuk fokus pada penciptaan dan penggunaan komponen "bodoh".
Lebih sulit untuk bekerja dengan komponen "pintar", karena mereka, dalam pekerjaannya, menerima beberapa data input dan menghasilkan beberapa data output. Untuk menggunakan Angular secara efektif, biasakan diri Anda dengan konsep komponen yang pintar dan bodoh. Kenalan ini akan memberi Anda pola dan ide tentang cara mengatur fragmen kode aplikasi dan cara membangun hubungan antara fragmen ini satu sama lain.
▍ Permintaan Pencarian
- Komponen sudut cerdas / bodoh.
- Komponen bodoh tanpa kewarganegaraan.
- Komponen presentasi.
- Komponen cerdas dalam Angular.
7. Struktur aplikasi dan rekomendasi praktis untuk pembentukannya
Jika kita berbicara tentang struktur aplikasi dan aplikasi rekomendasi praktis saat membuatnya, maka alat baris perintah Angular dapat memberikan setidaknya beberapa bantuan kepada programmer. Mengembangkan aplikasi Angular (atau aplikasi lainnya) seperti membangun rumah. Yaitu, kita berbicara tentang metode praktis yang telah dikembangkan dan dioptimalkan oleh komunitas pengembang selama bertahun-tahun. Penggunaan teknik semacam itu untuk menyusun aplikasi menyebabkan munculnya proyek berkualitas tinggi. Sebenarnya, ini berlaku untuk Angular.
Ketika programmer pemula mencoba mempelajari Angular mengeluh tentang kerangka kerja ini, alasan untuk keluhan seperti itu biasanya adalah kurangnya pengetahuan tentang struktur aplikasi. Pemula dengan mudah memahami sintaksis, di sini mereka tidak memiliki masalah. Tetapi menemukan pendekatan yang tepat untuk menyusun aplikasi jauh lebih sulit bagi mereka. Di sini Anda perlu memahami bidang subjek di mana aplikasi dibuat, Anda perlu mengetahui persyaratan untuk aplikasi, dan bagaimana realitas dan harapan terkait pada tingkat konseptual dan praktis.
Mempelajari opsi yang mungkin untuk struktur aplikasi Angular dan rekomendasi praktis untuk menggunakan struktur ini akan memberikan programmer visi tentang cara membuat proyek sendiri.
▍ Permintaan Pencarian
- Aplikasi sudut repo tunggal (aplikasi sudut di-host dalam repositori tunggal).
- Perpustakaan sudut (perpustakaan sudut).
- Paket sudut.
- Bundel sudut (Bundel sudut).
- Aplikasi mikro sudut.
- Monorepo (Monorepositories).
8. Sintaks dan Pola Binding Data
Binding, atau pengikatan data, mungkin merupakan fitur kerangka kerja JavaScript yang paling nyata. Juga, ini adalah salah satu alasan kerangka kerja umumnya ada. Pengikatan data dalam templat adalah jembatan antara HTML statis dan JavaScript. Sintaks pengikatan data dalam template Angular memainkan peran perantara untuk membantu mengkomunikasikan entitas HTML dan JavaScript.
Setelah Anda mempelajari bagaimana dan kapan menggunakan jangkar, Anda dapat dengan mudah mengubah halaman statis menjadi sesuatu yang interaktif. Di bidang ini, disarankan untuk memperhatikan berbagai skenario pengikatan data. Misalnya, ini adalah pengikatan properti, peristiwa, ini adalah interpolasi data dan pengikatan dua arah.
▍ Permintaan Pencarian
- Pengikatan properti sudut.
- Mengikat acara sudut.
- Pengikatan dua arah sudut (Pengikatan data dua arah sudut).
- Interpolasi angular (Interpolasi dalam Angular).
- Konstanta lewat sudut (Konstanta lewat sudut).
9. Modul Fitur dan Perutean
Modul fitur dalam Angular adalah teknologi yang diremehkan. Modul semacam itu, pada kenyataannya, menyediakan pengembang dengan cara yang fantastis untuk mengatur dan mengisolasi set persyaratan bisnis untuk aplikasi. Mereka membantu membatasi pertanggungjawaban fragmen kode dan mencegah, dalam jangka panjang, pencemaran kode.
Ada lima jenis modul Fitur (Domain, Routed, Routing, Layanan, Widget), masing-masing bertanggung jawab atas implementasi fungsi tertentu. Mempelajari cara menggunakan modul Fitur bersamaan dengan perutean dapat membantu dalam membuat blok fungsi yang terpisah. Ini akan membantu dan mengimplementasikan dalam aplikasi suatu skema pemisahan tanggung jawab yang berkualitas tinggi dan jelas.
▍ Permintaan Pencarian
- Modul fitur sudut (Modul fitur dalam Sudut).
- Struktur fitur bersama di Angular.
- Penyedia modul fitur.
- Pemuatan malas dengan modul perutean dan fitur (Pemuatan malas dengan perutean dan modul Fitur).
10. Formulir dan validasi data (formulir reaktif dan validator)
Formulir adalah bagian yang tak terhindarkan dari setiap pengembangan front-end. Dan di mana formulir digunakan, validasi data juga diperlukan.
Angular memiliki berbagai cara untuk membangun formulir pintar yang digerakkan oleh data. Bentuk reaktif sangat populer. Namun, ada opsi lain, khususnya - ini adalah formulir yang validasinya didasarkan pada templat, serta penggunaan validator khusus.
Mempelajari bagaimana validator dan CSS bekerja bersama akan membantu mempercepat pengembangan aplikasi dan memfasilitasi penanganan kesalahan dalam formulir.
▍ Permintaan Pencarian
- Validasi bentuk sudut.
- Validasi yang digerakkan template
- Validasi formulir reaktif.
- Sinkronisasi dan validator async di Angular (Validator sinkron dan asinkron di Angular).
- Validator bawaan.
- Validator ubahsuaian sudut.
- Validasi lintas-bidang.
11. Proyeksi konten
Angular memiliki mekanisme yang disebut proyeksi konten. Ini memungkinkan Anda untuk mengatur transfer data yang efisien dari komponen induk ke komponen turunan. Meskipun gagasan memproyeksikan konten mungkin tampak rumit, esensinya terletak pada kenyataan bahwa untuk membangun beberapa elemen yang ditampilkan di layar, beberapa elemen ditempatkan pada yang lain.
Pengembang sering mempelajari proyeksi konten pada tingkat permukaan, misalnya, membiasakan diri dengan skema di mana komponen anak tertanam dalam komponen induk. Tetapi untuk memperluas pemahaman kita tentang konsep ini, kita juga perlu memahami bagaimana data ditransfer antara komponen visual yang berbeda. Di sinilah pemahaman fitur proyeksi konten akan sangat membantu.
Memahami konsep ini membantu untuk memahami fitur-fitur pergerakan aliran data dalam aplikasi, dan di mana tepatnya mutasi data ini terjadi.
▍ Permintaan Pencarian
- Proyeksi konten sudut.
- Hubungan pandangan orang tua-anak (hubungan orang tua-anak dan komponen visual dari sudut).
- Hubungan data tampilan sudut.
12. onPush Strategy Detection Change
Secara default, Angular menggunakan strategi deteksi perubahan standar. Dengan pendekatan ini, pengecekan komponen sedang berlangsung. Meskipun tidak ada yang salah dengan ini, pendekatan untuk mendeteksi perubahan ini mungkin tidak efektif.
Jika kita berbicara tentang aplikasi kecil, maka kinerjanya tidak terlalu terpengaruh. Tetapi setelah aplikasi tumbuh ke ukuran tertentu, kecepatannya, terutama ketika diluncurkan di browser lama, dapat menurun.
onPush deteksi perubahan
onPush secara dramatis dapat mempercepat aplikasi. Faktanya adalah bahwa ketika digunakan, pemeriksaan hanya dilakukan ketika peristiwa tertentu terjadi. Ini jauh lebih baik daripada pemeriksaan konstan.
▍ Permintaan Pencarian
- Deteksi perubahan onPush sudut (strategi deteksi perubahan onPush sudut).
13. Membatasi akses ke rute, preloading, pemuatan malas
Jika proyek Anda memiliki mekanisme yang menyediakan akses pengguna ke sistem, ini berarti Anda perlu menggunakan pembatasan akses ke rute. Banyak aplikasi memerlukan kemampuan untuk melindungi halaman tertentu dari tampilan yang tidak sah. Pembatasan akses rute berfungsi sebagai antarmuka antara router dan rute yang diminta. Mereka membuat keputusan tentang apakah akses ke rute tertentu diizinkan dalam situasi tertentu. Di bidang perlindungan rute, ada banyak hal yang berguna untuk dipelajari. Secara khusus, ini adalah pengambilan keputusan berdasarkan analisis masa berlaku token, penggunaan peran otentikasi, dan penyediaan pekerjaan yang aman dengan rute.
Preloading dan pemuatan data yang malas dapat meningkatkan pengalaman pengguna bekerja dengan situs dengan mengurangi waktu pemuatan aplikasi. Akan bermanfaat untuk mengatakan bahwa teknologi pemuatan pra-malas tidak hanya terkait dengan gambar. Teknologi ini digunakan saat memecah bundel aplikasi menjadi beberapa bagian dan saat memuat berbagai bagian bundel ini dalam kondisi yang berbeda.
▍ Permintaan Pencarian
- Pelindung rute sudut (Membatasi akses ke rute di Sudut).
- Pola otentikasi sudut.
- Modul preloading dan pemuatan malas sudut (modul pemuatan awal dan pemuatan malas di Angular).
- Pola rute aman sudut.
14. Konveyor khusus
Pipa sudut membuat pemformatan data jauh lebih mudah. Ada banyak konveyor bawaan yang memungkinkan Anda untuk menyelesaikan berbagai tugas standar. Diantaranya adalah tugas memformat tanggal, jumlah mata uang, nilai persentase, serta, misalnya, menangani kasus karakter. Namun, selalu ada tugas yang tidak ada konveyor standar.
Dalam kasus-kasus seperti itulah dibutuhkan pipa khusus. Mekanisme ini memungkinkan pemrogram untuk membuat filter sendiri dan menjelaskan transformasi data yang ia butuhkan. Menggunakan semua ini tidaklah sulit, oleh karena itu konsep ini dapat direkomendasikan untuk dipelajari.
▍ Permintaan Pencarian
15. Dekorator @ViewChild dan @ContentChild
Komponen dapat berkomunikasi satu sama lain berkat
@ContentChild dan
@ContentChild . Inti dari Angular adalah membuat aplikasi multi-komponen yang dibuat menggunakan kerangka kerja ini terlihat seperti teka-teki. Tetapi puzzle semacam itu tidak akan banyak berguna jika fragmennya diisolasi satu sama lain.
Untuk menghubungkan potongan puzzle satu sama lain, dekorator
@ViewChild dan
@ContentChild . Mempelajari fitur-fitur penggunaannya akan memberi Anda kesempatan untuk bekerja dengan komponen yang terkait dengan komponen lain. Ini menyederhanakan tugas mengatur berbagi data antara berbagai komponen. Ini memungkinkan Anda untuk mentransfer data dan informasi tentang peristiwa yang terjadi di komponen-komponen ini antara komponen.
▍ Permintaan Pencarian
- Dekorator sudut (Dekorator di Sudut).
- Viewchild dan contentchild di Angular (Decorators
@ViewChild dan @ContentChild in Angular). - Berbagi data komponen sudut.
16. Komponen dinamis dan arahan template-temp
Komponen adalah blok bangunan aplikasi Angular. Namun, tidak semua komponen harus dibuat terlebih dahulu. Beberapa dari mereka perlu dibuat saat program sedang berjalan.
Komponen dinamis memungkinkan aplikasi untuk membuat apa yang dibutuhkannya saat sedang berjalan.
Komponen statis, tidak seperti yang dinamis, dibuat terlebih dahulu. Ini dilakukan dalam kasus-kasus di mana komponen-komponennya tidak diharapkan dapat terpengaruh. Mereka dapat diprediksi, dengan cara yang telah ditentukan, melakukan konversi data yang memasukkannya.
Komponen dinamis, di sisi lain, diciptakan ketika diperlukan untuk mereka. Mereka ternyata sangat berguna ketika mengembangkan aplikasi yang bekerja dengan sumber data eksternal. Mereka berguna bahkan ketika Anda perlu mengatur reaksi aplikasi terhadap tindakan yang terjadi pada halaman.
▍ Permintaan Pencarian
- Komponen dinamis dalam Angular.
- Komponen dinamis dan template temp-ng (Komponen dinamis dan petunjuk template-ng).
17. Penghias @Host , @HostBinding dan arahan exportAs
@Host ,
@Host , dan arahan
@HostBinding digunakan di Angular untuk mengontrol apa yang mereka terapkan. Mereka, di samping itu, memungkinkan untuk membuat templat ringkas untuk mengekspor entitas yang dapat digunakan dalam aplikasi.
Jika hal di atas tampaknya tidak terlalu jelas bagi Anda, kami sarankan Anda membiasakan diri dengan arahan dan mencari tahu mengapa mereka diperlukan.
@Host ,
@Host , dan arahan
@HostBinding adalah yang membantu Angular menjadi seperti itu.
▍ Permintaan Pencarian
- Pola arahan sudut (Pola arahan sudut).
@Host , @HostBinding dan exportAs di Angular (Dekorator @Host , @HostBinding dan arahan exportAs di Angular).
18. Manajemen status aplikasi menggunakan NgRx
Keadaan aplikasi ditentukan oleh apa yang dilihat pengguna. Jika kebingungan berkuasa dalam kondisi aplikasi, ini dapat menunjukkan bahwa struktur data yang digunakan di dalamnya kurang beradaptasi dengan perubahan. Perubahan seperti itu mungkin perlu dilakukan pada struktur data saat aplikasi tumbuh dan berkembang.
Ketika seseorang mulai memahami spesifik bekerja dengan negara di Angular, ia juga mendekati pemahaman spesifik perilaku data dalam aplikasinya.
Angular memiliki sistem manajemen negaranya sendiri. Namun, ada satu teknologi, NgRx, yang memungkinkan Anda membawa manajemen status aplikasi ke tingkat yang lebih tinggi. Secara khusus, misalnya, data dapat hilang ketika mentransfernya antara sejumlah komponen induk dan komponen anak. Dan NgRx memungkinkan Anda untuk membuat repositori terpusat dan menyingkirkan masalah ini.
▍ Permintaan Pencarian
- NgRx Angular (Menggunakan RxJS dalam Angular).
- Prinsip-prinsip fluks / Redux.
- Prinsip-prinsip manajemen negara sudut.
19. Ketergantungan dan injeksi zona
Injeksi ketergantungan adalah konsep universal yang masif. Jika Anda tidak terlalu mengenalnya, Anda harus mempelajarinya. Angular memiliki banyak cara untuk menyuntikkan dependensi secara akurat. Ini terutama dicapai melalui penggunaan konstruktor. Ini tentang mengimpor ke dalam kode hanya apa yang benar-benar dibutuhkan. Ini membantu meningkatkan kinerja aplikasi.
Konsep zona, seperti gagasan injeksi ketergantungan, tidak unik untuk Angular. Ini adalah mekanisme yang memungkinkan aplikasi untuk memonitor status tugas asinkron sepanjang siklus hidupnya. — , , — , . .
▍
- Angular zones ( Angular).
- Dependency injections ( ).
- Angular DI ( Angular).
Ringkasan
Angular- — . — - , , , . . , , Angular, .
Pembaca yang budiman! Angular-?
