Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Angular
Web Programlama
www.cihanozhan.com
Angular Nedir?
• Ücretsiz ve güçlü bir JavaScript kütüphanesidir.
• Genellikle Single Page Applications(SPA)’da kullanılı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...
Mobil ve Desktop için Angular
• Angular mobil ve masaüstü uygulamaları geliştirmek için kullanılabilir.
– Mobil için : Nat...
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...
Angular 1.X vs. Angular 2
- Setting Up: Sadece angular.js’yi eklemek yeterli.
- Mobil destek amacıyla geliştirilmedi.
- Çe...
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 gel...
ES5 vs. ES6
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 B...
MVC
Tasarım Deseni
Animasyon?
Backend
Service-Oriented, RESTful, Microservice vb.
TypeScript
TypeScript
• Çıktı olarak JavaScript üreten bir programlama dilidir.(JavaScript Transpiler)
• OOP : Nesne Yönelimli Progra...
Neden TypeScript?
• JavaScript’de olmayan derleme-zamanlı hataları denetleme yeteneği
vardır. JS yorumlar, TS ise derler.
...
Static Typing & Dynamic Typing
{
name: "Ferrari",
model: "Marenello",
// rAn: function()
run: function()
{
// Running...
}...
TypeScript Veri Tipleri
• Temel Veri Tipleri
• String & Templated String
• Arrays
• Tuples
• Enum
• Any & void
• Null & un...
TypeScript
TypeScript Nasıl Çalışır?
Angular Modülerdir
Lego gibi…
Angular
Ortam Gereksinimleri
• Editörler
– Visual Studio Code https://code.visualstudio.com/
• Plugin : Angular 8 Snippets...
Angular
Ortam Testleri ve Yardım Listesi
• Angular gereksinimlerinin başarıyla test edildiğini anlamak için:
• ps> node –v...
Angular
Proje Oluşturma Rehberi
• C: dizini içerisinde uygulamalar için bir klasör oluştur.
– C:ngApps
• PowerShell ya da ...
Angular Web Programlama
Angular Web Programlama
Angular Web Programlama
Angular Web Programlama
Angular Web Programlama
Angular Web Programlama
Angular Web Programlama
Angular Web Programlama
Angular Web Programlama
Angular Web Programlama
Angular Web Programlama
Angular Web Programlama
Angular Web Programlama
Angular Web Programlama
Angular Web Programlama
Angular Web Programlama
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0

Share

Angular Web Programlama

Download to read offline

www.cihanozhan.com
www.deeplab.co
www.darkfactory.co

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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)

www.cihanozhan.com www.deeplab.co www.darkfactory.co

Views

Total views

534

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

3

Shares

0

Comments

0

Likes

0

×