Diyakini bahwa dalam pengembangan front-end, setara dengan "
Hello world " adalah aplikasi - daftar tugas. Ya, ini memungkinkan Anda untuk menutupi aspek CRUD dalam membuat aplikasi, tetapi kemampuan kerangka kerja yang digunakan atau pustaka sering terpengaruh sangat dangkal.
Sudut terus berubah dan memperbarui, tetapi ada sesuatu yang tetap sama. Saya akan berbicara tentang konsep Sudut dasar yang perlu Anda pelajari jika Anda ingin menggunakan kerangka kerja JavaScript ini dengan cara terbaik.
Ada banyak yang harus dipelajari untuk bekerja dengan Angular, dan pendatang baru sering terjebak di level awal hanya karena mereka tidak tahu di mana dan apa yang harus dicari. Oleh karena itu, saya menulis panduan (yang mencakup ringkasan singkat tentang dasar-dasar Angular), yang saya sendiri akan sangat berguna ketika saya baru mulai bekerja dengan Angular 2+.
Diterjemahkan ke Alconost1. Arsitektur modular Angular
Secara teoritis, Anda dapat meletakkan semua kode Angular pada satu halaman dan dalam satu fungsi besar, tetapi ini tidak disarankan: ini adalah cara yang tidak efisien untuk menyusun kode yang mencegah Anda mengungkapkan tujuan Angular.
Bagian dari arsitektur kerangka ini adalah penggunaan aktif dari konsep modul, yang merupakan kode yang memiliki tujuan tunggal. Aplikasi Angular pada dasarnya terdiri dari modul, beberapa di antaranya terisolasi, sementara yang lain umum.
Ada berbagai cara untuk mengatur modul dalam suatu aplikasi. Dengan menjelajahi berbagai struktur arsitektur, Anda dapat menentukan bagaimana aplikasi akan berkembang seiring perkembangannya, dan juga belajar bagaimana mengisolasi kode dan mengurangi saling ketergantungan.
Apa yang harus google:- Pola arsitektur sudut,
- Arsitektur aplikasi berskala sudut.
2. Aliran data satu arah dan kekekalan
Ikatan bilateral memenangkan hati banyak pengembang front-end pada masa Angular 1 - pada kenyataannya, ini adalah salah satu fitur pembeda utama dari kerangka ini. Namun, ketika aplikasi dikembangkan, pendekatan ini mulai menciptakan masalah dalam hal kinerja.
Ternyata ikatan dua arah tidak diperlukan di mana-mana
Angular 2+ masih memungkinkan untuk mengimplementasikannya, tetapi untuk ini perlu diminta secara eksplisit - oleh karena itu, pengembang harus memikirkan aliran data dan arahnya. Selain itu, ini memungkinkan aplikasi untuk menangani data secara lebih fleksibel, karena Anda dapat menentukan cara mentransfernya.
Apa yang harus google:- bekerja dengan aliran data di Angular,
- aliran searah di Angular,
- manfaat gertakan satu arah.
3. Arahan atribut dan struktural
Arahan adalah ekstensi HTML dengan elemen tambahan. Arahan atribut memungkinkan Anda mengubah properti suatu elemen. Arahan struktural mengubah tata letak dengan menambahkan atau menghapus elemen DOM.
Misalnya,
ngSwitch dan
ngIf adalah arahan struktural: mereka mengevaluasi parameter dan menentukan apakah bagian-bagian tertentu dari DOM harus ada.
Arahan atribut adalah perilaku khusus yang melekat pada suatu elemen, komponen, atau arahan lainnya.
Dengan belajar menggunakan arahan dari kedua jenis ini, Anda dapat memperluas kemampuan aplikasi Anda sendiri dan mengurangi duplikasi kode dalam proyek. Arahan atribut juga membantu memusatkan perilaku spesifik yang digunakan di berbagai bagian aplikasi.
Apa yang harus google:- Arahan atribut sudut,
- Arahan struktural sudut,
- Templat direktif struktural sudut.
4. Penangan siklus hidup komponen
Setiap aplikasi memiliki siklus hidup yang menentukan bagaimana objek dibuat, diproses, dan kemudian dihapus. Dalam kerangka Angular, siklus hidup komponen terlihat seperti ini:
→ → → → → DOM
Kami memiliki kesempatan untuk memproses poin-poin utama dari siklus ini dan fokus pada poin-poin spesifik dalam waktu atau peristiwa. Ini memungkinkan Anda untuk membuat respons yang sesuai dan menyesuaikan perilaku sesuai dengan berbagai tahapan komponen.
Misalnya, jika Anda ingin memuat beberapa data sebelum merender halaman, ini dapat dilakukan melalui
ngOnInit() . Dan jika Anda perlu memutuskan
ngOnDestroy() dari database, ini dapat dilakukan pada saat
ngOnDestroy() .
Apa yang harus google:- penangan siklus hidup komponen di Angular;
- siklus hidup komponen.
5. Layanan yang diamati dan HTTP
Layanan yang diamati bukan fitur unik Angular, melainkan sesuatu dari ES7. Namun demikian, fungsi ini diimplementasikan dalam kerangka kerja kerangka kerja, dan ide-ide yang sesuai ditransfer dengan baik juga ke React, Vue dan perpustakaan dan kerangka kerja terkait JavaScript lainnya.
Apa yang harus google:- Pola pengamat JavaScript
- objek yang diamati dan HTTP dalam Angular,
- Objek yang diamati dalam ES7.
6. Arsitektur komponen yang cerdas dan bodoh
Seringkali saat menulis aplikasi pada Angular, semuanya dibuang ke dalam satu komponen, tetapi ini bukan pendekatan terbaik. Konsep komponen yang cerdas dan bodoh di Angular pasti patut mendapat perhatian lebih, terutama di kalangan pemula.
Peran komponen dalam rencana umum aplikasi ditentukan oleh apakah itu "bodoh" atau "pintar". Komponen "konyol" biasanya tidak melacak keadaan, dan perilakunya mudah diprediksi dan dipahami - jika mungkin, komponen harus dibuat seperti itu.
Komponen pintar lebih sulit untuk dipahami karena melibatkan input dan output. Untuk memanfaatkan sepenuhnya kemampuan Angular, Anda harus memahami arsitektur komponen pintar dan bodoh: dengan cara ini Anda akan menguasai templat dan cara berpikir yang akan membantu Anda menulis kode yang lebih produktif dan membangun interaksi yang tepat dalam aplikasi.
Apa yang harus google:- komponen sudut cerdas dan bodoh,
- komponen stateless bodoh
- komponen presentasi
- komponen sudut cerdas.
7. Struktur aplikasi standar
Kemampuan untuk bekerja dengan baris perintah dalam menentukan struktur aplikasi berguna, tetapi itu bukan obat mujarab. Membuat aplikasi di Angular (dan aplikasi apa pun secara umum) mirip dengan membangun rumah: ada proses yang sudah mapan yang telah dioptimalkan oleh komunitas selama bertahun-tahun dan memungkinkan Anda untuk menulis aplikasi yang lebih efisien dan produktif.
Dan Angular di sini tidak terkecuali.
Sebagian besar keluhan tentang Angular dapat didengar dari mereka yang mencoba mempelajarinya tanpa memahami strukturnya. Sintaks yang jelas dan ringkas ditangkap dengan cepat, namun, untuk memahami struktur aplikasi, Anda perlu mengetahui konteks, persyaratan, dan bagaimana semuanya cocok pada level konseptual dan praktis. Setelah mempelajari berbagai kemungkinan struktur aplikasi Angular dan rekomendasi untuk aplikasi mereka, Anda akan mendapatkan ide tentang bagaimana menulis sendiri.
Apa yang harus google:- Aplikasi sudut dengan satu repositori,
- Perpustakaan sudut, paket sudut,
- Bundel sudut
- Aplikasi mikro sudut.
- monorepositori.
8. Sintaks untuk binding template
Sorotan dari kerangka kerja JavaScript yang dipermasalahkan adalah ikatan, dan juga menjadi salah satu alasan penciptaannya. Pengikatan template menggabungkan HTML statis dan JavaScript, dan sintaks pengikatan template Angular bertindak sebagai perantara antara kedua teknologi.
Jika Anda belajar menggunakan fitur ini dengan benar dan tepat waktu, maka mengubah halaman statis menjadi sesuatu yang interaktif akan menjadi jauh lebih mudah dan lebih menyenangkan. Jelajahi berbagai skenario pengikatan: pengikatan properti, pengikatan acara, interpolasi, dan pengikatan dua arah.
Apa yang harus google:- mengikat ke properti di Angular,
- acara mengikat di Angular,
- mengikat dua arah dalam Angular, interpolasi dalam Angular,
- meneruskan konstanta ke Angular.
9. Routing dan modul fungsi
Dalam kasus Angular, modul fungsional biasanya diremehkan, meskipun ini sebenarnya cara yang bagus untuk merampingkan dan membatasi serangkaian persyaratan bisnis. Mereka membantu membedakan tanggung jawab dan membantu mencegah polusi kode dalam jangka panjang.
Ada lima jenis modul fungsional (domain, perutean, perutean, layanan, dan widget), dan masing-masing memiliki seperangkat kemampuan sendiri. Dengan mempelajari cara menggunakan modul fungsional dalam kombinasi dengan perutean, Anda dapat membuat set fungsi terpisah dan memberikan pemisahan kemampuan aplikasi yang mudah dimengerti dan nyaman.
Apa yang harus google:- Modul fungsi sudut,
- struktur fungsional umum di Angular,
- penyedia modul fungsi.
- pemuatan malas dengan modul perutean dan fungsi.
10. Formulir dan validasi data (formulir reaktif dan validator)
Bentuk adalah bagian integral dari pengembangan front-end.
Dan di mana ada formulir, ada verifikasi data.
Anda dapat membuat formulir cerdas yang berfungsi baik dengan data pada kerangka Angular dalam berbagai cara, dan formulir reaktif adalah pendekatan yang paling umum. Namun, ada opsi lain, yaitu templat dan validator khusus.
Dengan memahami cara kerja validator dan CSS, Anda dapat mempercepat alur kerja Anda dan menyiapkan aplikasi Anda untuk penanganan kesalahan.
Apa yang harus google:- validasi bentuk dalam Angular,
- validasi data berbasis template,
- validasi formulir reaktif,
- validator sinkron dan asinkron di Angular,
- validator bawaan
- validator khusus di Angular,
- bidang pemeriksaan silang.
11. Proyeksi konten
Kerangka kerja Angular memiliki konsep seperti memproyeksikan konten, yang memungkinkan Anda mentransfer data secara efektif dari komponen induk ke komponen anak. Pada awalnya, ini mungkin tampak rumit, tetapi pada kenyataannya, dalam hal ini, pandangan ditempatkan di dalam pandangan lain - ini menciptakan pandangan utama.
Seringkali proyeksi konten dipahami secara dangkal: seolah-olah kita menyematkan tampilan anak dalam tampilan induk. Namun, untuk pemahaman yang lebih mendalam tentang kerangka kerja, perlu untuk memahami bagaimana data ditransfer antara representasi yang berbeda - di sinilah pengetahuan konsep konten memproyeksikan berguna.
Setelah mempelajari proyeksi konten, Anda akan belajar memahami aliran data aplikasi dan menentukan di mana ia mengalami perubahan.
Apa yang harus google:- memproyeksikan konten dalam Angular,
- hubungan pandangan orang tua dan anak di Angular,
- hubungan antara data dalam tampilan sudut.
12. Ubah Strategi Deteksi "onPush"
Secara default, Angular menggunakan strategi deteksi perubahan standar di mana komponen selalu diperiksa. Tidak ada yang salah dengan menggunakan perilaku default, namun deteksi perubahan seperti itu tidak efektif.
Untuk aplikasi kecil, kecepatan dan kinerja tetap memuaskan. Tetapi begitu aplikasi mencapai ukuran tertentu, peluncuran beberapa elemen melambat, terutama di browser lama.
onPush deteksi perubahan
onPush secara signifikan mempercepat aplikasi karena tidak bergantung pada verifikasi konstan, tetapi tergantung pada operasi pemicu spesifik.
Apa yang harus google:- mendeteksi perubahan onPush di Angular.
13. Rute pembela, pemuatan pra dan tertunda
Jika aplikasi memiliki login akun, Anda akan membutuhkan pembela rute. Intinya adalah untuk melindungi pandangan tertentu dari tampilan yang tidak sah, yang dalam banyak kasus merupakan persyaratan wajib. Rute pembela bertindak sebagai antarmuka antara router dan rute yang diminta: mereka menentukan apakah akan mengizinkan akses ke rute tertentu. Ini adalah topik yang agak luas: misalnya, ini termasuk masalah pengambilan keputusan tentang perutean berdasarkan validitas token, otentikasi peran pengguna dan perlindungan rute.
Untuk mempercepat pemuatan aplikasi dan membuatnya lebih nyaman, pemuatan awal dan yang tertunda juga akan membantu. Perlu juga dicatat bahwa alat-alat ini tidak hanya memungkinkan untuk memutuskan apakah akan mengunduh set gambar tertentu: mereka membantu meningkatkan arsitektur yang terkait dan memuat bagian-bagian berbeda dari aplikasi yang mungkin berada dalam domain dan bidang definisi yang berbeda.
Apa yang harus google:- penjaga rute di Angular,
- pola otentikasi dalam Angular,
- Modul pre dan post load sudut
- templat rute aman di Angular.
14. Saluran khusus
Saluran framework sudut sangat menyederhanakan pemformatan data. Banyak jenis pemformatan (tanggal, mata uang, persentase, dan huruf besar-kecil) sudah dicakup oleh saluran yang sudah dikonfigurasi sebelumnya dan siap digunakan, namun Anda mungkin perlu yang lain.
Dan di sini saluran non-standar berguna, yang membuatnya mudah untuk membuat filter Anda sendiri dan mengonversi format data dengan cara yang diinginkan. Ini sangat mudah - coba saja.
Apa yang harus google:- saluran non-standar di Angular.
15. Dekorator @ViewChild dan @ContentChild
ViewChild dan
ContentChild digunakan untuk berkomunikasi antar komponen. Inti dari kerangka Angular adalah bahwa beberapa komponen yang dirakit bersama, seperti mosaik, digunakan. Namun, desain ini tidak dapat melakukan apa pun jika kepingannya terisolasi satu sama lain.
Untuk ini, dekorator
ViewChild dan
ContentChild diperlukan, setelah mempelajari cara menggunakannya, Anda akan dapat mengakses komponen terkait, dan ini menyederhanakan tugas pertukaran data, dan juga memungkinkan untuk mentransfer data dan peristiwa yang disebabkan oleh komponen terkait.
Apa yang harus google:- Dekorator sudut,
ViewChild dan ContentChild di Angular,
- pertukaran data antar komponen dalam Angular.
16. Komponen dinamis dan "ng-templat"
Dalam kerangka Angular, aplikasi dibangun berdasarkan komponen. Namun, tidak semua komponen statis - beberapa harus dibuat dengan cepat, bukan pra-kompilasi.
Komponen yang dibuat oleh aplikasi on the fly disebut dinamis. Komponen statis mengasumsikan ketidakmampuan tertentu: kita mengharapkan nilai tertentu pada input dan output dan perilaku yang dapat diprediksi yang sesuai.
Komponen dinamis diberikan sesuai kebutuhan. Mereka nyaman digunakan saat membuat aplikasi yang dapat mendengarkan sumber eksternal, mengubah statusnya atau mewakili reaksi terhadap tindakan yang terjadi pada halaman.
Apa yang harus google:- komponen dinamis dalam Angular,
- komponen dinamis dan template-ng.
17. Host , Host Binding dan "exportAs"
@Host ,
@HostBinding adalah dekorator, dan
exportAs adalah properti dari dekoratorDirective. Tujuannya adalah untuk memperluas efek dari parameter yang dilampirkan. Mereka juga menyediakan kemampuan untuk membuat template ekspor kecil untuk digunakan dalam aplikasi.
Jika hal di atas kedengarannya tidak bisa dipahami, Anda harus mempelajari arahan Angular dan memahami tujuannya.
@Host ,
@HostBinding dan
exportAs adalah elemen penting dari konsep arahan.
Apa yang harus google:- Pola penggunaan directive sudut
@Host , @HostBinding dan exportAs di Angular.
18. Manajemen negara menggunakan NgRx
Keadaan aplikasi pada akhirnya menentukan data yang ditampilkan kepada pengguna. Dan jika aplikasi adalah sekelompok spaghetti, maka ada kemungkinan bahwa seluruh struktur data akan menjadi tidak dapat diandalkan dan jika terjadi perubahan hanya crash.
Memahami mengapa status diperlukan dalam Angular memungkinkan Anda memahami bagaimana dan mengapa data berperilaku seperti ini dan bukan sebaliknya.
Kerangka Angular memiliki sistem manajemen negara bagiannya sendiri, tetapi NgRx melakukan pekerjaan yang jauh lebih baik untuk memusatkan negara dan data terkait. Data mungkin hilang dalam rantai hubungan orangtua-anak, dan NgRx membuat repositori terpusat untuk mereka dan menghilangkan masalah ini.
Apa yang harus google:- NgRx sudut,
- Prinsip fluks dan Redux
- Prinsip-prinsip manajemen negara sudut.
19. Zona dan injeksi ketergantungan
Ketergantungan injeksi umumnya konsep skala besar, jadi jika Anda tidak cukup dalam topik ini, Anda harus lebih memahami. Di dalam Angular, ada beberapa cara untuk secara hati-hati menyuntikkan dependensi, tetapi ini terutama dilakukan dengan menggunakan konstruktor. Dengan demikian, Anda tidak dapat mengunduh semuanya secara berurutan, tetapi mengimpor yang paling diperlukan - dan, karenanya, meningkatkan efisiensi aplikasi.
Seperti injeksi ketergantungan, ada "zona" sebelum Angular. Mereka memungkinkan aplikasi untuk mendeteksi tugas yang tidak sinkron. Ini penting karena tugas yang tidak sinkron dapat mengubah keadaan internal aplikasi - dan karenanya presentasi. Zona membuatnya mudah untuk mendeteksi perubahan.
Apa yang harus google:- zona di Angular,
- injeksi ketergantungan
- DI sudut.
Kesimpulan
Angular adalah topik yang luas untuk dijelajahi. Dengan membuat aplikasi pada kerangka ini, Anda dapat belajar banyak, tetapi kadang-kadang tidak sepenuhnya jelas apa yang harus dicari dan di mana harus menggali. Pada awalnya sangat sulit untuk bernavigasi di lingkungan yang tidak dikenal. Semoga tutorial singkat ini telah memberikan beberapa wawasan tentang konsep yang melampaui tutorial Angular biasa, dan memungkinkan pandangan yang lebih luas pada kerangka kerja ini secara keseluruhan.
Tentang penerjemahArtikel ini diterjemahkan oleh Alconost.
Alconost
melokalkan game ,
aplikasi ,
dan situs dalam 70 bahasa. Penerjemah asli bahasa, pengujian linguistik, platform cloud dengan API, pelokalan berkelanjutan, manajer proyek 24/7, segala format sumber daya string.
Kami juga membuat
video iklan dan pelatihan - untuk situs yang menjual, gambar, iklan, pelatihan, permainan asah, penjelajah, trailer untuk Google Play dan App Store.
→
Baca lebih lanjut