1 / 42

Angular Web Programlama

www.cihanozhan.com<br>www.deeplab.co<br>www.darkfactory.co

cihanozhan
Download Presentation

Angular Web Programlama

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Angular Web Programlama www.cihanozhan.com

  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 AJAXkodları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. Angular Versiyonlarını Anlamak • • • • • • • AngularJS Angular 2 Angular 4 Angular 5 Angular 6 Angular 7 Angular 8

  4. Angular Özellikleri • • Angular MVC tasarım deseni üzerine geliştirilmiştir Attribute eklemeleri ile HTML DOM’ugenişletip kod yazımını azaltır ve süreçleri kolaylaştırır. CRUDuygulamaları 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 codeiş mantığı(logic) ifade etmelerde daha etkilidir. Angular saf HTML sayfaları üretirken, controller’lariş 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. MobilveDesktop 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. 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. 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/templatesiletiş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-repeatkullanılır Olaylar için en çok kullanılan built-in directive’lerng-src, ng-href, ng-click’tir. One-way binding için ng-bindkullanı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’abağı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 *ngForgeliştirildi. Doğrudan HTML DOM eleman özelliklerini kullanır. ng-binddeğiştirildi ve yerine [property] geldi. Uygulama başlatmak için tek yönteme sahip: Manuel Bootstrapping Routing için @RouteConfig{{…}}kullanır. - - - - - - - - - - - - - - - - - -

  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’laruygulanmalı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-templateadında yeni bir direktif tanıtıldı. Animasyonlar için kullanılacak paketler tek bir pakette birleştirildi. @angular/platform- browser/animations - - - - - - - -

  9. ES5vs.ES6

  10. ES5vs.ES6

  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. MVC Tasarım Deseni

  13. Animasyon?

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

  15. TypeScript

  16. TypeScript • • • • • Çıktı olarak JavaScript üreten bir programlama dilidir.(JavaScript Transpiler) OOP : Nesne Yönelimli Programlama’yayö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. 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. 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. 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. TypeScript

  21. TypeScriptNasıl Çalışır?

  22. Angular Modülerdir

  23. Legogibi…

  24. Angular Ortam Gereksinimleri • Editörler – Visual Studio Code • 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/ https://code.visualstudio.com/ • •

  25. Angular Ortam Testleri veYardı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. 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) • •

More Related