Satu Lagi Artikel Sudut, konfigurasi Bahagian dan persekitaran

Dalam artikel saya sebelum ini, kami belajar cara menjana komponen. Sebelum meneruskan, saya fikir kita harus melihat pelbagai tanggapan tentang konfigurasi dan persekitaran.

Terdapat raja konfigurasi yang berbeza: Gelagat sudut dan pengkompil skrip taip. Hari ini kita akan melihat bahagian Angular, dan semuanya dalam projek angular.json.

Fail ini menerangkan semua projek anda dan ikut skema daripada Angular CLI : /@angular/cli/lib/config/schema.json

‘Projek’ adalah bahagian utama. Dan dalam yang ini, anda akan melihat 'skema' dan 'arkitek'.

Arkitek menerangkan tingkah laku CLI : bina, saji, uji, …

Skema menerangkan cara menjana kod. Dan inilah yang akan kita lakukan hari ini.

Ini adalah milik saya selepas artikel pertama :

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

Kita dapat melihat bahawa ia mengandungi 'scss' untuk kunci gaya. Ini kerana, apabila saya mencipta projek, saya menjawab 'scss' kepada gesaan cli.

Tetapi saya mahu melakukan lebih banyak lagi. Biasanya saya lebih suka membina komponen dengan corak Komponen Fail Tunggal. Ini seperti yang dilakukan oleh VueJS. Gaya, html dan kod skrip taip anda dalam satu fail. Ini kerana ia memaksa anda membina sedikit komponen.
Untuk melakukannya, tambahkan baris tersebut : inlineStyle dan inlineTemplate

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

Sekarang apabila anda menjalankan ng generate component my-new-component, ia akan mencipta hanya fail skrip taip.

Kami akan meneruskan dengan beberapa pengoptimuman. Amalan terbaik menjelaskan bahawa anda harus sentiasa menetapkan Pengesanan Perubahan anda kepada 'OnPush'. Jadi, ia perlu dilakukan semasa penjanaan komponen.
Untuk melakukannya, tambahkan baris ini : changeDetection

"@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true,
    "changeDetection": "OnPush"
  }
},

Itu sahaja, anda kini telah menyediakan penjanaan kod projek lalai anda.

Dalam versi Angular sebelumnya, anda dapat mentakrifkan "berdiri sendiri: benar". Tetapi ia kini tingkah laku lalai.

Saya akan mengakhiri dengan konsep Envinronment. Apabila anda membina aplikasi, anda biasanya bergantung pada API. Apis ini boleh disampaikan secara setempat (pada komputer anda semasa anda menulis kod) tetapi boleh disampaikan oleh pelayan ujian, pelayan pra-pengeluaran atau pelayan pengeluaran.
Jadi anda perlu menetapkan nama hos dalam pembolehubah.

Angular membawa penyelesaian yang baik untuk ini : persekitaran.

ng menjana persekitaran

Arahan ini akan menambah 2 fail baharu dalam projek anda : environment.ts dan environment.development.ts
Dan ia juga akan mengubah suai angular.json anda dengan menambahkan tatasusunan 'fileReplacements' dalam nod 'projects.my-new-project.architect.configurations.development'

Semasa proses binaan, ia menggantikan environment.ts yang diperlukan dengan fail persekitaran yang diperlukan (environment.development.ts sebagai contoh).

Anda boleh menyimpan semua pembolehubah persekitaran khusus di dalam dan mengimport environment.ts di mana-mana sahaja anda memerlukannya. Tetapi berhati-hati untuk tidak mengimport persekitaran lain.*.ts kerana ia tidak akan tersedia pada masa jalan !

Berikut ialah contoh persekitaran :

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

Jadi anda hanya perlu mencipta 'environment.production.ts' baharu dengan pembolehubah yang diperlukan di dalamnya. Kemudian, ubah angular.json untuk menambah bahagian FileReplacements di bawah 'project.architect.configurations.production' seperti ini :

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

Pada fikiran saya, Angular sepatutnya mencipta kedua-dua fail pembangunan dan pengeluaran. Itu agak pelik.

Ho, saya terlupa untuk mengatakan bahawa dalam Angular v19, anda boleh menentukan pembolehubah global semasa permulaan. Ini mungkin alernatif kepada konsep persekitaran tetapi ia memerlukan lebih banyak persediaan pada proses binaan.

Semoga hari yang menyenangkan ☁️

[nota] Semua artikel menggunakan arahan daripada Angular v19*

Atas ialah kandungan terperinci Satu Lagi Artikel Sudut, konfigurasi Bahagian dan persekitaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!