Angular – Başlangıç Eğitimi (2023 Edition)

Neden Bir Framework’e İhtiyacınız Var?

Genel olarak framework’ler, geliştiricilerin kodu sıfırdan yeniden oluşturmak zorunda kalmaması için tutarlı bir yapı sağlayarak web geliştirme verimliliğini ve performansını artırır. Çerçeveler, geliştiricilere ekstra çaba gerektirmeden yazılıma eklenebilecek bir dizi ekstra özellik sunan zaman kazandıran araçlardır.

Neden Angular?

JavaScript, en sık kullanılan istemci tarafı betik dilidir. Web sayfalarıyla birçok benzersiz şekilde etkileşime olanak sağlamak için HTML belgelerine yazılmıştır. Kapsamlı desteğe sahip nispeten öğrenmesi kolay bir dil olarak, modern uygulamalar geliştirmek için çok uygundur.

Ancak JavaScript, modülerlik, test edilebilirlik ve geliştirici üretkenliği gerektiren tek sayfalık uygulamalar geliştirmek için ideal midir? 

Bugünlerde, alternatif çözümler sağlamak için tasarlanmış çeşitli çerçevelere ve kütüphanelere sahibiz. Frontend web geliştirme ile ilgili olarak Angular, geliştiricilerin JavaScript’i kendi başına kullanırken karşılaştıkları sorunların hepsini değilse de çoğunu ele alır.

Angular Sürümleri

Kaynak: c-metric

Angular 2009’da geliştirildi ve birçok yineleme yapıldı.

İlk olarak, Angular 1 olarak adlandırılan ve sonunda AngularJS olarak bilinen orijinal Angular vardı. Ardından Angulars 2, 3, 4, 5 geldi ve 11/11/2020’de yayınlanan mevcut sürüm Angular 11’e geldi. Sonraki her Angular sürümü, hataları düzelterek, sorunları ele alarak ve mevcut platformların artan karmaşıklığına uyum sağlayarak selefini geliştirdi.

Bu noktada mobil cihaz veya daha karmaşık uygulamalar için daha uygun uygulamalar tasarlamak istiyorsanız, en iyisi mevcut sürüme yükseltme yapmanız gerekmektedir.

Angular Özellikleri

Kaynak: educba

1. Belge Nesne Modeli

DOM (Belge Nesne Modeli), bir XML veya HTML belgesini, her düğümün belgenin bir bölümünü temsil ettiği bir ağaç yapısı olarak ele alır.

Açısal, normal DOM kullanır. Aynı HTML sayfasında on güncelleme yapıldığını düşünün. Halihazırda güncellenmiş olanları güncellemek yerine, Angular, HTML etiketlerinin tüm ağaç yapısını güncelleyecektir.

2. Yazı Tipi

TypeScript, JavaScript’e, kullanıcıların anlaşılması daha kolay JavaScript kodu yazmalarına yardımcı olan bir dizi tür tanımlar. Tüm TypeScript kodu, JavaScript ile derlenir ve herhangi bir platformda sorunsuz bir şekilde çalışabilir. TypeScript, Angular uygulaması geliştirmek için zorunlu değildir. Bununla birlikte, kod tabanının anlaşılmasını ve sürdürülmesini kolaylaştırırken daha iyi sözdizimsel yapı sunduğu için şiddetle tavsiye edilir.

3. Bağlanma Verileri

Veri bağlama, kullanıcıların web sayfası öğelerini bir web tarayıcısı aracılığıyla manipüle etmelerini sağlayan bir süreçtir. Dinamik HTML kullanır ve karmaşık komut dosyası veya programlama gerektirmez. Veri bağlama, hesap makineleri, öğreticiler, forumlar ve oyunlar gibi etkileşimli bileşenler içeren web sayfalarında kullanılır. Ayrıca, sayfalar büyük miktarda veri içerdiğinde bir web sayfasının daha iyi artımlı olarak görüntülenmesini sağlar.

Açısal, iki yönlü bağlamayı kullanır. Model durumu, karşılık gelen kullanıcı arabirimi öğelerinde yapılan değişiklikleri yansıtır. Tersine, UI durumu, model durumundaki değişiklikleri yansıtır. Bu özellik, çerçevenin DOM’u denetleyici aracılığıyla model verilerine bağlamasını sağlar.

4. Test Yapmak

Angular, Jasmine test çerçevesini kullanır. Jasmine çerçevesi, farklı türde test senaryoları yazmak için birden fazla işlevsellik sağlar. Karma, başlatmayı, raporlayıcıları ve test çerçevesini ayarlamak için bir yapılandırma dosyası kullanan testler için görev çalıştırıcıdır.

Angular Mimarisi

Kaynak: angular

Angular, tam teşekküllü bir model-view-controller (MVC) çerçevesidir. Uygulamanın nasıl yapılandırılması gerektiği konusunda net rehberlik sağlar ve gerçek DOM sağlarken çift yönlü veri akışı sunar.

