1. Angular
Web Programlama
www.cihanozhan.com

8. Angular Nedir?
• Ücretsiz ve güçlü bir JavaScript kütüphanesidir.
• Genellikle Single Page Applications(SPA)’da kullanılır.
• HTML içinde istemci uygulamaları geliştirmeyi sağlar.
• Angular back-end’de API sömüren bir Front-End kütüphanedir.
• İstemci için JavaScript üreten TypeScript dilini kullanır.
– Alternatifler : JavaScript, Dart, TypeScript
• Angular Versiyonlarını Anlamak(Geçici Olarak Bir Sonraki Slayta Gidelim)
• Dinamik web uygulamaları geliştirmek için kullanılan bir yapıdır.
• Web şablonu olarak HTML kullanmaya ve onu genişletmeye izin verir.
• Veri Bağlama ve Dependency Injection kullanmaya izin verir.
• İyi tanımlanmış bir yapı ile tüm DOM ve AJAX kodlarını yönetir.
• History
– AJAX -> jQuery / Prototype -> MVC Frameworks(Knockout/Backbone)
– -> AngularJS1.X -> Angular2 -> Angular4
• Google’da Angular 2 geliştirmesi için çalışan özel bir ekip vardır.

9. Angular Versiyonlarını Anlamak
• AngularJS
• Angular 2
• Angular 4
• Angular 5
• Angular 6
• Angular 7
• Angular 8

11. Angular Özellikleri
• Angular MVC tasarım deseni üzerine geliştirilmiştir
• Attribute eklemeleri ile HTML DOM’u genişletip kod yazımını azaltır ve
süreçleri kolaylaştırır.
• CRUD uygulamaları için gerekli herşeyi içerir
– Data-Binding, Basic Templating, Directives, Form Validation, Routing, Deep-Linking,
Reusable Components, Dependency Injection vb..
• Angular declarative code çerçevesiyle geliştirildi. Bu UI geliştirmeleri ve
komponent tabanlı uygulama geliştirmelerinde iyiyken, imperative code iş
mantığı(logic) ifade etmelerde daha etkilidir.
• Angular saf HTML sayfaları üretirken, controller’lar iş süreçlerini işleyerek
JavaScript ile üretilir
• Angular popüler tüm tarayıcılar ve Android/iOS dahil tüm tablet ve
telefonları destekler ve bunlarda kullanılır

12. Mobil ve Desktop için Angular
• Angular mobil ve masaüstü uygulamaları geliştirmek için kullanılabilir.
– Mobil için : NativeScript https://www.nativescript.org/
– Desktop için : Electron https://electronjs.org/

13. Angular 1.X vs. Angular 2
• Kod yazmak ve okumak daha kolaydır.
• Yüksek performanslıdır.
• Modüler yapısı Angular 1.X’e göre daha gelişmiştir.
• DI daha gelişmiş düzeyde kullanılır.
• Native Mobile uygulamalar için daha gelişmiş destek sunar.
• Test geliştirme süreçleri daha gelişmiştir.
• Angular 2 göreceli olarak 1.X’e göre daha karmaşıktır ama implementation
kolaydır.
• Angular 2 TypeScript kullanılarak geliştirildi ve bu dil Angular 2 için en
ideal programlama çözümüdür.
• Angular 2 komponent tabanlı bir bakış açısı sağlar.

14. Angular 1.X vs. Angular 2
- Setting Up: Sadece angular.js’yi eklemek yeterli.
- Mobil destek amacıyla geliştirilmedi.
- Çekirdek konsept $scope idi. $scope olmadan
view ile controller haberleşemez.
- views/templates iletişimi için controller gerekli.
- Performans Angular 2’ye göre düşüktür
- Angular 1.X ES5, ES6 ve Dart’a sahiptir
- Nesnelerin iterasyonu için ng-repeat kullanılır
- Olaylar için en çok kullanılan built-in
directive’ler ng-src, ng-href, ng-click’tir.
- One-way binding için ng-bind kullanılır
- Uygulama başlatmak için iki yönteme sahip:
Auto. Bootstrapping(ng-app) ve Manuel B.
- Routing için $routeProvider.when() kullanır.
- Setting Up: Karmaşık. Zaman alır çünkü Gulp ya
da Grunt’a bağımlı.
- Mobil odaklı geliştirildi. Mobile-oriented.
- DOM değişikliklerini tespit etmek için Zone.js
kullanır.
- Komponentler ile geliştirildi. (Template
Directives + Controllers = Components)
- Tek yönlü ağaç tabanlı değişiklik tanımlama
modeli performansı artırır. ng-conf’a göre
Angular 2, 1.X’den 5 kez daha hızlıdır.
- Daha çok dil desteği var. ES5, ES6, TypeScript
ve Dart dillerini kullanabilir.
- Yapısal direktif söz dizimi tamamen değişti.
Örn: ng-repeat yerine *ngFor geliştirildi.
- Doğrudan HTML DOM eleman özelliklerini
kullanır.
- ng-bind değiştirildi ve yerine [property] geldi.
- Uygulama başlatmak için tek yönteme sahip:
Manuel Bootstrapping
- Routing için @RouteConfig{{…}} kullanır.

