Angular Nedir? Mimarisi, Özellikleri ve Avantajları

KaptanTR

Alpha Wolf
17 Nis 2015
1,650
1,583
25

p0qbke2.png

olz75pg.jpeg


Angular Nedir? Mimarisi, Özellikleri ve Avantajları

Dünya çapında milyarlarca insan tarafından sosyal medya, internet ve mobil uygulamaları kullanıyor. Oldukça kullanışlı olan bu uygulamalar sorunsuz bir kullanıcı deneyimi ve arayüzleri sunarak günlük yaşamda bize yardımcı olmaktadır. Bu uygulamalar böyle bir güvenilirliğin veya güven duyulabilirliğin sağlanması için nasıl geliştiriliyor? Bu işleri geliştirme faaliyetleri için yapılan harcamaların bir bölümü web üzerinde uygulama oluşturmayı kolaylaştıran, framework’lere gider.

Bu makalede AngularJS öğrenmek için yerine getirilmesi gereken belirli gereksinimler neler ve Angular JS öğrenme sürecini daha verimli hale getirmek için nasıl bir yol haritası izlenmeli aktarmaya çalışacağız.

a7yw9d0.png


qk4s55e.jpg

Angular Nedir?

Angular, TypeScript ile yazılan ve google tarafından desteklenen açık kaynak bir JavaScript framework’üdür . Anguların temel amacı tek sayfalık uygulamalar geliştirmektir. Aynı zamanda geliştiricilerin birlikte çalışması için standart bir yapı sağlar.
imgres


a7yw9d0.png



nb2hwqi.jpg

Framework Ne İşe Yarar?

Genel olarak framework’er sıfırdan bir veritabanı oluşturarak projeye başlanması gereken durumlar için ideal bir yapı sağlayabilmektedir. Geliştiricilerin kodu sıfırdan yeniden yazmak zorunda kalmamaları için daha yüksek verimlilik sağlayan bir yapıya sahiptir. Framework'ler, yazılım geliştirme sürecinde zaman kazandırıcılardır.


a7yw9d0.png


cokeo4k.jpg

Neden Kullanmalıyım ?

JavaScript temel olarak istemci tarafından betik dili olarak kullanılmaktadır. HTML web sayfasının yapısı ve web sayfasını oluşturan modern uygulamalar geliştirmek için çok uygundur. Yazılım geliştirme sürecinde geliştiriciye belirli görevleri yerine getirmesi amacı ile araçlar sağlayan Framework’ler ve kütüphaneler sağlar. Framework’ler ve kütüphaneler sağlar. Front-end web geliştirmeyi Angular’dan farklı kılan, Angular, geliştiricilerin JavaScript’i bir başına kullanırken karşılaştıkları sorunların bütünsel olarak ele almasa da çoğunu ele alır.

a7yw9d0.png

Angular Sürümleri

Angular, framework'ün türlü sürümleri için her şeyi kapsayan bir terimdir. Angular gerçekten devrimsel bir mimari ile 2009 yılında geliştirildi ve ve birçok yineleme yapıldı. İlk olarak, “Angular 1” olarak tanımlanan ve sonunda AngularJS olarak kategorik sınıfta olan orijinal Angular vardı. Çok geçmeden Angulars 2, 3, 4, 5… 13 geldi ve geliştirme çalışmaları kesintisiz olarak yapılıyor. Sonraki her Angular sürümü, bozuklukları düzelterek, sorunları ele alarak ve mevcut platformların artan karmaşıklığına uyum sağlaması için tüm hata ve sorunları giderir. Mobil cihazlar için uyarlanmış uygulamalar tasarlamak veya daha karmaşık uygulamalar oluşturmak istiyorsanız, Angular’ı mevcut sürüme yükseltmeniz gerekir.

a7yw9d0.png


Angular Ve Anguar Özellikleri Nelerdir?

1. Belge Nesne Modeli

DOM, belgenin dâhili yatını belirli bir düzen içerisinde nesne halinde temsil edilmesini sağlayan bir modeldir. Başka bir deyişle, DOM Belge Nesne Modeli, bir XML ya da HTML belgesini, her sorunun belgenin bir bölümünü temsil ettiği bir ağaç veri yapısı olarak kullanır. Angular, alışılagelmiş yani normal DOM kullanır. Aynı koşullarda HTML sayfasında beş adet kadar bir güncelleme yapıldığını düşünün. Angular, yeni oluşturulanları güncellemek yerine, HTML etiketlerinin durumuna göre değil tüm ağaç yapısını güncelleyecektir.

a7yw9d0.png

2. TypeScript Nedir?

