Angular Framework'ü daha önce onun hakkında hiç bilgisi olmayanlara anlatmaya yönelik bir sunumdur

1. 1

2. 1. Angular Nedir?
1. Kullanım Durumu
2. Versiyon Geçmişi
3. Geliştirme Ortamının Hazırlanması
(Kurulum)
2. Temel Kavramlar
1. Component (Bileşen)
2. View (Şablonlar)
3. Module
3. Modüller ve Bileşenler
1. Modül oluşturma
2. Component oluşturma
4. Veriler ve Olaylar (data & events)
1. Data binding
2. Event binding
5. Direktifler
1. Yerleşik Direktifler (ngIf, ngFor, vs.)
2. Özel Direktifler
6. Pipe’ler
7. Bileşenler arası iletişim
1. @Input
2. @Output
8. Servisler
1. Servis Oluşturma
2. Servis Kullanımı
(injection)
3. Servis Kapsamı (scope)
9. HTTP İşlemleri
1. HTTP Client nedir?
2. Request gönderme
3. Response alma
10. Lifecycle Hooks

4. 1. Angular, açık kaynaklı bir MVC framework’üdür. Library değildir!
2. Javascript (JS) tabanlıdır. Fakat yazımı kolaylaştırmak için Typescript (TS) kullanır.
3. SPA (Single Page Aplication) uygulamalar geliştirmenizi sağlar.
4. Veriler üzerinde çalışmayı ve onları yönetmeyi daha da kolaylaştırır:
• Property-Binding & Event-Binding
5. Modüler bir yapısı vardır. Uygulamayı bileşenlere ayırmamızı sağlar.
• Modüller, yazdığımız kodları birbirinden bağımsız ve izole olacak şekilde
daha küçük alt parçalara ayırdığımız yapılardır
6. Gelişmiş Routing desteği vardır. Uygulama içinde gezinmeyi hızlandırır ve kolaylaştırır.
7. İleri seviyede Dependency Injection mekanizmasına sahiptir, bağımlılıkları kendisi yönetir.
8. Test yazma ve doğrulama yapma imkanı sağlar (jest, karma, …). Hata yönetimini kolaylaştırır.
Input Output
Bileşen

6. Angular 2+
https://update.angular.io
biz Angular
v15 üzerine
konuşacağı
z

7. Her şeyden önce NODE.JS kurulu olmalıdır -> https://nodejs.org
• NPM (Node Package Manager)
• Kurulum sonrası windows’ta restart gerektirebilir!
npm install -g @angular/cli@v15-lts
ng version
Bundan sonra IDE’mizde “YapilacaklarListem” klasörünü proje olarak açıp kod yazmaya başlayabiliriz
ng new YapilacaklarListem
cd YapilacaklarListem
ng serve
http://localhost:4200

9. 2.1 Component (Bileşen)
Nedir?
• Bileşen; birbirinden bağımsız, yeniden kullanılabilir ve özelleştirilebilir küçük parçalardır.
• Her bir parçayı, birbirinden izole bir şekilde düşünerek kodlamaya başlamalıyız.
• Bileşenler birbirleriyle etkileşime girebilirler.
Angular’da her şey Component (Bileşen) olabilir. Bileşen bir button da olabilir, bir liste de, bir tablo dökümü de. Kısacası, anlam yükleyeceğiniz her şey bir bileşen olarak ele alınabilir.

10. Component

12. 2.2 Component (Bileşen) Yapısı
• Uygulamanın yapı taşlarıdır
• Uygulamadan neredeyse tüm işlemler Component’ler üzerinden
yürür.
• MVC yapısında “Controller” görevi üstlenir diyebiliriz.
• selector özelliği, bir Component’in Html şablonu içerisinde
doğrudan kullanılabilmesini sağlar.
• Html içerisinde <app-root> şeklinde etiket (tag) gibi çağrılırlar.
• Html içerisinde birden fazla ve içiçe kullanılabilirler. (app-root hariç!!!)
• her bileşen, ait olduğu bir Modül içerisinde declare edilmelidir
• App-Root bileşeni de ana modül olan AppModule içerisindedir.
• Modüller, bileşenleri veya başka modülleri ihtiva eden yapılardır.