15. Angular 2 vs. Angular 4
- Angular 2 Angular 4’den dosya boyutu olarak
daha büyüktür.
- *ngIf if/else söz dizimine göre geliştirilmedi.
- Temel text işlemleri için logic geliştirilmeli.
- Template oluşturmak için template özellikleri
kullanılmalıdır.
- Animasyonlar için birçok paket import edilmeli
ve transaction’lar uygulanmalıdır.
- Angular 4 önceki versiyona göre daha hafif
dosyaya sahip ve hızlıdır.
- *ngIf if/else söz dizimine sahip. Örn: AJAX
çağrısı yaparken sayfada loading gösterilebilir.
- Angular 4 ile ‘titlecase’ tanıtıldı. Metnin ilk
harflerini büyütür. <h1>{{‘hello’ |
titlecase}}</h1>
- ng-template adında yeni bir direktif tanıtıldı.
- Animasyonlar için kullanılacak paketler tek bir
pakette birleştirildi. @angular/platform-
browser/animations

16. ES5 vs. ES6

17. ES5 vs. ES6

18. Neden Angular?
• Temiz ve Anlamlı HTML
• Güçlü Veri Bağlama
• Mimari Tasarımından Gelen Güçlü Modüler Tasarım
• Built-in Back-End Entegrasyon Kabiliyeti
• TypeScript, TypeScript, TypeScript …
• MVC Tasarım Desenine Göre Tasarlandı
• Animasyon…

19. MVC
Tasarım Deseni

20. Animasyon?

22. Backend
Service-Oriented, RESTful, Microservice vb.

24. TypeScript

25. TypeScript
• Çıktı olarak JavaScript üreten bir programlama dilidir.(JavaScript Transpiler)
• OOP : Nesne Yönelimli Programlama’ya yönelik geliştirilmiştir.
• Derleme zamanı hatalarını yönetir.
• Tüm JavaScript kütüphaneleri TypeScript içerisinde de kullanılabilir.
• Platform-bağımsız bir dildir ve farklı cihaz, tarayıcı ve işletim sistemlerinde
çalışır.

26. Neden TypeScript?
• JavaScript’de olmayan derleme-zamanlı hataları denetleme yeteneği
vardır. JS yorumlar, TS ise derler.
• JS dinamik veri tiplemesine sahiptir. Verilerin tipi dinamik olarak yürütme
aşamasında belirlenir. TS ise statik bir dildir.
• TypeScript OOP bir dildir. Sınıflar, arayüzler, modüller ve miras gibi
yetenekleri vardır. JS ise betik dilidir.
• Kolay okunabilir ve düzenlenebilir bir dildir.

27. Static Typing & Dynamic Typing
{
name: "Ferrari",
model: "Marenello",
// rAn: function()
run: function()
{
// Running...
}
}
class Car
{
public string name;
public string model;
public void run() {
// Running...
}
}

28. TypeScript Veri Tipleri
• Temel Veri Tipleri
• String & Templated String
• Arrays
• Tuples
• Enum
• Any & void
• Null & undefined
• Type Inference
• Type Casting
• Let & var
• Sabit Tanımlamak : const

29. TypeScript

30. TypeScript Nasıl Çalışır?

31. Angular Modülerdir

32. Lego gibi…

38. Angular
Ortam Gereksinimleri
• Editörler
– Visual Studio Code https://code.visualstudio.com/
• Plugin : Angular 8 Snippets
• Plugin : TypeScript Here
– Visual Studio .NET (Plugins) : http://www.typescriptlang.org/index.html#download-links
• Angular Gereksinimleri
– Node.js https://nodejs.org
– Angular CLI https://github.com/angular/angular-cli
• npm install –g @angular/cli
• npm install –g @angular/cli@7.3.9
• npm install –g @angular/cli@latest
– TypeScript https://www.typescriptlang.org/
• npm install –g typescript (ya da typescript@2.4.2)
• tsc –version
• To Uninstall : npm uninstall –g @angular/cli & npm uninstall –g angular-cli & npm cache clean
– Nodemon (Zaruri Değil) : JS dosyalarını izler ve kodlarda değişiklik varsa tekrar çalıştırır.
• npm install –g nodemon
• POSTMAN (API Test)
– https://www.getpostman.com/

39. Angular
Ortam Testleri ve Yardım Listesi
• Angular gereksinimlerinin başarıyla test edildiğini anlamak için:
• ps> node –version (ya da -v)
• ps> npm –version (ya da -v)
• ps> ng --version (ya da -v)
• ps> tsc --version (ya da -v)
• Angular hakkında yardım listesine ulaşmak için:
– ng help

40. Angular
Proje Oluşturma Rehberi
• C: dizini içerisinde uygulamalar için bir klasör oluştur.
– C:ngApps
• PowerShell ya da komut satırı aracını aç ve aşağıdaki komutları çalıştır.
– npm install –g @angular/cli (Angular CLI kurmak için)
• npm install –g @angular/cli@7.3.9 (Angular CLI’ın belirli bir versiyonunu kurmak için)
• npm install –g @angular/cli@latest (Angular CLI’ın son versiyonunu kurmak için)
– npm install –g typescript
• tsc --version
– ps> cd C:ngApps
– ng new first-angular-app
• Routing? N
• CSS
– cd first-angular-app
– code . (Projeyi VSCode’da açmak için)
• Angular projesini çalıştırmak ve yayına vermek
– IDE> Terminal> ng serve (Projeyi yayına sunmak için)
• ng serve –open (Projeyi direkt olarak tarayıcıda açar)
• ng serve –port 8081 (Projeyi belirtilen port üzerinden tarayıcıda açar)