Bugünkü yazıda, Angular’ın temel kavramlarından birine, yani Modüllere dalıyoruz. Angular, bize, büyük bir uygulamayı bile yönetilebilir parçalara bölmemize yardımcı olan bir modüler sistem sunuyor. Gerçekçi bir senaryo temelinde modüllerin nasıl oluşturulduğunu ve içlerine bileşen ve servislerin nasıl eklendiğini göstereceğim.
Proje Dizin ve Dosya Hiyerarşisi
Başlamadan önce dizin yapımıza göz atalım:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/src |-- /app | |-- /books | | |-- /components | | | |-- /books | | | | |-- books.component.ts | | | | |-- books.component.html | | | | |-- books.component.css | | | |-- /book-detail | | | | |-- book-detail.component.ts | | | | |-- book-detail.component.html | | | | |-- book-detail.component.css | | |-- books.service.ts | | |-- books.module.ts | | |-- /authors | | |-- /components | | | |-- /authors | | | | |-- authors.component.ts | | | | |-- authors.component.html | | | | |-- authors.component.css | | | |-- /author-detail | | | | |-- author-detail.component.ts | | | | |-- author-detail.component.html | | | | |-- author-detail.component.css | | |-- authors.service.ts | | |-- authors.module.ts | | |-- app.component.ts | |-- app.component.html | |-- app.component.css | |-- app.module.ts |
Örnek Senaryo: Kütüphane Uygulaması
Bir kütüphane uygulamamız olduğunu düşünelim. Bu uygulamada iki ana modülümüz var: “Books” ve “Authors“. Her modül kendi bileşenlerine ve servislerine sahip olacak.
Books Modülü:
Bu modül, kitap listesi ve kitap detayları gibi bileşenleri içerecek. Ayrıca kitapları bir API’den almak için bir servisi olabilir.
Books Modülü Kodu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { BooksComponent } from './components/books/books.component'; import { BookDetailComponent } from './components/book-detail/book-detail.component'; @NgModule({ declarations: [BooksComponent, BookDetailComponent], imports: [CommonModule], exports: [BooksComponent] }) export class BooksModule { } |
Authors Modülü:
Bu modül, yazar listesi ve yazar detayları gibi bileşenleri içerecek. Ayrıca yazarları bir API’den almak için bir servisi olabilir.
Authors Modülü Kodu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { AuthorsComponent } from './components/authors/authors.component'; import { AuthorDetailComponent } from './components/author-detail/author-detail.component'; @NgModule({ declarations: [AuthorsComponent, AuthorDetailComponent], imports: [CommonModule], exports: [AuthorsComponent] }) export class AuthorsModule { } |
CLI ile Modül, Bileşen ve Servis Oluşturma
Angular CLI ile modüller, bileşenler ve servisler oluşturalım:
Books modülü için:
|
1 2 3 |
ng generate module books |
Books modülü içinde yeni bir Books bileşeni için:
|
1 2 3 |
ng generate component books/components/books --module=books |
Angular’da, ng generate component komutu ile yeni bir bileşen oluşturduğunuzda, Angular CLI otomatik olarak bu bileşeni AppModule’e eklemeye çalışır. Ancak projenizde birden fazla modül varsa ve bileşeni ana AppModule dışında bir modüle eklemek istiyorsanız, hangi modüle eklemek istediğinizi belirtmelisiniz.
–module=books kısmı tam olarak bu işi yapar. Bu argüman, oluşturduğunuz bileşenin BooksModule’e ekleneceğini belirtir.
Bu özellik, büyük projelerde çok yararlıdır. Özellikle lazy loading gibi özellikleri kullanırken veya uygulamanızın farklı kısımlarını farklı modüllerde organize ederken, doğru modüle doğru bileşeni eklemek önemlidir. Bu nedenle, oluşturduğunuz bileşenin hangi modüle ekleneceğini açıkça belirtmek için –module argümanını kullanırsınız.
Books için servis:
|
1 2 3 |
ng generate service books/books |
Bileşenlerin aksine, servisler Angular’da modüllere özel olarak “tanımlanmaz“. Yani, bir bileşeni oluşturduğunuzda bu bileşenin hangi modülde tanımlandığına dikkat etmeniz gerekir. Ancak servisler için bu durum geçerli değildir.
Bir servis oluşturduğunuzda, bu servisi herhangi bir bileşen veya diğer serviste enjekte edebilirsiniz. Burada önemli olan şey servisin hangi modülde “sağlandığıdır” (providedIn). Eğer servis providedIn: ‘root’ olarak tanımlanmışsa, bu servis tüm uygulama genelinde kullanılabilir hale gelir. Yani, bu servis uygulamanın root enjektoründe tek bir instance olarak sağlanır.
Angular CLI ile bir servis oluşturduğunuzda, varsayılan olarak providedIn: ‘root’ şeklinde oluşturulur:
|
1 2 3 4 5 6 7 8 9 |
@Injectable({ providedIn: 'root' }) export class BooksService { ... } |
Bu nedenle, servisinizi oluşturduğunuzda genellikle hangi modüle eklendiğini belirtmenize gerek yoktur. Ancak, bir servisi sadece belirli bir modülde kullanılabilir hale getirmek isterseniz, providedIn değerini o modül olarak ayarlayabilirsiniz.
Özetle, servisler modüller arasında global olarak paylaşılabilir olduğu için (varsayılan olarak root enjektöründe sağlandığında), hangi modüle eklendiğini belirtmek için –module argümanını kullanmanıza genellikle gerek yoktur. Ancak bileşenler spesifik modüllere eklenmelidir ve bu nedenle hangi modüle ekleneceğini belirtmek için –module argümanını kullanmalısınız.
Authors modülü için:
|
1 2 3 |
ng generate module authors |
Authors modülü içinde yeni bir Authors bileşeni için:
|
1 2 3 |
ng generate component authors/components/authors --module=authors |
Authors için servis:
|
1 2 3 |
ng generate service authors/authors |
Neden Bu Organizasyon?
Modülleri kullanmak kodumuzu organize tutar. Özellikle büyük ölçekli projelerde, her özelliği veya işlevi kendi modülünde tutmak, uygulamanın geliştirilmesini, test edilmesini ve bakımını basit ve yönetilebilir hale getirir.
Modüller sayesinde projeleriniz organize ve yönetilebilir kalır.
Umarım “Angular Modüller” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Angular Pipes: Veriyi Dönüştürme
Yeni bir yazımda görüşmek üzere.
Happy coding!
