Angular Academy · Ders

ng generate ile Kitaplık Oluşturma

Bir kitaplık projesi iskeleti oluşturun

ng generate ile Kitaplık Oluşturma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Neden Kitaplık Oluşturmalısınız

Birden fazla uygulamanın aynı bileşenlere, hizmetlere veya yardımcı programlara ihtiyacı olduğunda bunları bir Angular kitaplığı olarak paketlersiniz. Kitaplık; projeler arasında kodu kopyalayıp yapıştırmak yerine yeniden kullanılabilir, sürümlendirilebilir ve yayımlanabilir bir yapı sağlar.

Çalışma Alanları Kitaplıkları Barındırır

Kitaplıklar bir Angular çalışma alanının içinde bulunur: birden fazla uygulama ve kitaplık içerebilen, tek bir angular.json tarafından yönetilen klasördür. Bir kitaplığı mevcut bir çalışma alanına ekleyebilir veya özel bir çalışma alanı oluşturabilirsiniz.

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

Kitaplık Oluşturma

ng generate library şeması (takma adı ng g lib), projects/ altında yeni bir kitaplık projesinin temel yapısını oluşturur.

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

Neler Oluşturulur

Kitaplık; kendine ait bir src/lib klasörü, bir public-api.ts dışa aktarma dosyası, derleme için bir ng-package.json ve angular.json içinde bir kayıtla birlikte gelir. Kendi içinde tamamlanmış ve derlenebilir bir projedir.

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

Kitaplığa Bileşen Ekleme

--project ile hedef göstererek kitaplığın içine kod oluşturun. CLI, dosyaları doğru klasöre yerleştirir.

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

Kitaplıklarda Bağımsız Bileşenler

Modern kitaplıklar, tüketicilerin bir NgModule içe aktarmasına gerek kalmadan doğrudan içe aktarabildiği bağımsız bileşenleri tercih eder. Uygulamaların bileşeni basit bir içe aktarmayla kullanabilmesi için standalone: true olarak işaretleyin.

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

Kitaplığın package.json Dosyası

Her kitaplığın adını, sürümünü ve @angular/core gibi eş bağımlılıklarını tanımlayan kendi package.json dosyası vardır. Eş bağımlılıklar, Angular'ı tüketen uygulamanın sağlaması anlamına gelir; böylece yinelenen kopyalar oluşmaz.

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

Yerel Bir Uygulamaya Karşı Geliştirme

Kitaplığı geliştirirken denemek için aynı çalışma alanında bir örnek uygulama bulundurun. Kitaplık adına göre yapılan içe aktarma, tsconfig içindeki TypeScript yol eşlemeleri sayesinde yerel kaynak koduna çözümlenir.

Kitaplık ve Uygulama Karşılaştırması

Uygulama dağıtılmak, kitaplık ise kullanılmak üzere tasarlanır. Kitaplıklar doğrudan sunulamaz; dağıtılabilir bir paket olarak derlenir ve ya yayımlanır ya da çalışma alanındaki uygulamalar tarafından içe aktarılır.

Kitaplıkları Odaklı Tutun

İyi bir kitaplığın açık bir amacı vardır (örneğin bir kullanıcı arayüzü kiti veya veri erişim katmanı). İlişkisiz kodları aynı yerde toplamaktan kaçının; bütünlüklü kitaplıkların sürümlendirilmesi, belgelenmesi ve yeniden kullanılması daha kolaydır.

Sonraki Adımlar

Kitaplığın temel yapısı oluşturulduğuna göre geriye genel API'sini tanımlamak, onu Angular Paket Biçimi içinde derlemek ve yayımlamak kalır. Sonraki derslerde bunların her biri ele alınacaktır.

Kısa Kontrol

Bir kitaplığı nasıl oluşturursunuz?

Özet

Kitaplıklar, birden fazla uygulama için yeniden kullanılabilir kodu paketler. Bir çalışma alanında ng generate library kullanarak kitaplık oluşturun; bu komut src/lib, public-api.ts, ng-package.json ve eş bağımlılıkları içeren bir package.json dosyasının temel yapısını oluşturur. --project ile kod ekleyin, bağımsız bileşenleri tercih edin ve her kitaplığı belirli bir amaca odaklı tutun.

Sıkça Sorulan Sorular

“ng generate ile Kitaplık Oluşturma” dersi ücretsiz mi?

Evet — “ng generate ile Kitaplık Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“ng generate ile Kitaplık Oluşturma” dersinde ne öğreneceğim?

Bir kitaplık projesi iskeleti oluşturun Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“ng generate ile Kitaplık Oluşturma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön