Rumah  >  Artikel  >  hujung hadapan web  >  5 petua praktikal untuk mengurus projek Angular (perkongsian ringkasan)

5 petua praktikal untuk mengurus projek Angular (perkongsian ringkasan)

青灯夜游
青灯夜游ke hadapan
2022-08-22 19:40:091476semak imbas

Bagaimana untuk mengatur projek Angular? Artikel berikut menyusun dan berkongsi 5 petua praktikal untuk menguruskan projek Angular Saya harap ia akan membantu semua orang!

5 petua praktikal untuk mengurus projek Angular (perkongsian ringkasan)

Dengan keluaran ciri baharu, saiz Web apps semakin besar dan besar. Perubahan keluaran jenis ini berlaku setiap hari dalam proses DevOps syarikat. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]Dalam kitaran keluaran berkelajuan tinggi, kod akan menjadi sukar digunakan dengan cepat. Terutamanya projek yang dibangunkan berdasarkan , seperti NextJS

atau

AngularJavaScript. Berikut ialah 5 amalan terbaik kami untuk mengurus projek untuk kebolehbacaan maksimum, kebolehselenggaraan dan kebolehskalaan.

Angular1. Mematuhi prinsip tanggungjawab tunggal

Banyak teras aplikasi tunggal adalah asas kod dengan kelas yang mengembang. Dengan sifatnya, program-program kembung ini sukar untuk dikekalkan. Mereka rapuh dalam erti kata bahawa menukar satu baris kod boleh memberi kesan bencana pada keseluruhan program. prinsip tanggungjawab tunggal boleh mengelakkan masalah ini.

Prinsip tanggungjawab tunggal bermaksud komponen mempunyai satu dan hanya satu fungsi. Membina aplikasi menggunakan pendekatan ini menghasilkan rangka kerja modular di mana aplikasi dirangkai bersama melalui blok kod ini.

Menggunakan kaedah ini boleh menjadikan program lebih mudah dibaca dan diselenggara. Ia juga boleh mencari fungsi tertentu dalam aplikasi dengan mudah.

Untuk memastikan kod anda dapat memenuhi keperluan ini, anda boleh bertanya pada diri sendiri:

Jika jawapan anda mengandungi kata kunci

, maka anda perlu memfaktorkan semula kod anda menjadi satu kod tanggungjawab.

Membina 这代码是干什么的? aplikasi dan memanjangkannya ialah latihan yang berterusan. Dari masa ke masa, berlatih menggunakan prinsip tanggungjawab tunggal untuk mengatur projek anda akan menjadikan aplikasi anda bersih, boleh dibaca dan boleh diselenggara. and

Angular2 Ikat kod ke dalam modul

modul

dalam

Angular ialah pelaksanaan prinsip tunggal. Dalam , setiap modul mewakili fungsi yang berasingan dan bebas. Beberapa jenis modul disediakan dalam Angular

untuk menentukan cara mengumpulkan atau menyusunnya secara logik. Modul

Angular

Teras

ialah

yang digunakan untuk mewujudkan aplikasi dan memuatkan fungsi teras untuk kegunaan global. CoreNgModuleJadi, mana-mana perkhidmatan tunggal perlu dilaksanakan dalam modul teras. Pengepala, pengaki atau bar navigasi ialah modul jenis ini.

Semua perkhidmatan (perkhidmatan singleton) yang mempunyai satu dan hanya satu contoh bagi setiap aplikasi hendaklah dilaksanakan dalam modul teras. Contohnya, perkhidmatan pengesahan atau perkhidmatan pengguna.

Ciri

Modul ciri mewakili kod yang membina fungsi aplikasi. Sebagai contoh, dalam aplikasi beli-belah dalam talian, kita akan mempunyai fungsi menambah item pada troli beli-belah dan modul berasingan untuk pembayaran.

Dikongsi

