AngularJS’de Controller Nedir ve Nasıl Kullanılır?

Merhaba,

Bir önceki AngularJS – Modül Yapısı Nedir ve Nasıl Kullanılır? başlıklı yazımda AngularJS’de modül yapısını ele alırken bir yandan da ucundan kıyısından controller yapısınıda değerlendirmiştik. Şimdi ise AngularJS’de Controller yapısını daha detaylı bir şekilde değerlendireceğiz.

AngularJS’de controller katmanı, esas olarak programatik kısımları kapsayan bir yapı teşkil etmektedir. Bu yapıda; model oluşturabilir, değişken tanımlayabilir, metotlar oluşturup içerisinde işlemler yapabilir ve algoritmik tüm işlevleri inşa edebiliriz.

Yukarıda adresini vermiş olduğum makalede controller yapılarını modül içerisinde tuttuğumuzu incelemiştik. O yüzden eğer incelemediyseniz ilk iş ilgili makaleyi detaylıca okuyunuz. Ardından kaldığınız bu noktadan devam edebilirsiniz.

AngularJS’de bir controller yapısınu aşağıdaki gibi örneklendirebiliriz.

    <script>
        var Uygulama = angular.module("Uygulama", []);
        Uygulama.controller("UygulamaController", function ($scope) {

        });
    </script>

Burada modüle controller fonksiyonu aracılığıyla “UygulamaController” isminde bir controller eklenmektedir.

Controller’da bulunan $scope parametresi aracılığıyla view katmanına taşınacak olan yapılar oluşturulmaktadır.

    <script>
        var Uygulama = angular.module("Uygulama", []);
        Uygulama.controller("UygulamaController", function ($scope) {
            //Değişken tanımlama.
            $scope.Adi = "Gençay";
            //Model tanımlama.
            var Bilgiler = {
                DogumTarihi: 1992,
                Memleket: "Artvin",
                Askerlik: true
            };
            //Modeli taşıma.
            $scope.BilgilerModel = Bilgiler;
            //Fonksiyon oluşturma.
            $scope.YasHesapla = function () {
                return 2018 - Bilgiler.DogumTarihi;
            };
        });
    </script>

Yukarıda görmüş olduğunuz gibi değişken, model ve bir fonksiyonun nasıl oluşturulduğunu görmüş olduk. $scope parametresine “.(nokta)” operatörüyle tanımlanan değişkenlere bu yapılar yukarıdaki gibi atanmaktadır.

Oluşturmuş olduğumuz bu yapıyı aşağıdaki gibi kullanabiliriz.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        var Uygulama = angular.module("Uygulama", []);
        Uygulama.controller("UygulamaController", function ($scope) {
            //Değişken tanımlama.
            $scope.Adi = "Gençay";
            //Model tanımlama.
            var Bilgiler = {
                DogumTarihi: 1992,
                Memleket: "Artvin",
                Askerlik: true
            };
            //Modeli taşıma.
            $scope.BilgilerModel = Bilgiler;
            //Fonksiyon oluşturma.
            $scope.YasHesapla = function () {
                return 2018 - Bilgiler.DogumTarihi;
            };
        });
    </script>
</head>
<body ng-app="Uygulama">
    <div ng-controller="UygulamaController">
        {{Adi}}
        <br />
        {{BilgilerModel.DogumTarihi + " " + BilgilerModel.Memleket + " " + BilgilerModel.Askerlik}}
        <br />
        {{YasHesapla()}}
    </div>
</body>
</html>

$scope parametresindeki yapılara erişmek için view katmanında direkt ilgili yapının tanımlanan adını yazmamız yeterli olacaktır.

Son olarak makalemizin girişiyle bağdaştıracak şekilde bir husustan da bahsetmek istiyorum ki, o da şudur;
Kısa yoldan modül ve controller oluşturmak istiyorsanız eğer aşağıdaki yöntemi deneyebilirsiniz.

    <script>
        var Uygulama = angular.module("Uygulama", []).controller("UygulamaController", function ($scope) {
 
        });
    </script>

Yani direkt olarak module fonksiyonu üzerinden controller fonksiyonunu çağırarakta hareket edebilirsiniz.

Sonraki yazılarımda görüşmek üzere.
İyi çalışmalar dilerim.

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

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

*

Copy Protected by Chetan's WP-Copyprotect.