Angular modul sınıfı , uygulama parçalarının nasıl birarada çalışacaklarını belirlememize yarar. Her Angular uygulaması en az bir tane module e sahip olmalıdır. Root module , uygulamayı başlatırken bootstrap edeceğiniz sınıftır. Angular dilinde buna AppModule denir.

Aşağıdaki örnek kod parçası , minimum gereksinimlerle oluşturulmuş bir AppModule sınıfını göstermektedir.

AppModule ismindeki sınıfın module olduğunu @NgModule decoratoru ile Angular framework e bildiriyoruz.

@NgModule decoratoru içerisindeki özellikler sayesinde uygulamanın nasıl derlenip çalıştırılacağını belirtmektedir.

• imports — BrowserModule platform-browser modulünden export edilmiştir ve bu module içerisinde de kullanılacaktır, her Angular uygulaması, çalışabilmek için bir tarayıcıya ihtiyac duyar.
• declarations — Bu module içerisinde kullanılacak component sınıflarını belirtir.
• bootstrap — Root componenttir , uygulamanın başlatılması ve index.html içerisindeki contentin belirlenmeye başladığı compoenent de denilebilir.

Angular Modules (NgModule) sayfasında moduller ile ilgili daha derin bir içeriğe ulaşabilirsini. İleride bu sayfanın da çevirisini ve yorumlamasını paylaşıyor olacağız.

Şu an bilmeniz gereken temel birkaç özellikten ibarettir. Şimdi aşağıdaki temel 3 özelliği açıklamaya çalışalım.

imports:

Angular modulleri sayesinde dağıtık özellikleri bir arada belirtiriz. Angular içerisindeki bir çok özellik kendi içerisinde Angular Module olarak tasarlanmışlardır. HTTP servisleri HttpModule içerisindedir . Router işlemleri RouterModule içerisindedir. İhtiyaç halinde siz de kendi modulunu yazabilirsiniz.

Özelliklerini kullanmak istediğiniz diğer modüllerin isimlerini imports özelliği içerisindeki array de tanımlamalısınız.

Sadece module sınıfları imports array içinde tanımlanmalıdır. Başka tip classları burada tanımlamayınız.

Angular sınıflarının içerisinde başka sınıfları kullanmak için yazmış olduğumu import cümleleri ile module import birbirinden tamamen farklı konulardır.

Javascript import cümleleri , diğer dosyalardaki sembolleri kullanmanızı sağlar.

imports array içerisinde tanımlı olan sınıfların hepsi @NgModule decoratoru ile işaretlenmiş olmalıdırlar.

declarations:

Bu array içerisinde uygulamada aktif olarak kullanılan Component sınıflarını tanımlamalıyız.

Eğer kullandığınız componenti burada tanımlarsanız , tarayıcı consolunda bunu çok net bir şekilde açıklayan bir hata mesajı görürsünüz.

Bu array içerisinde directive ve pipe sınıflarını da tanımlamak zorundasınız. Bu tip sınıflarla ilgil de ayrıca makaleler oluşturacağız.

Bu array içerisinde sadece components, directives and pipes sınıflarını tanımlayın.Service, module, model tipindeki sınıfları burada tanımlamamalısınız.

bootstrap:

Uygulamayı root AppModule sınıfını bootstrap( ön yükleme ) yaparak başlatırsınız.

Bu arada , bootstrap sürecinde bu listede tanımlanan tüm component sınıflarının içerikleri DOM ağacına eklenmiş olur.

Her ön yüklenen component kendi component ağacının en tepesi olarak düşünülebilir.

Bu listeye birden fazla component eklemek genellikle yapılmayan bir işlemdir. Çoğu angular yazılımcısı bu listeye sadece kök componenti ekler ve bırakır. Bu componente de genellikle AppComponent ismi verilir.

main.ts içerisinde bootstrap

Uygulamayı bootstrap etmenin bir çok yolu vardır. Bu sizin uygulamayı nasıl compile etmek istediğinizle alakalıdır.

Başlangıçta ,siz uygulamanızı dinamik olarak derleyeceksiniz , Just-in-Time ( JIT ) compiler ile uygulamanızı tarayıcıda çalıştıracaksınız. Diğer opsiyonlar için sonrasında detaylı açıklamalar yapacağız.

Önerilen yöntem, uygulamanızı src/main.ts dosyasında bu işlemi yapmanızdır.

Bora Demir

Co-Founder At Yelloware