Angular Academy · Pelajaran

Membuat Pustaka dengan ng generate

Buat kerangka proyek pustaka.

Membuat Pustaka dengan ng generate adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Alasan Membuat Pustaka

Ketika beberapa aplikasi membutuhkan komponen, layanan, atau utilitas yang sama, kemas semuanya sebagai pustaka Angular. Pustaka dapat digunakan kembali, memiliki versi, dan dapat dipublikasikan, alih-alih menyalin-tempel kode di antara proyek.

Ruang Kerja Menampung Pustaka

Pustaka berada di dalam ruang kerja Angular: folder yang dikelola oleh satu angular.json dan dapat berisi beberapa aplikasi serta pustaka. Anda dapat menambahkan pustaka ke ruang kerja yang sudah ada atau membuat ruang kerja khusus.

ng new my-workspace --create-application=false
# a workspace with no app, ready to hold libraries

Membuat Pustaka

Skematik ng generate library (alias ng g lib) membuat kerangka proyek pustaka baru di bawah projects/.

ng generate library ui-kit
# creates projects/ui-kit with a sample component, module, and public-api.ts

Yang Dibuat

Pustaka dilengkapi folder src/lib sendiri, barrel public-api.ts, ng-package.json (untuk build), dan entri di angular.json. Pustaka ini merupakan proyek mandiri yang dapat dibuild.

projects/ui-kit/
  src/
    lib/        # your components & services
    public-api.ts
  ng-package.json
  package.json

Menambahkan Komponen ke Pustaka

Buat kode di dalam pustaka dengan menargetkannya menggunakan --project. CLI menempatkan berkas di folder yang tepat.

ng generate component button --project=ui-kit
ng generate service theme --project=ui-kit

Komponen Mandiri dalam Pustaka

Pustaka modern lebih memilih komponen mandiri, yang diimpor langsung oleh pengguna tanpa NgModule. Tandai komponen dengan standalone: true agar aplikasi dapat menggunakannya melalui impor sederhana.

@Component({
  selector: 'lib-button',
  standalone: true,
  template: '<button class="lib-btn"><ng-content></ng-content></button>',
})
export class ButtonComponent {}

package.json Pustaka

Setiap pustaka memiliki package.json sendiri yang mendefinisikan nama, versi, dan dependensi rekan seperti @angular/core. Dependensi rekan berarti aplikasi pengguna menyediakan Angular, sehingga salinan ganda dapat dihindari.

{
  "name": "ui-kit",
  "version": "0.0.1",
  "peerDependencies": { "@angular/core": "^18.0.0" }
}

Mengembangkan dengan Aplikasi Lokal

Simpan aplikasi demo di ruang kerja yang sama untuk menguji pustaka selama Anda mengembangkannya. Impor berdasarkan nama pustaka akan diarahkan ke sumber lokal melalui pemetaan jalur TypeScript di tsconfig.

Pustaka vs Aplikasi

Aplikasi ditujukan untuk diterapkan; pustaka ditujukan untuk digunakan. Pustaka tidak dapat disajikan secara langsung, melainkan dibuild menjadi paket yang dapat didistribusikan lalu dipublikasikan atau diimpor oleh aplikasi di ruang kerja.

Jaga Fokus Pustaka

Pustaka yang baik memiliki tujuan yang jelas (kit UI, lapisan akses data). Hindari menggabungkan kode yang tidak berkaitan; pustaka yang kohesif lebih mudah diberi versi, didokumentasikan, dan digunakan kembali.

Langkah Berikutnya

Setelah kerangka pustaka dibuat, pekerjaan yang tersisa adalah menentukan API publik, membuild-nya ke dalam Angular Package Format, dan mempublikasikan-nya. Pelajaran berikutnya membahas masing-masing hal tersebut.

Pemeriksaan Singkat

Bagaimana cara membuat pustaka?

Rangkuman

Pustaka mengemas kode yang dapat digunakan kembali oleh banyak aplikasi. Buat pustaka dengan ng generate library di dalam ruang kerja; perintah ini membuat kerangka src/lib, public-api.ts, ng-package.json, dan package.json dengan dependensi rekan. Tambahkan kode melalui --project, utamakan komponen mandiri, dan jaga agar setiap pustaka tetap fokus.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuat Pustaka dengan ng generate” gratis?

Ya — teks lengkap “Membuat Pustaka dengan ng generate” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membuat Pustaka dengan ng generate”?

Buat kerangka proyek pustaka. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Membuat Pustaka dengan ng generate” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy