Angular Web Programlama

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.

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

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

Mobil ve Desktop için Angular Angular mobil ve masaüstü uygulamaları geliştirmek için kullanılabilir. – Mobil için : NativeScript – Desktop için : Electron

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.

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 kullanır.

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. {{‘hello’ | titlecase}} -ng-template adında yeni bir direktif tanıtıldı. -Animasyonlar için kullanılacak paketler tek bir pakette browser/animations

ES5 vs. ES6

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…

MVC Tasarım Deseni

Animasyon?

Backend Service-Oriented, RESTful, Microservice vb.

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.

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.

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... }

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

TypeScript

TypeScript Nasıl Çalışır?

Angular Modülerdir

Lego gibi…

Angular Ortam Gereksinimleri Editörler – Visual Studio Code Plugin : Angular 8 Snippets Plugin : TypeScript Here – Visual Studio.NET (Plugins) : Angular Gereksinimleri – Node.js – Angular CLIhttps://github.com/angular/angular-clihttps://github.com/angular/angular-cli npm install npm install –g npm install –g – TypeScript npm install –g typescript(ya da tsc –version To Uninstall : npm uninstall & 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) –

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

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 CLI kurmak için) npm install –g (Angular CLI’ın belirli bir versiyonunu kurmak için) npm install –g (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)