TypeScript, JavaScript’e, kullanıcıların daha hızlı ve anlaşılır JavaScript kodu yazmasına yardımcı olan eksiksiz bir araç setidir. TypeScript kodunun tamamı yeni ortamları hedef alan basit Javascript'e derlenir.Angular uygulamasını geliştirmek için TypeScript kullanılması mecburî değildir. Angular uygulaması geliştirmek için TypeScript kullanılması mecburî değildir. Bununla birlikte, kod temelinin anlaşılmasını ve sürmesini kolaylaştırdığından daha iyi sözdizimsel yapılış sunduğundan şiddetle tavsiye edilir.

a7yw9d0.png

3. Veri Bağlama

Veri bağlantısı dosyası kullanıcıların bir web tarayıcısı kullanarak bir web sayfasınız için, bazı koşamlarında değişiklik yapılmasını sağlayan bir uygulamadır. Dinamik HTML kullanır. Komut dosyası oluşturmak için, karmaşık yazılım programları kullanılmasına gerek yoktur. Veri bağlama, öğreticiler, forumlar, hesap makinelerinin yanı sıra etkileşimli oyunlar içeren web sayfalarında kullanılır. Angular çalışma mantığında, iki yönlü bağlamayı kullanır. Kullanıcı arayüzü olarak bilinen UI (user interface), tercihlerini tahmin edilmesinde ve model durumundaki tüm değişiklikleri yansıtılmasında önemli bir yer tutmaktadır. Bu özgünlük, framework’ün denetimciliği vasıtasıyla DOM’un model donelerine bağlamasını sağlar.


a7yw9d0.png

4. Test

Angular, Unit Testing için Jasmine framework'ü kullanılması birden fazla işlevsellik sağlar. Karma dağıtımı ayarlama, başlatma, raportörler ve test framework’ünü düzenlemek için bir konfigürasyon dosyası kullanan testler için yürütücü görevini üstlenir. Artık Angular’ın temel özelliklerinin farkında olduğunuza göre, Angular ile günlük yaşamda çalışmak istiyorsanız mimarisini ve özelliklerini anlamanız gerekir. Angular’ın modüler yapısını öğrenmek ve Typescript’e de hâkim olmak için mimariye geçelim

a7yw9d0.png


2xnpwkt.jpg


Angular Mimarisi Ve Yapı Taşları


Angular, tam teşekküllü bir model dışyüz denetimcisi (MVC) framework’üdür. Uygulamanın yapılandırma aşaması hakkında rehberlik eder. DOM oluştururken çift yönlü veri akışı sağlar. Aşağıdakiler,
kendi içinde Angular uygulamasının yapı taşlarıdır:

a7yw9d0.png

1.Modüller


Bir Angular uygulamasının, otomatik önyükleme uygulaması başlatmak için AppModule adlı bir kök modülü bulunmaktadır.


a7yw9d0.png

2. Bileşenler


Uygulamadaki bileşenler, veri uygulaması ve verileri tutmak için birleşik bir çerçeve tanımlar. Bir bileşen çoğunlukla kullanıcı tercihlerini öngörmeyi ve bu tercihleri anlayıp yerine getiren bir arabiriminin (UI) bir bölümünü nitelendirir.

a7yw9d0.png

3. Şablonlar


Angular şablonu, HTML öğelerini gösterilmeden önce değişiklik yapılması için Angular işaretlemesini (markup) HTML ile birleştirir. İki ayrı sınıfta veri bağlama vardır:

Olay bağlama

Uygulamanızı güncelleyerek uygulamanızın cihazlarınızda hedef ortama dağıtmak için ortama özgü bir şekilde kullanıcı girişine yanıt vermesini sağlar.

Özellik bağlama

Kullanıcıların, uygulama verilerinden hesaplanan değerleri HTML içine enterpolasyon yapmasına olanak sağlar.

a7yw9d0.png

4. Meta veriler

Meta verileri Angular’da ortak dil çalışma zamanındaki rolünün daha iyi anlaşılması açısından nasıl bir sınıfın işleneceğini söyler. Bir sınıfın beklenen tutumunun yapılandırabilmesi için sınıfı dekore etmek için için kullanmak mümkündür.

a7yw9d0.png

5. Hizmetler

Görünüşüyle ilgili olmayan birleşikler arasında paylaşılması gereken doneleriniz yada mantığınız oluştuğunda, bir hizmet sınıfı oluşturulur. Sınıf daima @Injectible dekoratörü ile ilişkilendirilir.

a7yw9d0.png

6. Bağımlılık Enjeksiyonu

Bu özgünlük, bileşen sınıflarınızı daha dinamik ve verimli bir hale gelmesine olanak tanır. Uygulama istemcisi bir uygulama sunucudan veri almaz, kullanıcı girişini doğrulamak için çeşitli yollar sağlamaz. Konsolda doğrudan doğruya oturum açmaz. Bu görev ve hizmetin yerine, bu tür görevleri hizmetleri yürütmek üzere iş sınıflarına devreder. Angular, açık avantajlara sahipken bazı durumlarda dezavantaj olabilir. Sonraki iki bölümde bunun nedenleri kısaca açıklanmaktadır.

