Cuma , 21 Temmuz 2017
Anasayfa » JavaScript » AngularJS » AngularJS Modül Yapısı

AngularJS Modül Yapısı

AngularJS’de Neden Modülleri Kullanırız

Bir modül farklı bölümleri bir arada tutan bir yapıştırıcıdır. Örn: kontroller, servisler, bildirimler, filitreler  bunlardan bazılarıdır.  Bu yazıda controller (kontroller) hakkında bilgi vereceğim. İlerleyen yazılarda servisler, bildirimler, filtreler hakkında makaleler olacak.

Neden Modüller Gerekli

Modülü bir programın main() metodu olarak düşünebiliriz. Programlardaki main metodları bir çok parçayı  bir araya getirir. Bir araya getirilen parçalar burada birleştirilip işlenir.

Angular çalıştığında hangi farklı parçaları bir araya getirmesi gerektiğini ve işleyeceğini buradan öğrenir.

Modül kullanımının  birkaç farklı yaklaşımı var. Bir yazı ile tüm avantajlarını anlamak mümkün değildir. İlerleyen yazılarda yada angular ile daha fazla kodlama yaptıkça  modül kullanmanın  avantajlarını anlayacaksınız.

 

AngularJS’de modül nasıl yazılır

Angularda modülü en basit haliyle  aşağıdaki gibi hazırlayabilirsiniz. Angular module() medodunu kullanarak bir modül hazırlar.  Aşağıdaki kod ile ornekModul adında bir angularjs modülü oluşturulmuştur.

 

  1. İlk parametre modülün adını ifade etmektedir.
  2. İkinci parametre modül için gerekli olan bağımlılıkları yada diğer modülleri ifade eder.

Bir modül başka bir modüle bu şekilde bağlanabilir.  Modül bağımlılıklarını daha sonraki yazılarda değerlendireceğiz. Dikkat etmişsinizdir. Yukarıda yazdığımız modül başka modüller ile bağlantılı değildir. Bu yüzden dizinin içinde herhangi bir değer yoktur.  Modül başka modüller ile bağlantılı değilse boş dizi göndeririz.

AngularJS’de Controller Nedir

Angularda controller bir javascript fonksiyonudur. Controllerin görevi bir view(görüntü) için bir model oluşturmaktır. Model veriyi ifade eder. Gerçek bir uygulamada controller bir servisten yada veritabanından veri çeker.

AngularJS’de Controller Nasıl Oluşturulur

Çok basit, Aşağıdaki gibi bir değişkene fonksiyon atayarak bir controller oluşturabiliriz.

$scope Nedir

Yukarıda yazdığımız controllerda $scope adında bir parametreyi fonksiyona geçirdiğimizi farketmişsinizdir. Angularda biz  $scope anahtarını modeli tutturmak için kullanıyoruz. (Model için gerekli olan metodlar da buna dahil) Tutturduğumuz model ileride görüntü(view) tarafından yakalanacaktır.

Yani controller’a geçtğimiz $scope parametresi modeli tutarak view içinde ulaşmamıza imkan veriyor.

AngularJS’de Controllerı Modüle Nasıl Bağlarız

Controller nesnemizi modüle bağlamak için  modülün nesnesinin controller metodunu kullanıyoruz. İfade karışık gelmiş gibi görünebilir. Aşağıdaki örnek bunu açıklayıcı şekilde yazılmış durumda. Burada oluşturulmuş olan modülün controller metodununa sahip olduğunu bilmek önemli.

 

Tanımlamanın tamamını tekrar yazarsak

 

 

Yukarıda gösterilen kodu aşağıdaki gibi de yazmak mümkündür.

 

Angular uygulaması oluşturuldu peki modül nasıl kullanır?

Ng-app yönergesi ile modül adını ilişkilendirerek kullanırız. (Not: drirective=yönerge)

 

Benzer şekilde ng-controller ilede control adını ilişkilendiriririz.

 

HTML

 

script.js

 

ÖRNEK UYGULAMAYI İNDİR AngularJS ile ilgili diğer yazıları da okumak istermisiniz.

Hakkında Hayri

İlginizi Çekebilir

AngularJS Template (Asp.net WebService)

Bu yazıda oluşturduğumuz ürünler template sayfasını ile veri tabanındaki kayıtları birleştireceğiz. Öncelikle bilmeniz gereken bu …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir