TypeScript ile Angular Uygulamalarında Modüller Nasıl Oluşturulur?

Adı : TypeScript ile Angular Uygulamalarında Modüller Nasıl Oluşturulur?

Angular, JavaScript tabanlı bir frameworktür ve TypeScript gibi bir dili kullanmak mümkündür. TypeScript,daha güvenli ve kontrol edilebilir bir yazılım geliştirme deneyimi sağlar ve yüksek ölçekli projeleri yönetmek için idealdir.Modüller ise,projenin küçük kod parçalarına ayrılması için kullanılan yapılardır. Bu sayede, kodun daha yönetilebilir ve bağımsız hale gelmesi sağlanır. Bu yazımızda, TypeScript ile Angular uygulamalarında modüllerin nasıl oluşturulabileceğine odaklanacağız.

Modüllerin Önemi

TypeScript, modüler bir yapı oluşturmak için ES6 modülleri sendegeçerlidir. ES6 modülleri,daha önceden CommonJS ve AMD modülleri örneğinde olduğu gibiyapılandırılmış dışa aktarmalar (exports) ve ithalatlar (imports) yoluyla çalışır.Modül yapısı, kodun daha organize hale gelmesini sağlar ve bağımsız çalışabilirliği ve test edilebilirliği arttırır. Bunun yanı sıra, kodun tekrar kullanılabilirliğini de kolaylaştırır.

Örneğin, uygulamanızın dinamikliği arttıkça, her bir sayfa veya bileşen için ayrı bir modül oluşturabilirsiniz. Bu sayede, bileşenleri bağımsız olarak dağıtabilir ve yeniden kullanabilirsiniz. Bu durum, projenizin geliştirilmesi sürecini de hızlandırır.

Modül oluşturma yaklaşımlarına bir göz atalım:

1. Ayrı Modüller

Bu yaklaşım, her bir bileşen için ayrı bir TypeScript dosyası oluşturmaktır. Her bir bileşen, kendi modülüne sahip olacaktır. Her modül, diğer modüllerden bağımsız bir şekilde çalışabilir ve kodun tekrar kullanılabilirliğini kolaylaştırır. Bu yaklaşımın avantajı, kodun daha yönetilebilir olmasıdır.

2. Modüllerin Birleştirilmesi

Bu yaklaşım, TypeScript dosyalarını, ilgili işlevsellik için bir araya getirir. Bu sayede, özellikle daha küçük projelerde modüllerin daha basit bir yapıda olması sağlanır. Ancak, büyük ölçekli projelerde, tüm kodu bir dosyada tutmak, kodun yönetilebilirliğini azaltacaktır.

3. Modül Yapısının Alt/Üst Bileşenler Arasındaki İlişkileri

Angular uygulamalarında, modüller alt/üst düzey bileşenler ile nasıl etkileşime girdiği önemlidir. Modüller, birbirleriyle iletişim kurabilir ve paylaşabilirler. Örneğin, bir «Shared module » oluşturarak, uygulamanızdaki tüm bileşenlerin kullanabileceği bir modül oluşturabilirsiniz. Bu sayede, kodun tekrar kullanılabilirliği arttırılır ve kodun yönetimi kolaylaşır.

Modül oluşturma yaklaşımları, projenin boyutuna ve gerekliliklerine uygun olarak seçilmelidir. Şimdi, bu yaklaşımların örnekleme adımlarını inceleyelim.

Modül oluşturma Örnekleri

Angular CLI, modül yapısını otomatik olarak oluşturmanıza yardımcı olan bir araçtır. CLI ile modül yapısını oluşturmak için , komut satırına ng generate module MODUL_AD yazmanız yeterlidir. MODUL_AD, oluşturmak istediğiniz modülün adıdır.

Ayrı Modüller

Ayrı modüller oluşturmak için, her bileşen için ayrı bir dosya oluşturmanız gerekmektedir.

1. Örnek - Bileşen / Component

Bir bileşen oluşturmak için, aşağıdaki kod bloğunu kullanabilirsiniz.

```
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})

export class AppComponent {
title = 'My App';
}
```
2. Örnek - Servis / Service

Bir servis oluşturmak için, aşağıdaki kod bloğunu kullanabilirsiniz.

```
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})

export class UserService {

constructor() { }

getUsers(){
return [{name: 'User 1‘, age: 20