Angular Çalışma Notlarımdan — 2 (ng generate yapıları)

Malik Masis
Nov 17, 2019 · 4 min read

S.A. Arkadaşlar,
Angular serimizin ikinci yazısı olan ng generate yapılarından olan module, component, service, directive, pipe gibi kavramlarını inceleyeceğiz. Serinin ilk yazısına buradan erişebilirsiniz. Yazıya başlamadan önce rastladığım güzel bir örneği anlatmak istiyorum. Uygulamanızı bir bina olarak düşünün. Bina içerisinde birden çok bölüm olabilir (module).Bölüm içersinde Angular’ın yapı taşı olan odalar(component) yer alır. Binalar içinde ve binalara arası daha rahat etmek için taşıyıcılar(service) yer alır. Bölümler arası hizmeti kullanışlı hale getirmek için de pipe’ler yer alır. Ayrıca site içinde havuz, spor salonu gibi ortak kullanım alanları vardır(shared module). Şimdi artık bu kavramları daha ayrıntılı olarak ele alalım.

SPA (Single Page Application): Routing işlemini sucunu(backend) tarafta değil de istemci(frontend) tarafında yapılmasını sağlar. Daha eski teknolojilerde statik sayfa yapısı mevcuttu, sonraki dönemlerde bunu dinamik sayfalar takip etti. Sonrasında ajax ile tüm sayfa yenilenmeden sadece belirlenen yerlerin güncellenmesi sağlandı, fakat bu da yetmedi ve böylece SPA kavramı ortaya çıktı. Burada bir tane index sayfası var. Bütün yapı bu tek sayfanın etrafında dönüyor. Yönlendirme işlemleri component yardımları ile yapılmaktadır. Tabi bunun bir çok avantajı olduğu gibi dezavantajları da bulunmaktadır. Fizikteki temel kuralda olduğu gibi, bir yerden kazanç varsa başka yerden kayıp vardır.

Module: Angular’daki temel yapılardan biri modüllerdir. Modüller birden fazla sayıda component, service, pipe ve directive’ler içerebilir. @NgModule decaratoru ile tanımlanır. ng g m module-ismi / ng generate module module-ismi olarak tanımayabilirsiniz. Bütün modüller sonuç olarak tek bir modülden kalıtılır. O modül de tersini belirtmediğiniz sürece AppModule’dir. C# veya Java’daki main metodu gibi düşünebilirsiniz.

