Bagaimana cara mengatur proyek Angular? Artikel berikut mengumpulkan dan membagikan 5 tips praktis untuk mengelola proyek Angular. Saya harap ini dapat bermanfaat bagi semua orang! 
Entri front-end (vue) ke kursus penguasaan: masuk ke pembelajaran
Saat fitur-fitur baru dirilis, Web apps menjadi semakin besar. Dalam perjalanan DevOps sebuah perusahaan, perubahan rilis seperti ini terjadi setiap hari. [Tutorial terkait yang direkomendasikan: "tutorial sudut"]
Dalam siklus rilis yang begitu cepat, kode dapat dengan cepat menjadi sulit digunakan. Terutama proyek yang dikembangkan berdasarkan JavaScript , seperti NextJS atau Angular.
Berikut adalah 5 praktik terbaik kami dalam mengelola proyek Angular untuk keterbacaan, pemeliharaan, dan skalabilitas maksimum.
Banyak inti aplikasi tunggal adalah basis kode dengan kelas yang membengkak. Berdasarkan sifatnya, program-program yang membengkak ini sulit untuk dipertahankan. Mereka rapuh dalam arti bahwa mengubah satu baris kode dapat berdampak buruk pada keseluruhan program. Prinsip tanggung jawab tunggal dapat mencegah permasalahan tersebut.
Prinsip tanggung jawab tunggal berarti suatu komponen mempunyai satu dan hanya satu fungsi.
Membangun aplikasi menggunakan pendekatan ini menghasilkan kerangka kerja modular di mana aplikasi dirangkai melalui blok kode ini.
Menggunakan pendekatan ini dapat membuat program lebih mudah dibaca dan dipelihara. Itu juga dapat dengan mudah menemukan fungsi tertentu dalam aplikasi.
Untuk memastikan kode Anda memenuhi persyaratan ini, tanyakan pada diri Anda pertanyaan ini:这代码是干什么的？ Jika jawaban Anda mengandung kata kunci and , maka Anda perlu memfaktorkan ulang kode Anda menjadi kode tanggung jawab tunggal.
Membangun dan memperluas aplikasi Angular adalah latihan yang berkelanjutan. Seiring waktu, mengatur proyek Anda menggunakan prinsip tanggung jawab tunggal akan membuat aplikasi Anda bersih, mudah dibaca, dan dipelihara.
Modul di Angular adalah implementasi dari prinsip tunggal. Di Angular , setiap modul mewakili fungsionalitas yang terpisah dan independen.
Angular menyediakan beberapa modul tipe untuk menentukan cara mengelompokkan atau mengaturnya secara logis.
Inti
Modul Core adalah NgModule yang digunakan untuk membuat instance aplikasi dan memuat fungsi inti untuk penggunaan global.
Oleh karena itu, layanan tunggal apa pun harus diimplementasikan dalam modul inti. Header, footer, atau bilah navigasi adalah modul jenis ini.
Semua layanan (layanan tunggal) yang memiliki satu dan hanya satu instance per aplikasi harus diimplementasikan dalam modul inti. Misalnya, layanan otentikasi atau layanan pengguna.
Fitur
Modul fungsi mewakili kode yang membangun fungsionalitas aplikasi. Misalnya, dalam aplikasi belanja online, kita memiliki fungsi menambahkan item ke keranjang belanja dan modul terpisah untuk pembayaran.
Dibagikan
Modul bersama terdiri dari modul-modul yang dapat digabungkan untuk menciptakan fungsionalitas baru. Misalnya, fungsi pencarian dapat digunakan untuk berbagai fungsi di platform.
Menata kode Anda dengan cara ini membuat segalanya lebih mudah ditemukan dan meningkatkan kemungkinan penggunaan kembali kode.
File gaya dapat dengan cepat menjadi tidak teratur jika tidak mengikuti struktur umum. Pola praktik terbaik umum pola 7-1 , yang menggunakan 7 folder dan 1 file, seperti yang ditunjukkan di bawah ini:
Aplikasi - folder utama proyek
Abstrak - Bagian abstrak, berisi semua variabel, mix, dan komponen serupa
Inti - Berisi tata letak, pengaturan ulang, dan kode boilerplate untuk keseluruhan situs
Komponen - Berisi gaya untuk semua komponen yang akan dibuat untuk situs web, seperti tombol, tab, dan modals
Tata Letak - Berisi file yang diperlukan untuk menentukan tata letak situs, seperti header dan footer
Halaman - Berisi gaya untuk setiap halaman tertentu
Vendor - Folder opsional ini cocok untuk kerangka bootstrap yang digunakan oleh proyek, seperti bootstrap
Buat file all.scss baru di setiap folder yang berisi semua tugas untuk folder tersebut.
Banyak layanan dirancang untuk berjalan secara global. Kemudian, dalam beberapa kasus, suatu komponen memerlukan layanan. Praktik komponen pengkodean tradisional merekomendasikan prinsip tanggung jawab tunggal.
Dalam pendekatan ini, layanan dan komponen ditulis sebagai proyek terpisah.
Namun apa yang terjadi jika Anda mempertimbangkan untuk menghapus komponen layanan ini? Yang Anda dapatkan hanyalah kode mati, yang hanya membuat gudang semakin berantakan. Dalam hal ini, praktik terbaiknya adalah menempatkan layanan di dalam komponen.
Dengan cara ini, pemeliharaan komponen dan layanan menjadi lebih mudah.
Struktur file bersarang secara inheren lebih mudah dinavigasi daripada sistem file datar yang menempatkan semua file kode dalam satu direktori.
Namun, seiring dengan semakin dekatnya proyek, struktur file proyek bisa menjadi sangat kompleks. Meskipun hal ini mempermudah pencarian kode, hal ini menimbulkan tantangan saat menulis pernyataan import.
Ketika struktur direktori mulai berkembang melampaui tiga atau empat tingkat, pernyataan import bisa menjadi sangat panjang dan sulit dibaca.
Untuk mengatasi masalah ini, kita dapat mengkonfigurasi alias path di file tsconfig.json. Dalam file ini, ada array bernama compilerOptions . Ini adalah alias jalur yang Anda konfigurasikan di aplikasi Anda.
Saat kode dikompilasi, alias jalur yang ditentukan dalam larik ini diganti dengan jalur sebenarnya. Nilai setiap jalur adalah objek nilai kunci yang berisi jalur dan alias sebenarnya.
Membangun dan memperluas aplikasi Angular adalah latihan yang berkelanjutan.