AngularJS, HTML şablonlarını JavaScript verileriyle birleştirerek etkileşimli web arayüzleri geliştirmeyi sağlayan bir framework’tür. Bu rehber, mevcut AngularJS 1.x uygulamalarını okuyan veya bakımını yapan kişiler için modül, veri bağlama ve routing kavramlarını açıklar.
Destek durumu: AngularJS’in resmî desteği Ocak 2022’de sona erdi. Yeni proje seçimi yaparken bunu dikkate alın; AngularJS ile güncel Angular aynı teknoloji değildir. Resmî AngularJS belgeleri destek durumunu açıklamaktadır.
AngularJS ile Angular arasındaki fark
AngularJS adı 1.x sürüm ailesini ifade eder. Angular ise farklı bir mimariye ve bileşen modeline sahip, gelişimi devam eden framework’tür. AngularJS projesindeki dosyaların yalnızca sürüm numarasını değiştirmek, uygulamayı güncel Angular’a dönüştürmez. Geçiş, kodun ve bağımlılıkların ayrıca değerlendirilmesini gerektirir.
Yeni bir uygulama için güncel Angular belgelerinden başlayabilirsiniz. Eski bir projeyi devraldıysanız önce kullanılan AngularJS sürümünü, eklentileri ve uygulamanın hangi bölümlerinin kritik olduğunu belirlemek daha yararlıdır.
Temel kavramlar
Modül ve controller
Modül, uygulamanın parçalarını ve bağımlılıklarını bir araya getirir. Controller, belirli bir görünümün ihtiyaç duyduğu verileri ve davranışları sunar. Örneğin ürün listesinde gösterilecek öğeler ile arama metni, ilgili controller’ın yönettiği durumun parçaları olabilir.
Direktif ve veri bağlama
Direktifler HTML’e davranış ekler. ng-app uygulamanın başlangıç noktasını, ng-repeat tekrarlanan öğeleri, ng-model form alanıyla model arasındaki bağı belirtmek için kullanılır. İki yönlü veri bağlamada değişiklik hem modelden görünüme hem de uygun form kontrollerinden modele aktarılabilir.
Service ve filter
Service, farklı ekranların paylaşacağı işlemleri bir yerde toplar; API erişimi buna örnektir. Filter ise görüntülenecek veriyi biçimlendirmeye yardımcı olur. Sunucudan veri alma işini her controller’da tekrar yazmak yerine ortak bir serviste toplamak, bakım sırasında değişiklik yapılacak yerleri azaltır.
SPA ve routing nasıl çalışır?
Tek sayfa uygulamasında (SPA) gezinirken bütün HTML belgesinin yeniden yüklenmesi yerine belirli bir görünüm değiştirilebilir. Bu, sunucuya hiç istek gönderilmediği anlamına gelmez: Yeni şablonlar, görseller ve API verileri için ağ istekleri yapılabilir. Hız; veri miktarına, önbelleğe ve uygulamanın tasarımına bağlıdır.
Routing, adres ile görüntülenecek ekran arasındaki eşlemedir. Bir ürün kataloğunu düşünün: /urunler listeden, /urunler/42 ise belirli bir ürünün ayrıntısından sorumlu olabilir. Tarayıcıdaki geri ve ileri düğmelerinin de bu gezinmeyle tutarlı çalışması gerekir.
AngularJS’te ngRoute kurulumu ve akış
ngRoute, AngularJS çekirdeğinden ayrı yüklenen bir yönlendirme modülüdür. Temel akış şöyledir:
- AngularJS ve onunla uyumlu
angular-routedosyasını yükleyin. - Uygulama modülünün bağımlılıklarına
ngRouteekleyin. $routeProviderile yolları şablonlara ve gerekirse controller’lara eşleyin.- Görünümün yerleşeceği alana
ng-viewekleyin. - Eşleşmeyen adres için bir geri dönüş tanımlayın.
Örneğin liste yolunun şablonu urunler.html, ayrıntı yolunun şablonu urun-detay.html olabilir. Kullanıcı ayrıntıya geçtiğinde yönlendirme sistemi uygun görünümü seçer; ürün bilgisini sunucudan alma işi ise ayrıca tanımlanır. Resmî routing öğreticisi ve ngRoute API belgesi yapılandırmanın referanslarıdır.
Bakım sırasında kontrol edilecekler
- Boş görünüm: Modül bağımlılığını, şablon yolunu ve tarayıcı hata mesajlarını inceleyin.
- Yenileyince açılmayan adres: Kullanılan URL biçimini ve sunucunun doğrudan gelen isteği nasıl karşıladığını kontrol edin.
- Yavaş ekran: Tekrarlanan öğe sayısını ve ağ isteklerini ölçün; yalnızca framework adından performans sonucu çıkarmayın.
- Erişim kontrolü: Ekranı gizlemek, sunucudaki veriye erişimi engellemez. Yetki denetimi sunucu tarafında da uygulanmalıdır.
Sık sorulan sorular
AngularJS öğrenmek hâlâ işe yarar mı?
Mevcut bir AngularJS uygulamasını sürdürüyorsanız kodu anlamak için yararlıdır. Yeni web geliştirme öğreniyorsanız HTML, CSS ve JavaScript temellerinden sonra desteklenen araçları değerlendirin.
AngularJS uygulaması hemen kapanır mı?
Resmî desteğin bitmesi uygulamayı otomatik olarak durdurmaz. Ancak resmî bakımın sona ermesi, bağımlılıkları ve geçiş seçeneklerini değerlendirmeniz için önemli bir nedendir.
Geçişe nereden başlanır?
Önce ekranların, servislerin ve dış bağımlılıkların envanterini çıkarın. Kritik kullanıcı akışlarını kaydedin. Daha sonra hangi parçaların birlikte, hangilerinin aşamalı değiştirilebileceğini değerlendirin. Bu çalışma, yeni araç seçimini uygulamanın gerçek ihtiyaçlarına bağlar.