Component: Angular’in temel yapısı component’e dayanır. Yukarıda belirlediğimiz index sayfası içinde bir çok sayıda component bulunur. Her componentin css, html ve type script dosyaları default olarak gelmektedir. Bunları daha da genişletebilirsiniz tabi ki. Componenti ng generate component dosya-ismi / ng g c dosya-ismi komutu ile çalıştırabilirsiniz. Oluşan dosyanın component olabilmesi için default olarak içerisinde @Component decarator’u (C#’ta attribute, Java’da annatation) gelir. (@Component). Bahsettiğimiz komutu çalıştırdığımızda aşağıdaki dosyalar oluşacaktır. Dosya ismilendirirken genel standart araya “-” koyulmasıdır. Bu zorunluluk değil, fakat genel isimlendirme bu şekildedir.

component-ismi.component.html — Template dosyası
component-ismi.component.spec.ts — Unit test için oluşan dosya
component-ismi.component.ts — Back-end kod geliştireceğimiz dosya
component-ismi.component.scss — Style dosyası

@Component({
selector: 'app-root', //html içinde kullanacağımız yapı
templateUrl: './app.component.html', //ilgili html tanımlanır
styleUrls: [ './app.component.css' ] //css tanımlanır. private css kavramı
})

Service: Servisler bize bileşenler arasında veri akışı sağlar. Aslında biz component oluşturduğumuzda gelen .ts içerisinde kodumuzu yazabiliriz, fakat burada her component için benzer kodları tekrardan yazmak zorunda kalırız. Bu şekilde kod tekrarı artar, en ufak bir geliştirmede tüm component’lerde geliştirmek zorunda kalacağız. Servisler bu konuya güzel bir çözümdür. Servisi tanımlıyoruz ve istediğimiz component içerisinde sadece bunu çağırabiliyoruz ve kodu daha merkezi haline getiriyoruz. @Injectable decaratoru ile sınıfın servis olduğunu belirtiriz. Bir sınıfı oluşturmak için ng g s servis-ismi / ng generate service servis-ismi komutunu kullanabiliriz.

Directive: Directive de aslında bir tür componen’tir. Bildiğimiz component’lerden bazı farkları vardır. Component bir HTML ile ilişkili iken directive’ler her HTML içinde kullanılabilir. Aslına bakarsak DOM yapısına etki eder. Örneğin; ngIf koşulu sağlıyorsa HTML gösterilirken, sağlanmadığı takdirde o HTML’i gizlemez, kaldırır. (Bu yapısı yönü ile eski yapılardan farklıdır) Bu şekilde DOM üzerinde değişiklik yapmış olur. ngFor component’i için de benzer şeyler geçerlidir. Angular’ın kendi standart directive’leri dışında bizler de directive oluşturup onları düzenleyebiliyoruz. ng g d directive-ismi / ng generate directive-ismi komutu ile oluşturabiliriz. Diğer yapılarda olduğu gibi burada da oluşturduğumuz component’in directive olduğunu belirlemek için @Directive decarator’u kullanmak zorundayız.

Pipe: Bir tür filtreleme ve dönüştürme işlemini kısaca yapmamızı sağlayan bir yapıdır. Boru veya tünel olarak düşünebiliriz. Giren veriyi bir takım değişiklikler sonrası çıktıyı verir. Ben bunu C#’tan extension metoduna benzetiyorum. Veriyi yönetme işini merkezileştirir. Angular’da bazı default pipe’ler olmasına rağmen tabi ki kendimiz de yenilerini oluşturabiliriz. | işareti ile gösterilir. Örneğin, tarih yapısını her yerde aynı şekilde kullanmak istiyorsak kendi özelleştirilmiş pipe yapımızı oluşturabilirsiniz. Artık bunu projenin her yerinde kullanabiliriz. ng g p pipe-ismi / ng generate pipe-ismi ile oluşturuyoruz. Ve tabi ki component’in pipe olduğunu bilmemiz için @Pipe decarator’u olmak zorundadır.

Guard: Angular’da authorization ve authentication işlemlerine olanak sağlar. Her kullanıcının doğal olarak her sayfasını girmesini istemeyiz. İşte bunu Angular’da sağlayan yapıdır. Bunu CanActive interface’ni implement’e ederek yapmaktadır. Eğer kullanıcının yetkisi varsa true döner aksi halde false döner ve kullanıcıyı tanımlanan sayfaya yönlendirir. Örneğin yetkiniz yok sayfası oluşturup buraya yönlendirebiliriz. ng g g guard-ismi / ng generate guard guard-ismi komutu ile oluşturabiliriz.

Enum-Interface-Class: Diğer konulara göre daha tanıdık olan bu yapıları da kısaca nasıl oluşturulacağını ele almak istedim. Burada class’a dikkat etmekte fayda var. “c” harfi component’e ayrıldığı için class için “cl” kullandığımıza dikkat edelim. Ayrıca export keyword’üne de dikkat etmekte fayda var. OOP dillerdeki public sözcüğüne denk geldiğini söyleyebiliriz. Bu sayede diğer bileşenlerden kendisine erişebiliriz, belirtilmediği takdirde private gibi davranacaktır ve sadece aynı dosya içinde kullanılabilecektir.
Application: Bazen birden fazla projeyi aynı yapı altında tutmak isteyebilirsiniz. Kurumsal mimarilerde yapıları daha rahat yönetebilmek için kullanılır. İşte burada yeni bir proje oluşturmamızı sağlar. ng g application proje-ismi komutu ile projemizi oluşturabiliriz.

Kaynaklar
[1] SPA — https://medium.com/@tugrulbayrak/single-page-application-spa-nedir-3960e43d9ef3
[2] Module — https://www.mobilhanem.com/angular-module-nedir-ve-module-olusturmak/
[3] Component — https://www.mobilhanem.com/angular-component/
[4] Service — https://www.gencayyildiz.com/blog/angular-4-ile-service-olusturma-ve-kullanma/
[5] Directive — https://www.mobilhanem.com/angular-directive-nedir-custom-directive-nasil-olusturulur/
[6] Pipe — https://www.armanozak.com/angular-6da-custom-pipe-nasil-yapilir/
[7] Diğerleri — https://angular.io/cli/generate

Originally published at https://malikmasis.blogspot.com.

Software Development Turkey

Yazılımcı, tasarımcı ve yetenekli insanların buluştuğu kocaman bir Discord ailesi!

Software Development Turkey

Yazılımcı, tasarımcı ve yetenekli insanların buluştuğu kocaman bir Discord ailesi!

Malik Masis

Written by

Muslim, father, developer malikmasis.blogspot.com.tr

Software Development Turkey

Yazılımcı, tasarımcı ve yetenekli insanların buluştuğu kocaman bir Discord ailesi!