AngularJS – Modül Yapısı Nedir ve Nasıl Kullanılır?

Merhaba,

AngularJS, bir tek sayfa üzerinde etkileşim sağlayabilmemiz için birbirinden bağımsız farklı parçalar üzerinde bizlere çalışma imkanı vermektedir. Dolayısıyla bu parçaları bir bütün olarak bir araya getirme ihtiyacı doğduğu vakitte de devreye modül yapıları girmektedir. İşte farklı yapıları/bölümleri/parçaları vs. bir arada tutma ya da bir araya getirme görevini icra eden mekanizmamız modül yapısıdır.

Modül Yapısı Nedir?

C#, Java vs. dillerinden Main() metodunu bilirsiniz ki, uygulamadaki birbirinden bağımsız birçok parçayı bir araya getirme görevine sahip bir Thread’dir. AngularJS bir Main fonksiyonu barındırmadığına göre birbirinden farklı parçaları bir araya getirme görevini modül yapısı yüklenmekte ve işlemektedir.

AngularJS’de Modül Nasıl Oluşturulur?

Bunun için aşağıdaki prototipi inceleyebilirsiniz.

var [Modülü Temsil Edecek Değişken] = angular.modul("Modül Adı", []);

Yukarıdaki prototipte angular.modul() fonksiyonu ile modül tanımlanmaktadır. Fonksiyonun ilk parametresi modülün adını temsil ederken, ikinci parametre modül için gerekli olan bağımlılıkları ya da diğer modülleri ifade eder. Bu parçalar birden fazla olabileceğinden dolayı bunları bir diziyle tanımlamamız gerekecektir. Yani buradan anlayacağımız ikinci parametre bir modülü farklı bir modül ya da yapıyla bağlamamızı sağlayacak işlevselliğe sahiptir. Bu prototipte başka modüller ile bağlantı olmadığından dolayı boş bir dizi gönderilmektedir. Bu konuya sonraki yazılarımızda değineceğiz.

Şimdi de içeriğin devamını getirebilmek ve bir bütün olarak sonlandırabilmek için controller yapısı üzerinede biraz giriş yapalım.

AngularJS’de Controller’ın Görevi Nedir? ve Nasıl Tanımlanır?

AngularJS’de controller dediğimiz mekanizma aslında teknik olarak bildiğimiz bir JavaScript fonksiyonudur. Conroller’ın görevi bilinen klasik MVC mimarisindeki işleyişin birebir aynısıdır. İçerisinde modeli işlemekte, programatiksel işlemleri gerçekleştirmektedir. Ve nihayetinde yapılan çalışmanın neticesini View’e yansıtmaktadır.

Aşağıda bir controller yapısının nasıl oluşturulduğu örneklendirilmiştir.

    <script>
        var OrnekController = function ($scope) {

        }
    </script>

Görüldüğü üzere bildiğimiz JavaScript fonksiyonu oldu bize AngularJS controllerı 🙂

Gerçi burada muhtemelen sizinde dikkatinizi çeken bir $scope parametresi mevcuttur.

Peki nedir bu $scope parametresi?
Controller ile View arasındaki köprüdür diyebiliriz. Hani Asp.NET MVC mimarisinde controllerdan viewe gönderilen modeli viewde @model keywordü ile yakalıyoruz ya hah işte bu yapının AngularJS’de ki karşılığı $scope parametresidir.

AngularJS’de Controller İle Modülü Birbirine Bağlama

İşte şimdi asıl meselemize geldik. Oluşturduğumuz modül ile controller arasında nasıl bir bağ kuracağımızı inceleyeceğiz.

Bu işlem için oluşturduğumuz modülün controller fonksiyonunu kullanmamız yeterli olacaktır.

    <script>
        //Modül oluşturuluyor.
        var Uygulama = angular.module("UygulamaModulu", []);
        //Controller oluşturuluyor.
        var OrnekController = function ($scope) {
            
        }
        //Modüle controller ekleniyor.
        Uygulama.controller("ornekController", OrnekController);
    </script>

Benzer mantıkla modüle eklenecek controller aşağıdaki gibi fonksiyonu kullanma anında da tanımlanabilir.

    <script>
        //Modül oluşturuluyor.
        var Uygulama = angular.module("UygulamaModulu", []);

        //Modüle controller ekleniyor.
        Uygulama.controller("ornekController", function ($scope) {
            
        });
    </script>

AngularJS Uygulamasında Modül ve Controller Kullanımı

Son olarak şu ana kadar üzerine yoğunlaştığımız yapıların bütünsel nasıl kullanılacağını örnek bir proje üzerinden inceleyelim.

<!DOCTYPE html>
<html ng-app="HesapMakinesi">
<!-- Modül ng-app direktifine veriliyor.  -->
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        //Modül oluşturuluyor.
        var Uygulama = angular.module("HesapMakinesi", []);
        //Controller oluşturuluyor.
        var HesapController = function ($scope) {
            var DegerlerModel = {
                Sayi1: 0,
                Sayi2: 0
            };
            $scope.Hesapla = function (Sayi1, Sayi2) {
                if (Sayi1 != null && Sayi2 != null)
                    return Sayi1 * Sayi2;
                return 0;
            };
        }
        //Modüle controller ekleniyor.
        Uygulama.controller("HesapController", HesapController);
    </script>
</head>
<body>
    <div ng-controller="HesapController">
        <!-- Modele eklenen controller ng-controller direktifine ekleniyor.  -->
        Sayı 1 = <input type="text" ng-model="DegerlerModel.Sayi1" /><br />
        Sayı 2 = <input type="text" ng-model="DegerlerModel.Sayi2" /><br />
        <strong ng-bind="Hesapla(DegerlerModel.Sayi1, DegerlerModel.Sayi2)"></strong>
    </div>
</body>
</html>

Yukarıdaki çalışmada basit bir matematiksel işlemi yapabilmek için bir AngularJS temelli inşa oluşturmuş bulunmaktayız.
AngularJS - Modül Yapısı Nedir ve Nasıl Kullanılır

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

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. 10 Mart 2018

    […] ö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 […]

Bir cevap yazın

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

*

Copy Protected by Chetan's WP-Copyprotect.