AngularJS ile Web Geliştirme: Kapsamlı Başlangıç Rehberi ve Routing

 

AngularJS ile Web Geliştirme: Temeller ve Routing Rehberi

AngularJS, bir zamanlar web geliştirme dünyasında devrim yaratmış, dinamik ve etkileşimli tek sayfa uygulamaları (Single Page Applications - SPA) oluşturmayı kolaylaştıran güçlü bir JavaScript framework'üdür. Bu kapsamlı rehberde, AngularJS'in temellerini, en güçlü özelliklerinden biri olan routing (yönlendirme) mekanizmasını ve modern web uygulamalarını nasıl şekillendirdiğini adım adım inceleyeceğiz.

AngularJS Nedir ve Neden Önemliydi?

AngularJS, Google tarafından geliştirilen ve MVVM (Model-View-ViewModel) tasarım desenini temel alan açık kaynaklı bir JavaScript framework'üdür. Geliştiricilerin HTML, CSS ve JavaScript'i daha verimli bir şekilde kullanarak karmaşık uygulamaları daha organize ve sürdürülebilir bir yapıda kodlamasına olanak tanır.

AngularJS'in popülerliğini sağlayan temel özellikleri şunlardır:

• Veri Bağlama (Two-Way Data Binding): Modeldeki bir veri değiştiğinde, bu değişikliğin otomatik olarak arayüze (view) yansımasını sağlar. Bu özellik, DOM manipülasyon kodunu büyük ölçüde azaltır.
• Direktifler (Directives): 'ng-app', 'ng-model', 'ng-repeat' gibi özel HTML etiketleri veya öznitelikleridir. HTML'e yeni ve özel davranışlar kazandırmamızı sağlarlar.
• Controller'lar (Controllers): Uygulamanın mantığını ve verilerini yönetir. HTML (view) ile JavaScript kodu (model) arasındaki köprüyü kurar.
• Hizmetler (Services): Uygulama genelinde tekrar kullanılabilir iş mantığını (örneğin, bir API'ye istek atmak) barındıran nesnelerdir.
• Filtreler (Filters): Verileri görüntülemeden önce formatlamak için kullanılır (örneğin, tarih formatlama veya para birimi simgesi ekleme).

AngularJS'in Temel Kavramları: Modül, Controller ve Directive

AngularJS ile geliştirmeye başlamadan önce üç temel yapı taşını anlamak kritik öneme sahiptir.

Module (Modül)

Bir AngularJS uygulamasının ana kapsayıcısıdır. Uygulamayı mantıksal parçalara (modüllere) ayırarak kodun daha organize ve yönetilebilir olmasını sağlar. Her uygulama en az bir ana modül ile başlar.

Controller (Denetleyici)

Uygulamanın belirli bir bölümü için veri ve işlevselliği yönetir. Kullanıcı etkileşimlerini dinler, modeldeki verileri günceller ve uygulamanın durumunu kontrol eder.

Directive (Direktif)

HTML'i genişletmek için kullanılan en güçlü özelliklerden biridir. AngularJS, 'ng-bind' veya 'ng-click' gibi birçok yerleşik direktif sunarken, kendi özel direktiflerinizi de oluşturmanıza olanak tanır.

Routing Nedir ve Tek Sayfa Uygulamalarındaki (SPA) Rolü

Modern web uygulamaları genellikle birden çok görünümden veya sayfadan oluşur. Routing, kullanıcının tarayıcıdaki URL'yi değiştirerek bu farklı görünümler arasında gezinmesini sağlayan mekanizmadır.

Tek Sayfa Uygulamalarında (SPA), kullanıcı bir linke tıkladığında sayfanın tamamen yeniden yüklenmesi yerine, sadece ilgili bölümün içeriği dinamik olarak değiştirilir. İşte AngularJS routing tam olarak bu işlevi görür. Bu sayede, sunucuya tekrar tekrar istek göndermek gerekmez ve çok daha hızlı, akıcı bir kullanıcı deneyimi elde edilir.

AngularJS Routing Nasıl Çalışır? ('ngRoute' Modülü)

AngularJS'de routing işlemleri, çekirdek kütüphaneye ek olarak yüklenmesi gereken ngRoute modülü ile gerçekleştirilir.

Çalışma prensibi oldukça basittir:

1. Modülü Dahil Etme: 'ngRoute' modülünü projenize dahil eder ve ana uygulama modülünüze bağımlılık olarak eklersiniz.
2. Route Yapılandırması: '$routeProvider' kullanarak bir yönlendirme tablosu oluşturursunuz. Bu tabloda, hangi URL kalıbının hangi HTML şablonu ('templateUrl') ve hangi 'controller' ile eşleşeceği belirtilir.
3. Görünümü Belirleme: Ana HTML dosyanızda, dinamik içeriğin yükleneceği yeri belirtmek için '<ng-view>' direktifini kullanırsınız.

Bir kullanıcı URL'yi değiştirdiğinde, AngularJS bu tabloya bakar, eşleşen kaydı bulur ve ilgili şablonu ve denetleyiciyi '<ng-view>' etiketinin içine yükler.

Sonuç ve Sonraki Adımlar

Bu makalede, AngularJS ile web geliştirmenin temellerini ve kullanıcı deneyimini kökten değiştiren routing kavramını detaylıca ele aldık. AngularJS, veri bağlama, direktifler ve modüler yapısıyla web uygulamaları geliştirmeyi önemli ölçüde kolaylaştırır.

Önemli Not: AngularJS (versiyon 1.x), artık aktif olarak geliştirilmeyen bir "legacy" framework'tür. Günümüzde modern web geliştirme için TypeScript tabanlı olan ve tamamen yeniden yazılan Angular (versiyon 2 ve sonrası) kullanılmaktadır. Bu makale, AngularJS'in temel mantığını anlamak için harika bir kaynaktır, ancak yeni bir projeye başlıyorsanız güncel Angular sürümünü öğrenmeniz tavsiye edilir.

AngularJS ile ilgili daha fazla bilgi için resmi AngularJS belgelerine göz atabilirsiniz.

İyi kodlamalar