Successfully reported this slideshow.
Your SlideShare is downloading. ×

Angular Web Programlama

Ad

Angular
Web Programlama
www.cihanozhan.com

Ad

Angular Nedir?
• Ücretsiz ve güçlü bir JavaScript kütüphanesidir.
• Genellikle Single Page Applications(SPA)’da kullanılır...

Ad

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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
React.js Web Programlama
React.js Web Programlama
Loading in …3
×

Check these out next

1 of 42 Ad
1 of 42 Ad
Advertisement

More Related Content

Advertisement

Angular Web Programlama

  1. 1. Angular Web Programlama www.cihanozhan.com
  2. 2. 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.
  3. 3. Angular Versiyonlarını Anlamak • AngularJS • Angular 2 • Angular 4 • Angular 5 • Angular 6 • Angular 7 • Angular 8
  4. 4. 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
  5. 5. 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/
  6. 6. 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.
  7. 7. 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.
  8. 8. 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
  9. 9. ES5 vs. ES6
  10. 10. ES5 vs. ES6
  11. 11. 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…
  12. 12. MVC Tasarım Deseni
  13. 13. Animasyon?
  14. 14. Backend Service-Oriented, RESTful, Microservice vb.
  15. 15. TypeScript
  16. 16. 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.
  17. 17. 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.
  18. 18. 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... } }
  19. 19. 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
  20. 20. TypeScript
  21. 21. TypeScript Nasıl Çalışır?
  22. 22. Angular Modülerdir
  23. 23. Lego gibi…
  24. 24. 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/
  25. 25. 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
  26. 26. 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.
  • https://www.typescriptlang.org/play/

    https://howtodoinjava.com/typescript/transpiler-vs-compiler/
    https://david-barreto.com/introduction-to-the-typescript-transpiler/
  • Install Lite Server (Auto Refresh)
    cmd> npm install -g lite-server
    live-server (alternative)

×