Angular uygulamasının 6 yapı taşı aşağıdakileri içerir:

1. Modüller

Bir Angular uygulamasının, uygulamayı başlatmak için önyükleme mekanizması sağlayan AppModule adlı bir kök modülü vardır.

2. Bileşenler

Uygulamadaki her bileşen, uygulama mantığını ve verilerini tutan bir sınıfı tanımlar. Bir bileşen genellikle kullanıcı arayüzünün (UI) bir bölümünü tanımlar.

3. Şablonlar

Angular şablonu, HTML öğelerini gösterilmeden önce değiştirmek için Angular işaretlemesini HTML ile birleştirir. İki tür veri bağlama vardır:

Olay bağlama: Uygulamanızın, uygulama verilerinizi güncelleyerek hedef ortamdaki kullanıcı girişine yanıt vermesini sağlar.

Özellik bağlama: Kullanıcıların, uygulama verilerinizden hesaplanan değerleri HTML’ye enterpolasyon yapmasına olanak tanır.

4. Meta Veriler

Meta veriler, Angular’a bir sınıfın nasıl işleneceğini söyler. Bir sınıfın beklenen davranışını yapılandırabilmesi için sınıfı dekore etmek için kullanılır.

5. Hizmetler

Görünümle ilişkili olmayan ancak bileşenler arasında paylaşılması gereken verileriniz veya mantığınız olduğunda, bir hizmet sınıfı oluşturulur. Sınıf her zaman @Injectible dekoratör ile ilişkilendirilir.

6. Bağımlılık Enjeksiyonu

Bu özellik, bileşen sınıflarınızı net ve verimli tutmanıza olanak tanır. Bir sunucudan veri getirmez, kullanıcı girişini doğrulamaz veya doğrudan konsolda oturum açmaz. Bunun yerine, bu tür görevleri hizmetlere devreder.

Angular Uygulama Örnekleri

Angular ile yapılabilecek uygulama örnekleri aşağıdaki şekildedir:

To-do List Uygulamaları

Hava Durumu Uygulamaları

E-ticaret Uygulamaları

Sohbet (Chat) Uygulamaları

Takvim Uygulamaları

CRM Uygulamaları

AngularJS Yönergeleri

AngularJS yönergeleri, HTML’ye yeni sözdizimi sağlayarak genişletir. Yönergeleri “ng-” ön ekine sahip oldukları için kolayca tespit edebilirsiniz. AngularJS’ye öğeye belirli bir davranış eklemesi, hatta onu tamamen değiştirmesi talimatını veren, DOM öğesindeki işaretçileri düşünün.

Aşağıda iki örnek direktif bulabilirsiniz:

ng-model Direktifi

ng modeli, HTML kontrolünün değerini belirtilen AngularJS ifade değeriyle bağlar.

ng-bind Direktifi

Bu yönerge, HTML kontrol değerini belirli bir AngularJS ifade değeriyle değiştirir.

Angular’ın Avantajları Nelerdir?

Aşağıda Angular’ın en önemli avantajlarını bulabilirsiniz:

1. Özel Bileşenler

Angular, kullanıcıların işlevselliği yeniden kullanılabilir parçalara dönüştürme mantığıyla birlikte paketleyebilen kendi bileşenlerini oluşturmasına olanak tanır. Ayrıca web bileşenleriyle de iyi çalışır.

2. Veri Bağlama

Angular, kullanıcıların verileri JavaScript kodundan görünüme zahmetsizce taşımasına ve manuel olarak herhangi bir kod yazmak zorunda kalmadan kullanıcı olaylarına tepki vermesine olanak tanır.

3. Bağımlılık Enjeksiyonu

Angular, kullanıcıların modüler hizmetler yazmasını ve ihtiyaç duydukları her yere enjekte etmelerini sağlar. Bu, aynı hizmetlerin test edilebilirliğini ve yeniden kullanılabilirliğini geliştirir.

4. Test

Testler birinci sınıf araçlardır ve Angular, sıfırdan test edilebilirlik göz önünde bulundurularak oluşturulmuştur. Uygulamanızın her bölümünü test etme olanağına sahip olacaksınız ki bu şiddetle tavsiye edilir.

5. Kapsam

Angular, tam teşekküllü bir çerçevedir ve sunucu iletişimi, uygulamanız içinde yönlendirme ve daha fazlası için kullanıma hazır çözümler sunar.

6. Tarayıcı Uyumluluğu

Angular, platformlar arasıdır ve birden çok tarayıcıyla uyumludur. Bir Angular uygulama temel olarak tüm tarayıcılarda (Örn: Chrome, Firefox) ve Windows, macOS ve Linux gibi işletim sistemlerinde çalışabilir.

Angular’ın Sınırlamaları

Aşağıda Angular’ın en önemli sınırlamlarını bulabilirsiniz:

1. Derin Öğrenme Eğrisi

