Memahami Struktur File Angular

by

Setelah project selesai disetup, kita akan membahas struktur file Angular.

Pengenalan Struktur File

Buka folder project menggunakan text editor favorit Anda. Terdapat beberapa folder yang bisa menjadi perhatian.

  • node_modules berisi library yang otomatis diinstal oleh Angular. Folder ini dapat diabaikan.
  • src/app adalah folder kerja utama Anda. Semua component yang dibuat akan disimpan disini.
  • src/index.html, file awal yang akan di serve oleh Angular.
  • src/favicon.ico, file favorite icon, ubah sesuai dengan icon yang Anda miliki.
Folder dan file untuk develop Angular Apps

Pada folder App, akan berisi component yang Akan digunakan dalam halaman web. Terdapat 4 type file yang perlu diperhatikan. (kita gunakan nama file default yang digenerate).

  • app.component.css: file stylesheet untuk app.component.
  • app.component.html: file html template untuk component.
  • app.component.spec.ts: digunakan unit test dari component.
  • app.component.ts: file logic dari component, disini kita build component. Digunakan TypeScript.
  • app.module.ts: file config untuk mengatur component yang akan digunakan oleh dalam aplikasi angular.

Relasi Antar File

Jadi, secara sederhana, yang terjadi ketika user melakukan request ke Angular server adalah,

  • Angular akan menjalankan file src/index.html. Dimana didalamnya terdapat javascript bundle, yang akan menjalankan file src/main.ts.
  • Didalam file src/main.ts, terdapat informasi module aplikasi (app.module.ts). (lihat gambar diatas no. 1).
  • file app.module.ts akan berisi informasi component apa yang akan digunakan sebagai bootstrap, dalam hal ini adalah AppComponent. (lihat gambar diatas no. 2).
  • File AppComponent dibaca dan digenerate, kemudian html yang digenerate akan di inject didalam tag <app-root></app-root>. (lihat gambar dibawah).
Sharing is caring:

Leave a Comment