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.
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
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…
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
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)
Editor's Notes
Declarative vs Imperative Programming : https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2
Model: The model is responsible for managing application data. It responds to the request from view and to the instructions from controller to update itself.
View: A presentation of data in a particular format, triggered by the controller's decision to present the data.
Controller: The controller responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model.