Angular’ın tüm kullanıcıların bilmesi gereken temel bileşenleri, yönergeleri, modülleri, dekoratörleri, bileşenleri, hizmetleri, bağımlılık enjeksiyonunu ve şablonları içerir. Daha gelişmiş konular arasında değişiklik algılama, bölgeler, AoT derlemesi ve Rx.js yer alır. Angular 4 tam bir çerçeve olduğu için yeni başlayanlar için öğrenmesi zor olabilir.

2. Sınırlı SEO Seçenekleri

Angular, sınırlı SEO seçenekleri ve arama motoru tarayıcılarına zayıf erişilebilirlik sunar.

3. Migrasyon

Şirketlerin Angular’ı sıklıkla kullanmamalarının nedenlerinden biri, eski js/jquery tabanlı kodu açısal stil mimarisine taşımanın zorluğudur. Ayrıca, her yeni sürümün yükseltilmesi zahmetli olabilir ve birçoğu geriye dönük uyumlu değildir.

4. Ayrıntı ve Karmaşıklık

Angular topluluğundaki yaygın bir sorun, çerçevenin ayrıntılarıdır. Ayrıca diğer front-end araçlara kıyasla oldukça karmaşıktır.

AngularJS Nasıl Öğrenilir?

Angular, web geliştirme için yaygın olarak kullanılır ve Angular’ı öğrenmek için yerine getirmeniz gereken belirli gereksinimler vardır. Tüm ön koşulları kontrol ederek doğru yönde ilerlediğinizden ve popüler web çerçevesini mümkün olan en iyi şekilde öğrendiğinizden emin olabilirsiniz. Angular öğrenmek için ön koşullar aşağıdakileri içerir:

HTML, CSS ve JavaScript hakkında sağlam bilgi.

MVC (Model-View-Controller) mimarisinin temel fikri.

Node.js ve npm (Node Paket Yöneticisi) hakkında temel bilgi.

Komut satırı ile çalışma deneyimi.

TypeScript’e maruz kalma.

Yukarıda belirtilen ilk ön koşul, yani HTML, CSS ve JavaScript bilgisi, Angular’ı öğrenmek için gereklidir. Diğer ön koşullar kolayca karşılanabilir ve MVC, Node.js, npm ve komut satırının temellerini oldukça hızlı bir şekilde öğrenebilirsiniz. Ayrıca, JavaScript’i oldukça iyi biliyorsanız, TypeScript’in temellerini öğrenmek sorun olmayacaktır.

Temel HTML, CSS ve JavaScript konularını öğrenin: AngularJS, JavaScript tabanlı bir framework olduğu için öncelikle temel HTML, CSS ve JavaScript bilgilerine sahip olmanız gerekir. Bu konularda eksikleriniz varsa, öncelikle bu konuları öğrenmeniz faydalı olacaktır.

AngularJS belgelerini inceleyin: AngularJS, kapsamlı bir belgelendirme sunar. AngularJS belgelerini okuyarak, framework’ün temel prensiplerini, bileşenlerini ve kullanımını anlayabilirsiniz. Resmi AngularJS belgelerine şu linkten ulaşabilirsiniz: https://docs.angularjs.org/guide/introduction

AngularJS demo uygulamalarını inceleyin: AngularJS belgelerinde, birçok demo uygulama bulunur. Bu uygulamaları inceleyerek, AngularJS’in nasıl kullanılabileceği konusunda daha iyi bir fikir edinebilirsiniz. Demo uygulamalarına şu linkten ulaşabilirsiniz: https://docs.angularjs.org/tutorial

Online eğitim kaynaklarına göz atın: Udemy ve Coursera gibi online eğitim platformları, AngularJS hakkında çeşitli kurslar sunar. Bu kurslar, AngularJS’i öğrenmek için faydalı olabilir. Udemy’de AngularJS kurslarına şu linkten ulaşabilirsiniz: https://www.udemy.com/topic/angularjs/. Coursera’da ise AngularJS kurslarına şu linkten ulaşabilirsiniz: https://www.coursera.org/courses?query=angularjs

Pratik yapın: AngularJS öğrenmek için en önemli şey, pratik yapmaktır. Öğrendiğiniz konuları uygulamalı olarak pekiştirmeye çalışın. Kendi projelerinizi oluşturun ve AngularJS bileşenlerini kullanarak bu projeleri geliştirin.

Topluluklara katılın: AngularJS topluluğu, büyük ve aktif bir topluluktur. Bu topluluğa katılarak, sorularınızı sormak ve diğer kullanıcıların deneyimlerinden faydalanmak için fırsatınız olur. AngularJS topluluğuna şu linkten ulaşabilirsiniz: https://www.reddit.com/r/angularjs/

AngularJS öğrenmek zaman alabilir, ancak yukarıdaki adımları takip ederek, bu süreci daha kolay ve keyifli hale getirebilirsiniz.