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.


var ornUyg= angular.module("ornekModul", [])

var ornUyg= angular.module("ornekModul", [])

İlk parametre modülün adını ifade etmektedir.
İ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.


var ornekController= function ($scope) {
    $scope.mesaj= "AngularJS Örnekleri";
}

var ornekController= function ($scope) {

$scope.mesaj= "AngularJS Örnekleri";

}

$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.


ornUyg.controller("ornekController", ornekController);

ornUyg.controller("ornekController", ornekController);

Tanımlamanın tamamını tekrar yazarsak


//Model Oluşturma

var uygulama= angular.module("ilkModul", []);



//Controller Oluşturma

var ornekController=function($scope) {

    $scope.mesaj="AngularJS Ornek";

}



// Controllerı modüle kaydettirme

uygulama.controller("ornekController", ornekController);

//Model Oluşturma

var uygulama= angular.module("ilkModul", []);

//Controller Oluşturma

var ornekController=function($scope) {

$scope.mesaj="AngularJS Ornek";

}

// Controllerı modüle kaydettirme

uygulama.controller("ornekController", ornekController);

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


//Modül Oluşturma

var uygulama= angular.module("ornekModul", []);



//Tek seferde controllerı modüle bağlama. En çok kullanılan yöntem
uygulama.controller("ornekController",function($scope) {

 $scope.mesaj="AngularJS Örnek";

});

//Modül Oluşturma

var uygulama= angular.module("ornekModul", []);

//Tek seferde controllerı modüle bağlama. En çok kullanılan yöntem

uygulama.controller("ornekController",function($scope) {

$scope.mesaj="AngularJS Örnek";

});

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)


ng-app="ornekUyg"

ng-app="ornekUyg"

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


ng-controller="ornekController"

ng-controller="ornekController"

HTML


<!doctype html>
<html ng-app="ornekModul">
<head>
<meta charset="utf-8"> 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <script src="script.js"></script>
</head>
<body>

<div ng-controller="ornCtrl">
 {{ mesaj }}
</div>

</body>
</html>

<!doctype html>

<head>

</head>

<body>

</div>

</body>

</html>

script.js


//Modül Oluşturma
var app = angular.module("ornekModul", []);

// Controllerın Modüle Bağlanması
app.controller("ornCtrl", function ($scope) {
$scope.mesaj = "AngularJS Merhaba Dünya";
});

//Modül Oluşturma

var app = angular.module("ornekModul", []);

// Controllerın Modüle Bağlanması

app.controller("ornCtrl", function ($scope) {

$scope.mesaj = "AngularJS Merhaba Dünya";

});

ÖRNEK UYGULAMAYI İNDİR

AngularJS ile ilgili diğer yazıları da okumak istermisiniz.

İlgili

Yorum

AngularJS Controller Yapısı – Yazılım Bilişim Programlama dedi ki:

Şubat 16, 2017, 8:16 pm

[…] Bu yazıda Angular içindeki Controller yapısı ve kullanımını anlatmaya devam edeceğiz. Controller yapısı ile ilgili ilk makalesi okumadıysanız 2. yazıyı okumanızı tavsiye ederim… […]

Cevapla
AngularJS Dersleri | Yazılım Bilişim Programlama dedi ki:

Temmuz 14, 2016, 8:53 am

[…] Konu 2: AngularJS Modül Yapısı […]

Cevapla