Struktur Project

Main Source

Main source mencakup semua file dan folder yang secara langsung digunakan oleh aplikasi utama. Bagian ini terdiri dari aset, komponen, environment, dan konfigurasi inti yang menyusun logika dan antarmuka aplikasi. Semua kode dalam main source umumnya difokuskan pada kebutuhan aplikasi. Berikut adalah contoh susunan dari folder main source:

src/                                     # Folder source
├── app/
│   ├── core/                            # Elemen inti aplikasi
│   │   ├── config/                      # Konfigurasi global aplikasi
│   │   ├── dashboard/                   # Modul utama dashboard
│   │   ├── dashboard-ess/               # Dashboard ESS
│   │   ├── decorators/                  # Dekorator custom
│   │   ├── directive/                   # Direktif custom
│   │   ├── interceptor/                 # Interceptor HTTP global
│   │   ├── model/                       # Model data aplikasi
│   │   ├── pipe/                        # Pipe custom
│   │   ├── service/                     # Layanan global
│   │   ├── shared-component/            # Komponen umum
│   │   ├── validators/                  # Validasi formulir custom
│   │   ├── auth.guard.ts                # Guard untuk autentikasi
│   │   ├── form.guard.ts                # Guard untuk validasi formulir
│   │   └── permission.guard.ts          # Guard untuk izin akses
│   │
│   ├── util/                            # Fungsi helper/utility
│   │
│   ├── layout/                          # Tata letak global
│   │   ├── component/
│   │   ├── login/
│   │   ├── forbidden/
│   │   └── layout.module.ts
│   │
│   ├── app-routing.module.ts            # Konfigurasi routing utama
│   ├── app.component.html               # Template root aplikasi
│   ├── app.component.ts                 # Komponen root
│   ├── app.module.ts                    # Modul utama aplikasi
│   └── app.service.ts                   # Layanan utama aplikasi
│
├── assets/                              # Folder aset aplikasi
│   ├── demo/                            # Contoh data demo
│   ├── icon/                            # Ikon aplikasi
│   ├── images/                          # Gambar
│   ├── js/                              # Skrip JavaScript eksternal
│   ├── logo/                            # Logo perusahaan
│   ├── richtexteditor/                  # Plugin editor teks
│   ├── themes/                          # (PrimeFlex, Sakai, FontAwesome)
│   └── translations/                    # File translasi
│
├── environments/                        # Konfigurasi environments
│   ├── environment.ts                   # Konfigurasi default
│   ├── environment.prod.ts              # Konfigurasi untuk produksi
│   └── environment.staging.ts           # Konfigurasi untuk staging
│
├── stories/                             # Folder stories
│   ├── assets/                          # Folder aset
│   └── primeng/                         # Folder primeng
│
├── index.html                           # File index
└── style.scss                           # Styling global

Projects Source

Beberapa proyek menggunakan submodule Git untuk mengelola kode tambahan atau library internal. Submodule ini biasanya terkait dengan fitur khusus atau komponen yang digunakan di berbagai proyek. Struktur folder submodule dapat terlihat seperti berikut:

projects/                                # Folder project
├── module-name/                         # Folder modul
│   ├── submodule-name/                  # Modul pengaturan submodul
│   │   ├── pages/                       # Halaman CRUD submodul
│   │   │   ├── add/                     # Form tambah submodul
│   │   │   │   ├── add.component.ts     # File Typescript (logic)
│   │   │   │   ├── add.component.scss   # File SCSS (styling)
│   │   │   │   └── add.component.html   # File HTML (layout isi halaman)
│   │   │   ├── detail/                  # Halaman detail submodul
│   │   │   ├── edit/                    # Halaman edit submodul
│   │   │   ├── general/                 # Halaman general submodul
│   │   │   └── list/                    # Halaman daftar submodul
│   │   │
│   │   ├── service/                     # Layanan untuk API submodul
│   │   │   └── submodule.service.ts
│   │   │
│   │   ├── submodule-routing.module.ts  # Routing submodule
│   │   └── submodule.module.ts          # Modul submodule
│   │
│   ├── module-routing.module.ts         # Routing untuk modul
│   ├── module.module.ts                 # Modul utama
│   └── README.md                        # Dokumentasi module

Struktur Folder

Folder dalam proyek Angular dibagi berdasarkan fungsi atau tanggung jawabnya. Tujuannya adalah untuk memastikan bahwa setiap bagian proyek dapat diakses dan dikelola dengan mudah. Struktur folder yang baik meminimalkan kebingungan, bahkan untuk pengembang baru.

Module

Modul adalah bagian penting dari arsitektur Angular. Modul digunakan untuk mengelompokkan fitur-fitur terkait menjadi satu unit logis. Modul membantu dalam membagi aplikasi menjadi bagian-bagian yang lebih kecil dan dapat dikelola, sekaligus memungkinkan implementasi lazy loading untuk meningkatkan performa aplikasi. Berikut contoh implementasi struktur folder modul:

app/
└── modules/
    ├── auth/
    │   ├── auth.module.ts
    │   ├── auth-routing.module.ts
    │   └── login/
    │       └── login.component.ts
    └── dashboard/
        ├── dashboard.module.ts
        ├── dashboard-routing.module.ts
        └── home/
            └── home.component.ts

Pages

Folder pages digunakan untuk menyimpan komponen utama yang biasanya berfungsi sebagai halaman aplikasi. Komponen di dalam folder ini biasanya memiliki hubungan langsung dengan rute aplikasi. Contoh implementasi folder pages:

app/
└── pages/
    ├── login/
    │   ├── login.component.ts
    │   ├── login.component.html
    │   └── login.component.css
    ├── profile/
    │   ├── profile.component.ts
    │   └── profile.component.html
    └── dashboard/
        └── dashboard.component.ts

Component

Components adalah bagian terkecil dari antarmuka pengguna (UI) yang digunakan kembali di berbagai tempat dalam aplikasi. Biasanya, folder ini menyimpan komponen-komponen yang bersifat modular, seperti button, card, atau form.

app/
└── components/
    ├── button/
    │   ├── button.component.ts
    │   └── button.component.html
    └── card/
        ├── card.component.ts
        └── card.component.html

Service

Service adalah kelas yang digunakan untuk menangani logika bisnis dan komunikasi data. Folder ini menyimpan semua API yang dibutuhkan aplikasi.

app/
└── services/
    ├── auth.service.ts     # Layanan untuk otentikasi
    ├── user.service.ts     # Layanan untuk data pengguna
    └── notification.service.ts

Shared Component

Shared components adalah elemen UI yang digunakan secara global di seluruh aplikasi. Komponen ini ditempatkan dalam folder shared untuk memudahkan impor dan pengelolaan. Shared components biasanya digunakan untuk membuat komponen yang bersifat generik, seperti lov, table, search bar, dan komponen lainnya.

src/
└── app/
    └── core/
        └── shared-component/
            ├── approval-detail/
            │   ├── approval-detail.component.html
            │   ├── approval-detail.component.scss
            │   ├── approval-detail.component.ts
            │   └── approval-detail.module.ts
            │
            ├── breadcrumbs-menu/
            ├── checkbox/
            ├── employee-select/
            ├── linov-button/
            ├── linov-upload/
            ├── lov/
            ├── progress-bar/
            ├── search/
            ├── switch/
            └── table/