Angular Eğitimi

Angular Nedir? Ne işe Yarar?

Angular, Google tarafından desteklenen, dünya genelinde yazılımcılar tarafından katkı sağlanan açık kaynak kodlu, javascript tabanlı MVC deseni üzerine kurgulanmış bir kütüphanedir. Kısa ifadesi ile; dinamik web uygulamaları için yapısal bir framework’dür. HTML’i şablon dili olarak kullanmamızı sağlar ve uygulamanın bileşenlerini açık bir şekilde ifade etmek için HTML etiketlerini genişletmemize olanak sağlar.

JQuery gibi kütüphanelere ihtiyaç duymaz. Asıl amacı tek bir sayfa üzerinden dinamik olarak geliştirme olanağı sağlar. Benzer yapılı kütüphanelerden en büyük farkı çift yönlü olmasıdır. Yani veride olan bir değişiklik görünümü, görünümde olan değişiklik veriyi değiştirir.

Angular kütüphanesindeki radikal değişim 2.0 sürümünden sonra meydana geldi. Öncelikle framework mimarisi tamamen değiştirildi. Bu fark neredeyse, Java ile Javascript arasındaki fark gibiydi. Aynı zamanda bu değişim isme de yansıdı. 2.0 öncesi sürümler adlandırılırken AngularJS, 2+ sürümleri ise sadece Angular olarak adlandırılmaya başlandı. Böylece Microsoft’un Typescript’ini temel alarak bambaşka bir yapı ile yenilenmiş oldu. Reach gibi bileşen (component) bazlı sistemlerden karşılaştırılmaması da sağlanmış oldu.

Angular 2.0 ile Angular 4.0 oldukça birbirine yakın sürümlerdir. 2.0 sürümünde bazı modüllerin 3.0 ve üstü sürümünden olmasından dolayı, Angular kütüphanesi güncellenirken direk 4.0 sürümüne geçiş yapılmıştır. Bu sürüm atlamanın başka özel bir sebebi yoktur. 4.0 ve üzeri sürümler aynı mimari ile devam ettiği için bu gelişim geliştiricileri pek etkilememektedir.

Typescript, Javascript’in biraz daha fonksiyon tabanlı, özgünleştirilmiş ve genişletilmiş halidir. Tüm javascript kodları typescript içerisinde çalışır. Ama typescript yapısı direk Javascript’e benzemediği için browser üzerinde çalışmaz. Arada bir derleyiciye (Compiler) ihtiyaç duyar.

GÖRSEL EKLE – Angular Yapısı 

Typescript için ayrı bir öğrenme seansı yapmanıza gerek yoktur. Ayrıca, typescript öğrenmek için oturup çalışmanıza gerek yoktur. Angular öğrenirken Typescript e de hakim olacak, TS becerilerinizi değiştireceksiniz.

GÖRSEL EKLE – TS vs JS

Angular’ın Özellikleri ve Avantajları

  • Angular, RIA (Rich Internet Application) oluşturmanıza olanak sağlar. O nedenle, tek sayfa üzerinden çok temiz ve bakımlı bi şekilde uygulama yapabilirsiniz.
  • Temiz bir MVC yöntemi ile JavaScript tabanlı istemci tarafı uygulamalar geliştirebilmenizi sağlar.
  • Angular ile yazılmış uygulama çapraz (Cross) tarayıcı uyumludur.
  • Angular otomatik olarak her tarayıcı için uygun JavaScript kodunu işler.
  • Angular, bakımı kolay bir şekilde tutarak büyük ölçekli ve yüksek performanslı bir web uygulaması oluşturmak için bir çerçevedir.
  • Kodu birim test edilebilir.
  • Geliştirici daha az kod yazar ve daha fazla işlevsellik elde eder.
  • Angular’de, görünümler saf html sayfalardır ve JavaScript ile yazılmış kontrolörler işlemlerini yapar.

Angular’ın Teknik Kavramlar

  • Veri bağlama: Model ve görünüm bileşenleri arasında otomatik olarak veri senkronizasyonu.
  • Kapsam: Bunlar modele referans nesneleri. Denetleyici ve görüntü arasında tutkal gibi davranırlar.
  • Denetleyici: Bunlar belirli bir kapsama bağlı olan JavaScript işlevleridir.
  • Hizmetler: Angular, XMLHttpRequests oluşturmak için $ https: gibi çeşitli yerleşik hizmetler ile birlikte gelir. Bunlar, yalnızca bir kez uygulamada örneklendirilen tek nesnelerdir.
  • Filtreler: Bunlar, bir dizideki öğelerin alt kümesini seçer ve yeni bir dizi döndürür.
  • Yönergeler: Yönergeler, DOM öğelerindeki işaretleyicidir (öğeler, özellikler, css ve daha fazlası gibi). Bunlar, yeni ve özel widget’lar olarak görev yapan özel HTML etiketleri oluşturmak için kullanılabilir. Angular yerleşik yönergelere sahiptir (ngBind, ngModel …)
  • Şablonlar: Bunlar, denetleyici ve modelden gelen bilgi içeren işlenmiş görünümdür. Bunlar, tek bir dosya (index.html gibi) veya “partials” kullanarak bir sayfada birden fazla görünüm olabilir.
  • Yönlendirme: Görüş değiştirme kavramı.
  • Model Görünümü: MVC, bir uygulamayı farklı kısımlara (Model, Görünüm ve Denetleyici olarak adlandırılır) bölmek için bir desen kalıbıdır ve bunların her biri farklı sorumluluklara sahiptir. Angular MVC’yi geleneksel anlamda uygulamıyor, aksine MVVM’ye (Model-View-ViewModel) daha yakındır. Açısal JS takımı, mizahi bir şekilde Model Görünümü olarak bahsetmektedir.
  • Derin Bağlantı: Derin bağlantı, URL’de yer alan uygulama durumunu kodlayarak yer imi eklemenizi sağlar. Uygulama daha sonra URL’den aynı duruma geri yüklenebilir.
  • Bağımlılık Enjeksiyonu: Angular, uygulamanın geliştirilmesini, anlaşılmasını ve test edilmesini kolaylaştırarak geliştiriciye yardımcı olan yerleşik bağımlılık enjeksiyonu alt sistemine sahiptir.