13. 1. todo-root
2. todo-form
3. todo-item
4. todo-info
todo Modülü
Component(1)
(2)
(3)
(4)
app-
root
todo-
root
todo-
form
todo-
item
todo-
info

15.  “Todo” Uygulamasını Birlikte Oluşturalım.
 Modülü ve Bileşenleri Ekleyelim
 Biçimlendirme için «Bootstrap» kütüphanesi kullanalım
• todo-root
• todo-form
• todo-item
• todo-info
todo Modülü

17. Veri Bağlama (Tek
Yönlü)
• Verilerimizi Component sınıfı içerisinde bir “property” olarak tanımlarız.
• Tanımlanan veriyi Html şablonunda ekrana yazdırmak için {{ veri }} formatını kullanırız.
• Tanımlanan verileri, doğrudan bir HTML etikenin Attribute’üne de bağlayabiliriz:
<a [href]=veri> linke tıklayınız </a>
• Kullanıcı etkileşimi sonrasında tetiklenmiş olan bir olayı (click, mousehover, keypress,
vs..) ,
bir Component içerisindeki metod ile birbirine bağlar
• <etiket (event)="method()">
Olay (Event) Bağlama
Veri Bağlama
Tek Yönlü İki Yönlü

18. Veri Bağlama (İki
Yönlü)
Angular’da veri bağlama 2’ye ayrılır:
Veri Bağlama
Tek Yönlü (one-way) İki Yönlü (two-way)
Component Template
Component Template
Two-Way Data Binding nedir?
Bir form öğesi (örneğin input) ve bir Component değişkeni arasında çift yönlü veri akışını sağlar.
Böylece form öğesinin değeri değiştiğinde Component değişkeni güncellenir. Tersi durum da geçerlidir.
<input [(ngModel)]=“veri"> [] ile () birleşimine dikkat!
Bu örnekte “veri" değişkeni, Input elementinin değeri ile senkronize hale gelmiştir.
Not: ngModel kullanabilmeniz için FormsModule import edilmelidir!

20. Mevcuttaki HTML elementleri üzerinde değişiklikler (manipülasyon) yapmamızı sağlayan yapılardır. Bu
değişiklikler:
 Bir bölümü gizleme veya tekrar gösterme
 Bir bölümü, sayfada birden fazla kez tekrarlama (döngü)
 Bir bölüm üzerinde farklı biçimlendirmeler yapma (rengini değiştirme, boyunu büyütme vs.)
Angular’da 3 çeşit direktif vardır:
1. Attribute direktifleri
2. Yapısal (built-in) direktifler
3. Özel (custom) direktifler

22. • Şablon (view) içerisinde kullanılan yardımcı metotlardır.
• Direktifler şablondaki Html elementlerinde değişim yaparken, Pipe’lar da şablondaki veriler üzerinde değişim yaparlar.
• Pipe metotları, boru ( | ) sembolü yardımıyla bir veriye bağlanırlar.
• Veriyi belirli bir formata dönüştürmek veya işlemek amacıyla kullanılırlar.
{{ veri | buyukHarflereDonustur }}
• Pipe’lar zincirleme şeklinde kullanılabilirler, birbirlerine bağlanabilirler:
{{ tarih |
date:”dd.mm.yyyy” }}
• Angular tarafından hazır kullanıma sunulmuş Pipe’lar olduğu gibi
kendinize ait Pipe’lar da oluşturabilirsiniz
{{ veri | tersCevir | buyukHarflereDonustur
}}

24. Verilerin ve Olayların, bileşenler arasında paylaşılabilmesi anlamına gelir.
Bileşenler arası iletişim kurmaya neden ihtiyacımız var?
1. Örneğin, kullanıcının bir bileşende girdiği verilerin başka bir bileşende kullanılması gerekebilir.
2. Bir form bileşenindeki Kaydet butonuna tıklanmasıyla forma girilen bilgiler veritabanına kaydedilmek
istenebilir.
3. Bazı bileşenler, diğer bileşenlerin varlığına bağımlı olabilir. Örneğin bir liste bileşeni, seçilen bir liste
öğesin ayrıntılarını gösteren ayrı bir bileşenin varlığına ihtiyaç duyabilir. (ebys-imzalanmis-evraklar) -
(ebys-evrak-detay)
4. Her bir bileşen, tek bir sorumluluğa sahip olmalıdır (SOLID). Fakat bazı durumlarda bir bileşenin tek
başına sorumluluklarını yerine getirmesi mümkün olmayabilir. Bu durumda diğer bileşenlerle iletişim
kurması gerekebilir
5. Bileşenler arası iletişim, kod tekrarının azaltılmasına yardımcı olur. Örneğin aynı işlevselliği birden fazla
bileşende tekrar tekrar kullanmak yerine, tek bileşende tanımlayıp diğer bileşenlerle paylaşım yapılabilir.
app-
root
todo-
root
todo-
form
todo-
item
todo-
info
Angular’da bir bileşendeki verileri @Input ile, olayları ise @Output ile başka bileşenlerle
paylaşırız.
Input Output
Bileşen

25. todo-form, todo-item ile veri paylaşmalı
todo-item da, todo-info ile veri paylaşmalı
Hadi birlikte kodlamasını yapalım!

27. • Servisler; verileri getirme, bu verileri işleme, dış servislere Http istekleri gönderme vs. gibi işlemleri yaptımız
sınıflardır
• Servisler, component (bileşen) içerisinde kod kalabalığı oluşmasının önüne geçerler.
• Servisler, farklı bileşenler arasında verileri veya metotları paylaşmada bize kolaylık sağlarlar. Bu yönleriyle
kod tekrarını azaltırlar, uygulamanın düzenini iyileştirirler ve bakımını kolaylaştırırlar.
• Component (C), Servis (M) ve Şablon (V) arasında köprü işlevi görmelidir (M-V-C).
todo.service.ts
Scope (kapsama alanı)
Servis Oluşturma Kullanım (injection)

29. • HTTP işlemleri için HttpClientModule isimli modül kullanılır.
• Bu modül, HTTP istekleri göndermek ve yanıtları işlemek için HttpClient isimli bir servis içerir.
• Http işlemleri yapmak istediğimiz yerde bu servisi injecte ederek kullanmaya başlayabiliriz.
• HttpClient servisinin sunmuş olduğu metotlar --------> GET, POST, PUT, DELETE
NullInjectorError: No provider for HttpClient!

31. • Bileşenlerin bir “hayat döngüsü” vardır. Doğmak, yaşamak ve ölmek gibi…
• Bileşenler, yaratılmalarından yok edilmelerine kadar çeşitli aşamalardan geçer.
• Bu aşamaların her birisinde, farklı amaçlarla farklı kodlar çalıştırmak isteyebiliriz.
Hook Metot Kullanım örneği/amacı
constructor Servisleri enjekte ederiz
ngOnChanges @Input ile işaretlenmiş verilerdeki değişimleri
gözlemleriz
ngOnInit Dış servislere API istekleri atıp, dataları çekeriz.
ngAfterViewInit Bileşene ait şablon (View) tamamen yüklendiğinde
çağrılır. Görünümle ilgili işlemler gerçekleştirmek
için kullanılır.
ngOnDestroy Bileşen kullanımdan kaldırıldığında, yok
edildiğinde çalışan metotdur. Bileşenin elinde
tuttuğu kaynakları serbest bırakması için kullanılır.
Constructor haricindeki diğer tüm Hook metotlar,
kendi Interface’leri Bileşen sınıfına implemente edildikten sonra kullanılabilirler!