Angular, uygulamaların modüller arasında tekrar kullanılabilir bileşenler, direktifler, interface’ler, pipe’lar vb.. oluşturmasına olanak tanır. Ancak büyük Angular uygulamalarında, bazı bileşenlerin veya servislerin birden çok modül tarafından kullanılması gerekebilir. İşte tam da bu noktada SharedModule devreye girer.
SharedModule Nedir?
SharedModule, genellikle tekrar kullanılabilir bileşenleri, direktifleri ve pipe’ları içeren bir Angular modülüdür. Bu modül, uygulamanın farklı yerlerinde tekrar tekrar kullanılabilir, böylece DRY (Don’t Repeat Yourself – Kendini Tekrarlama) ilkesine uymamıza yardımcı olur.
Neden SharedModule Kullanmalıyız?
Tekrar Kullanılabilirlik: Aynı bileşeni veya direktifi farklı modüllerde kullanmak istiyorsanız, bu öğeleri bir SharedModule içinde tanımlayabilir ve bu modülü ihtiyaç duyduğunuz her yerde import edebilirsiniz.
Düzen: SharedModule, tekrar kullanılabilir bileşenleri ve direktifleri merkezi bir yerde tutarak kodunuzu düzenli tutmanıza yardımcı olur.
Verimlilik: Uygulamanızın farklı modülleri arasında kodu tekrarlamamak, geliştirme sürecini hızlandırır.
SharedModule Nasıl Oluşturulur ve Kullanılır?
1. SharedModule Oluşturma
Öncelikle Angular CLI ile yeni bir modül oluşturalım:
|
1 2 3 |
ng generate module shared |
Bu, projenizin kök dizininde shared adında bir klasör oluşturacaktır.
2. SharedModule İçeriğini Tanımlama
shared.module.ts dosyasını açın ve tekrar kullanılabilir bileşenlerinizi, direktiflerinizi, pipe’larınızı vb.. ekleyin.
Örneğin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CustomPipe } from './custom.pipe'; import { CustomDirective } from './custom.directive'; import { CustomComponent } from './custom.component'; @NgModule({ declarations: [ CustomPipe, CustomDirective, CustomComponent ], imports: [ CommonModule ], exports: [ CustomPipe, CustomDirective, CustomComponent ] }) export class SharedModule { } |
exports dizisi, bu modülün dışına çıkarılacak olan bileşenleri, direktifleri, pipe’ları vb.. tanımlar. Bu sayede bu öğeler, SharedModule’ün import edildiği diğer modüllerde de kullanılabilir.
3. SharedModule’ü Diğer Modüllerde Kullanma
Şimdi SharedModule’ü başka bir modülde kullanmak istiyorsanız, sadece ilgili modüle import etmeniz yeterlidir:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { NgModule } from '@angular/core'; import { SharedModule } from '../shared/shared.module'; @NgModule({ imports: [ SharedModule ] }) export class AnotherModule { } |
Bu şekilde, AnotherModule içinde CustomPipe, CustomDirective ve CustomComponent gibi SharedModule içerisinde tanımlı öğeleri kullanabilirsiniz.
Uygulamanız büyüdükçe ve karmaşıklaştıkça, SharedModule’ün faydalarını daha da çok göreceksiniz. DRY ilkesine sadık kalarak kodunuzu daha verimli, sürdürülebilir ve yönetilebilir hale getirin!
Umarım “Angular’da SharedModule: Ne İçin ve Nasıl Kullanılır?” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Yeni bir yazımda görüşmek üzere.
Happy coding!