a7yw9d0.png


1xnkrwy.jpg

Angular Kullanmanın Avantajları

Angular’ın sürümleri arasında çok fazla değişiklik oldu, Tüm bu sürümler, framework’ün daha ve verimli çalışmasına ve geliştirilmesinde katkıda bulunmuştur.


a7yw9d0.png

1. Özel Bileşenler

Angular, kullanıcıların işlevselliği uygulama yeniden kullanılabilir stiller uygulamak için parçalar halinde işleme mantığı ile birlikte paketleyebilen kendi bileşiklerini oluşturmasına imkân sağlar. Ayrıca web bileşenleri ile uyumlu çalışmasını ifade eder.

a7yw9d0.png

2. Veri Bağlama

Angular, kullanıcıların sayfalarda dolaşırken, verileri JavaScript kodundan görünüme basit ve işlevsel olarak taşımasını ve manüel olarak herhangi bir kod yazımına gerek kalmadan kullanıcı görüngülerine tepkime vermesini sağlar.

a7yw9d0.png

3. Bağımlılık Enjeksiyonu

Angular, kullanıcıların kapsamlı modül seçeneklerine ihtiyaç duydukları her erişimde bulunmalarını sağlar. Bu, hizmetin kabul edilebilirliği üzerinde test edilebilirliğini ve aynı hizmetlerin ve yeni baştan kullanılabilirliğini artırır.

a7yw9d0.png

4. Test

Testler birinci sınıf araçlar kategorisine girmekle beraber Angular, sıfırdan sıfırdan uygulama test edilebilirliği göz önünde bulundurularak oluşturulmuştur. Uygulamanızın her bölümünü test hedeflerine sahip olacaksınız.

a7yw9d0.png

5. Kapsam

Angular, dinamik web uygulamaları için yapısal bir framework’tür. Sunucu iletişimi, uygulaman içinde görünüşü yönlendirme ve daha fazlası için pratik çözümler sunar.

a7yw9d0.png

6. Tarayıcı Uyumluluğu

Angular, platformlar arasıdır ve birden çok tarayıcıyla uyumludur. Angular uygulaması genellikle tüm tarayıcılarda (Chrome, Edge Firefox,) ve MacOS, Linux ve Windows, ve gibi işletim sistemlerinde çalışabilir.

a7yw9d0.png


t2imrgk.jpg

Angular Sınırlamaları

1. Dik Öğrenme Eğrisi

Angular’ın kullanıcıların bilmesi gereken temel talimatları, bileşenleri, şablonları, modülleri, ve dekoratörleri bulunur. Öte yandan, frameworkeksiksiz dinamik çözüm olduğu için yeni başlayanların öğrenmesi zaman alabilir.

a7yw9d0.png

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

Angular, sınırlı SEO opsiyonları ve arama motorları için zayıf erişilebilirlik sunar. Bunun nedeni Angular’ın doğası gereği istemci yönlü ayıklamayla çalışmasıdır. Ancak Yine de Google bu konu üzerinde geliştirmeler sağlamıştır ve bu yöndeki çalışmalarına devam etmektedir. Özellikle Angular 11versiyonu ile beraber yapılan geliştirmelerde ön işleme modunda çalışması nedeniyle seo dostu ve içeriklerin okunabilirliğini arttırmayı hedeflemişlerdir.

a7yw9d0.png

3. Migrasyon – Taşıma Zorunluluğu

Şirketlerin Angular’ı bu kadar kullanmamalarının en önemli sebeplerinden biri, eski js/jquery tabanlı kodunun Angular stil mimarisine taşınmasının zorluğudur. Ayrıca, her bir yeni sürümün yükseltilme işlemi zor olabilir ve bunların birçoğu geriye uyumlu değildir.

a7yw9d0.png

4. Neden Ayrıntılı ve Karmaşık

Angular topluluğundaki yaygın olan bir diğer bir sorun, framework’ün ayrıntılı düzeyde olmasıdır. Ayrıca diğer front-end araçlara kıyasla daha karmaşıktır.

a7yw9d0.png

Angular Kullanan Şirketler


Google, HBO, Nike, Upwork, ve diğerleri gibi daha pek çok şirket Angular’dan yararlanır.

a7yw9d0.png




 
Son düzenleme:

ByPerPer

Uzman üye
23 Mar 2018
1,986
95
İstanbul
Elinize sağlık, konuyu güzel bir şekilde okudum fakat konuda bazı yazım hataları vs mevcut onları düzenlersiniz diye umut ediyorum. Onun dışında görsel açıdan vs hiç göz yormuyor ve oldukça yararlı. Teşekkürler..
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.