Modul kongsi terdiri daripada modul yang boleh digabungkan untuk mencipta fungsi baharu. Sebagai contoh, fungsi carian boleh digunakan untuk pelbagai fungsi dalam platform.

Struktur kod anda dengan cara ini menjadikan perkara lebih mudah untuk dikesan dan meningkatkan peluang kebolehgunaan semula kod.

3. Susun fail SCSS Fail gaya boleh cepat menjadi tidak teratur jika anda tidak mengikut struktur biasa. Corak amalan terbaik umum ialah corak

, yang menggunakan

folder dan 7-1 fail, seperti berikut: 71

  • Apl

    - Folder utama projek

  • Abstrak

    - Bahagian abstrak yang mengandungi semua pembolehubah, campuran dan komponen serupa

  • Teras

    - Mengandungi reka letak, set semula dan kod plat dandang untuk keseluruhan tapak

  • Komponen

    - Mengandungi gaya untuk semua komponen yang akan dibuat untuk tapak web , seperti butang, tab dan mod

  • Reka letak

    - Mengandungi fail yang diperlukan untuk menentukan reka letak tapak, seperti pengepala dan pengaki

  • Halaman

    - Mengandungi gaya untuk setiap halaman tertentu

  • Vendor - Folder pilihan ini sesuai untuk rangka kerja bootstrap yang digunakan oleh projek, seperti bootstrap

untuk itu khusus Semua penggantian dalam folder mencipta fail all.scss baharu dalam setiap folder.

4. Letakkan perkhidmatan persendirian ke dalam komponen

Banyak perkhidmatan direka untuk dijalankan secara global. Kemudian, dalam beberapa kes, komponen memerlukan perkhidmatan. Amalan komponen pengekodan tradisional mengesyorkan prinsip tanggungjawab tunggal.

Dalam pendekatan ini, perkhidmatan dan komponen ditulis sebagai projek berasingan.

Tetapi apa yang berlaku jika anda mempertimbangkan untuk mengalih keluar komponen perkhidmatan ini? Apa yang anda hadapi ialah kod mati, yang hanya menjadikan gudang lebih bersepah. Dalam kes ini, amalan terbaik ialah meletakkan perkhidmatan di dalam komponen.

Dengan cara ini, menyelenggara komponen dan perkhidmatan adalah lebih mudah.

5 Amalan Terbaik Sudut untuk Memudahkan Import

Struktur fail bersarang sememangnya lebih baik daripada mempunyai semua fail kod dalam satu direktori Fail rata sistem lebih mudah dilayari.

Walau bagaimanapun, apabila projek semakin hampir, struktur fail projek boleh menjadi agak rumit. Walaupun ini memudahkan pengesanan kod, ia memberikan cabaran semasa menulis pernyataan import.

Apabila struktur direktori mula berkembang melebihi tiga atau empat peringkat, pernyataan import boleh menjadi sangat panjang dan sukar dibaca.

Untuk menyelesaikan masalah ini, kita boleh mengkonfigurasi alias laluan dalam fail tsconfig.json. Dalam fail ini, terdapat tatasusunan bernama compilerOptions. Ini ialah alias laluan yang anda konfigurasikan dalam aplikasi anda.

Apabila kod disusun, alias laluan yang ditakrifkan dalam tatasusunan ini akan digantikan dengan laluan sebenar. Nilai setiap laluan ialah objek nilai kunci yang mengandungi laluan dan alias sebenar.

Membina Angular aplikasi dan memanjangkannya ialah latihan yang berterusan.

Artikel ini adalah terjemahan, dalam bentuk terjemahan percuma.

Alamat asal: https://www.adservio.fr/post/how-to-organize-angular-project-top-5-tips

Lebih banyak pengetahuan berkaitan pengaturcaraan , sila layari: Video Pengaturcaraan! !

Atas ialah kandungan terperinci 5 petua praktikal untuk mengurus projek Angular (perkongsian ringkasan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam