ANGULAR DEVELOPMENT: DEPENDENCY INJECTION & NG-BOOTSTRAP EĞİTİMİ

DI gücü ve ng-bootstrap arayüzü

Hiyerarşik injector, InjectionToken ve ng-bootstrap bileşenleriyle esnek ve zengin arayüz

Angular Development: Dependency Injection & ng-bootstrap Eğitimi, Angular'ın bağımlılık enjeksiyon sistemini derinlemesine öğretir ve ng-bootstrap ile zengin arayüzler kurmayı gösterir.

3 gün Orta Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Sağlayıcılardan injection token'lara, modal ve datepicker'dan erişilebilir bileşenlere derinlik

Angular Development: Dependency Injection & ng-bootstrap Eğitimi, Angular'ın bağımlılık enjeksiyon sistemini derinlemesine öğretir ve ng-bootstrap ile zengin arayüzler kurmayı gösterir. Katılımcılar hiyerarşik injector'ları, useClass, useValue ve useFactory sağlayıcılarını, InjectionToken ve multi provider'ları uygular. Ardından ng-bootstrap ile modal, accordion, datepicker ve tablo bileşenleri işlenir. Program erişilebilirlik ve tema uyarlamasıyla tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; DI kavramları ve ng-bootstrap bileşenleri gerçek bir yönetim paneli üzerinde adım adım uygulanır.

Seviye

Orta Seviye — Angular bağımlılık enjeksiyonunu derinlemesine ve ng-bootstrap ile hazır UI bileşenleri

Öğrenme Metodu

Gerçek bir yönetim paneli üç gün boyunca kurulur; her modülde yeni bir DI tekniği veya ng-bootstrap bileşeni projeye eklenir.

Neden Bu Eğitim?

🔌Esnek bağımlılık

DI sistemini derinlemesine kavrayarak servisleri soyutlar, yapılandırmayı dışarıdan verir ve kodu test edilebilir hale getirirsiniz.

🎨Hazır UI bileşenleri

ng-bootstrap ile modal, datepicker ve tablo gibi bileşenleri jQuery'siz, Angular uyumlu biçimde hızla arayüze eklersiniz.

♿Erişilebilir arayüz

ng-bootstrap'in erişilebilirlik desteğiyle klavye ve ekran okuyucu uyumlu, standartlara uygun bileşenler kurarsınız.

Anahtar Konular

angular dependency injectionangular di eğitiming-bootstrap eğitimiangular injectiontokenangular bootstrap bileşenleriangular servis enjeksiyonuangular ngbmodalangular kursuön yüz geliştirme eğitimiangular ui bileşenleri
“Bağımlılık enjeksiyonu Angular'ın kalbidir; onu gerçekten anlamak, esnek ve test edilebilir uygulamaların kapısını aralar.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve kurulum

1
Angular temeli

Bileşen, servis ve modül kavramlarına aşinalık beklenir; servis ve enjeksiyon kavramı eğitimde derinleştirilir.

2
TypeScript bilgisi

Sınıf, arayüz, generic ve dekoratör kavramlarına hakimiyet sağlayıcı desenlerini anlamada önemlidir.

3
CSS ve Bootstrap

Temel CSS ve Bootstrap grid ve yardımcı sınıf bilgisi ng-bootstrap bileşenlerini düzenlemeyi kolaylaştırır.

4
Geliştirme ortamı

Node.js ve Angular CLI kurulu, ng-bootstrap eklenebilir ve projenin çalışabilir durumda olması gerekir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Angular DI sistemini ve injector mekanizmasını kavrar, useClass, useValue, useFactory ve useExisting sağlayıcılarını uygular ve servis kapsamını yönetir.
Modül 1
DI Sistemi ve Injector
  • Bağımlılık enjeksiyonunun amacı ve faydası
  • Injector'ın bağımlılığı çözme mekanizması
  • Token ve bağımlılık eşleştirme mantığı
  • constructor enjeksiyonu ile servis alma
  • inject fonksiyonuyla alternatif erişim
  • Tersine çevrilmiş kontrol (IoC) ilkesi
Modül 2
Sağlayıcı Türleri
  • useClass ile sınıf tabanlı sağlama
  • useValue ile sabit değer sağlama
  • useFactory ile fabrika fonksiyonu sağlama
  • useExisting ile var olan servise takma ad
  • deps ile fabrika bağımlılıklarının verilmesi
  • Sağlayıcı türünün senaryoya göre seçimi
Modül 3
Servis Kapsamı ve providedIn
  • providedIn root ile uygulama geneli servis
  • Bileşen sağlayıcısıyla kapsamlı örnek
  • providedIn platform ve any farkları
  • Tree-shakable sağlayıcı ve paket boyutu
  • Singleton ve çoklu örnek davranışı
  • Lazy modülde servis örneklenmesi
Modül 4
ng-bootstrap Kurulumu
  • ng add ile ng-bootstrap entegrasyonu
  • Bootstrap CSS'in projeye eklenmesi
  • NgbModule ve standalone bileşen içe aktarımı
  • Global yapılandırma servisleriyle varsayılanlar
  • Sürüm ve Bootstrap sürüm uyumluluğu
  • İlk bileşenin arayüze yerleştirilmesi
Günün hedefiKatılımcı InjectionToken ile değer ve yapılandırma sağlar, hiyerarşik injector'da çözümleme sırasını kavrar, multi provider ve çözümleme değiştiricilerini uygular.
Modül 1
InjectionToken Kullanımı
  • InjectionToken ile tipli token oluşturma
  • Arayüz ve sabit değerlerin enjekte edilmesi
  • Yapılandırma nesnesinin token ile sağlanması
  • factory ile token'ın varsayılan değeri
  • Tarayıcı API'lerinin token üzerinden soyutlanması
  • Token ile gevşek bağlı bağımlılık tasarımı
Modül 2
Hiyerarşik Injector
  • Element ve modül injector hiyerarşisi
  • Bağımlılığın yukarı doğru çözümlenmesi
  • Bileşen ağacında servis örneklerinin kapsamı
  • Aynı token'ın farklı seviyelerde ezilmesi
  • View ve environment injector ayrımı
  • Kapsamlı servisle durum izolasyonu
Modül 3
Multi Provider ve Değiştiriciler
  • multi true ile çoklu sağlayıcı dizisi
  • HTTP_INTERCEPTORS ile çoklu interceptor
  • Optional ile isteğe bağlı bağımlılık
  • Self ve SkipSelf ile çözümleme kontrolü
  • Host ile bileşen sınırında çözümleme
  • Eklenti noktası tasarımı için multi token
Modül 4
DI ile Yapılandırma Deseni
  • forRoot deseniyle modül yapılandırması
  • Fonksiyonel provide ile sade yapılandırma
  • Ortam bazlı sağlayıcı değişimi
  • Test için sağlayıcıların sahtelenmesi
  • Soyut sınıf ve token ile arayüz sözleşmesi
  • Yapılandırmanın tek noktadan yönetilmesi
Günün hedefiKatılımcı ng-bootstrap ile modal, accordion ve datepicker gibi bileşenleri kurar, tablo ve navigasyon bileşenlerini uygular, tema ve erişilebilirliği yönetir.
Modül 1
Modal ve Overlay Bileşenleri
  • NgbModal servisiyle modal açma ve kapama
  • Modal'a veri geçirme ve sonuç alma
  • Tooltip ve Popover ile bağlamsal bilgi
  • Toast ile anlık bildirim gösterimi
  • Dropdown menü ve tetikleyici kullanımı
  • Offcanvas ile yan panel açılımı
Modül 2
Tarih ve Form Bileşenleri
  • NgbDatepicker ile tarih seçimi
  • Tarih modeli ve biçimlendirme adaptörü
  • Timepicker ile saat ve dakika seçimi
  • Typeahead ile otomatik tamamlama
  • Rating bileşeniyle puanlama girişi
  • Reactive Forms ile bileşen entegrasyonu
Modül 3
Düzen ve Navigasyon
  • Accordion ile açılır içerik panelleri
  • Nav ve Tabset ile sekmeli gezinme
  • Pagination ile sayfalı veri gezintisi
  • Carousel ile görsel döngü gösterimi
  • Progressbar ve Spinner ile durum
  • Collapse ile içerik gizleme ve gösterme
Modül 4
Tema, Erişilebilirlik ve Uyarlama
  • Bootstrap değişkenleriyle tema uyarlama
  • Karanlık mod ve renk şeması desteği
  • ARIA öznitelikleri ve klavye gezinmesi
  • Odak yönetimi ve ekran okuyucu uyumu
  • Global config servisiyle varsayılan ayar
  • Özel bileşen görünümünün düzenlenmesi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
DI kavrayışı

Angular DI sistemini ve injector'ın bağımlılığı nasıl çözdüğünü kavrar, IoC ilkesini pratikte uygulayabilirsiniz.

✅
Sağlayıcı türleri

useClass, useValue, useFactory ve useExisting sağlayıcılarını senaryoya göre doğru biçimde seçip uygularsınız.

✅
InjectionToken

InjectionToken ile değer ve yapılandırma sağlar, tarayıcı API'lerini soyutlayıp gevşek bağlı tasarım kurarsınız.

✅
Hiyerarşik injector

Injector hiyerarşisini ve çözümleme sırasını kavrar, servis kapsamını bileşen ağacında bilinçli yönetirsiniz.

✅
Multi provider

multi provider ve Optional, Self, SkipSelf değiştiricileriyle esnek eklenti noktaları ve çözümleme kurgularsınız.

✅
ng-bootstrap kurulumu

ng-bootstrap'i projeye entegre eder, global yapılandırmayla bileşen varsayılanlarını merkezi olarak yönetirsiniz.

✅
Zengin bileşenler

Modal, datepicker, typeahead, accordion ve tablo gibi ng-bootstrap bileşenleriyle zengin arayüzler kurarsınız.

✅
Erişilebilirlik

ARIA, odak yönetimi ve tema uyarlamasıyla klavye ve ekran okuyucu uyumlu erişilebilir arayüzler üretirsiniz.

Kimler İçin Uygundur?

  • Angular DI sistemini yüzeysel kullanan ve gerçek anlamda kavramak isteyen geliştiriciler
  • Bootstrap tabanlı arayüzü Angular bileşenleriyle kurmak isteyen ekipler
  • esnek yapılandırma arayan geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
Angular DI sistemini yüzeysel kullanan ve gerçek anlamda kavramak isteyen geliştiriciler, Bootstrap tabanlı arayüzü Angular bileşenleriyle kurmak isteyen ekipler ve esnek yapılandırma arayan geliştiriciler için uygundur. Bileşen, servis ve modül kavramlarına aşinalık ile temel TypeScript bilgisi beklenir.
InjectionToken'a neden ihtiyaç duyarım?
Sınıf olmayan değerleri (yapılandırma nesnesi, sabit, arayüz veya tarayıcı API'si) enjekte etmek için token'a ihtiyaç duyarsınız, çünkü bunların bir sınıf tipi yoktur. Eğitimde InjectionToken ile tipli token oluşturma, varsayılan factory, yapılandırma sağlama ve API soyutlama örnek bir panel üzerinde uygulanır.
ng-bootstrap, jQuery veya bootstrap.js gerektiriyor mu?
Hayır. ng-bootstrap, Bootstrap bileşenlerini tamamen Angular ile yeniden yazar; yalnızca Bootstrap CSS gerekir, jQuery veya bootstrap.js gerekmez. Bu sayede bileşenler Angular change detection ve şablonlarıyla uyumlu çalışır. Eğitimde kurulum, global yapılandırma ve modal, datepicker, accordion gibi bileşenler uygulanır.
Eğitimin süresi ve formatı nedir?
Eğitim üç gün sürer ve her gün dört modülden oluşur. DI kavramları ve ng-bootstrap bileşenleri gerçek bir yönetim paneli üzerinde adım adım uygulanır. Yüz yüze veya online yapılabilir; içerik kurumun kullandığı Angular sürümü ve arayüz ihtiyaçlarına göre uyarlanabilir.
Eğitim sonunda sertifika veriliyor mu?
Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve geliştirilen örnek yönetim panelini belgeler; kurumsal gruplara özel bileşen ve yapılandırma ihtiyaçlarına göre uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. Angular Development: Dependency Injection & ng-bootstrap Eği Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre3 gün
SeviyeOrta Seviye
FormatOnline / Yüz Yüze / Hibrit
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

AngularAngular Gelişmiş Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Angular Gelişmiş Eğitimi

3 günİleriOnline / Yüz Yüze / Hibrit

Değişim denetimi, OnPush, Signals, ileri bağımlılık enjeksiyonu, dinamik bileşen, lazy loading ve performans optimizasyonunu öğreten ileri seviye Angular eğitim

Detayları Gör →
AngularAngular Temel Kavramlar Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Angular Temel Kavramlar Eğitimi

3 günTemelOnline / Yüz Yüze / Hibrit

Bileşenler, veri bağlama, direktifler, servisler, HttpClient, yönlendirme ve formlarla Angular temellerini sıfırdan öğreten uygulamalı giriş eğitimi.

Detayları Gör →
AngularAngular with Type Script Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Angular with Type Script Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Tipler, arayüzler, jenerikler, dekoratörler, katı mod, tip güvenli form ve tiplenmiş HttpClient ile Angular'da TypeScript'i derinlemesine öğreten eğitim.

Detayları Gör →
AngularAngular, Reactive, & Observable Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Angular, Reactive, & Observable Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

RxJS Observable, Subject ve operatörlerle Angular'da reaktif programlama eğitimi. HttpClient, async pipe, hata yönetimi ve reaktif durum uygulamalı.

Detayları Gör →
AngularGelişmiş Angular Test Çerçevesi Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Gelişmiş Angular Test Çerçevesi Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

TestBed, component harness, fakeAsync, marble testing ve CI ile ileri düzey Angular test eğitimi. Birim, entegrasyon ve uçtan uca testler uygulamalı.

Detayları Gör →
AngularTesting Angular Apps Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Testing Angular Apps Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Jasmine, Karma ve TestBed ile Angular uygulamalarını test etme eğitimi. Bileşen, servis, HTTP, asenkron ve Cypress uçtan uca testler uygulamalı.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn