Eki.20

AngularJS (1.3 / 1.5) Eğitimi: Şablon (Template), Modüller (Module) ve Kontroller (Controller)

MVW modeline göre Controller, yani VIEWMODEL ayrı tutulmalıdır. Bu nedenle AngularJS komutlarımız harici bir kaynaktan HTML5 sayfası içine çekilerek (yine js dosyası) kullanılmalıdır. Şimdi basit bir şablon yapısı ile AngularJS’de MVM modeline göre bir Template, Controller ve Module kavramları nelerdir ve oluşturma mantıklarına bakalım. İlerleyen konularda da bol bol pratik yapacağız.

Template

Bir web projesi oluştururken, sadece bir değil birden fazla HTML (veya PHP, ASPX gibi) gibi sayfaya ihtiyaç duyarız. Daha önceki örneklerimizde olduğu gibi html etiketlerinde ng-app ile bir tanımlama yapıp sayfayı AngularJS’nin kapsama alanına alıyorduk. İşte bu alınan her bir kapsama alanı bir Template olmaktadır. Yine tek bir template kullanılabileceği gibi birden fazla template de kullanılabilir.

Template tanımlarken ng-app’nin değerini de belirtebiliriz. Mesela;

<html ng-app=”anasayfa”> 

gibi.

Artık bu template anasayfa ismi ile anılacaktır.

Bir sayfa içinde tek bir template tanımlanabileceği gibi birden fazla template de tanımlanabilir.

<div ng-app=”uyegiris” > </div>
<div ng-app=”uyekayit” > </div>

Module

Tanımlanan her bir şablon için bir modül tanımlanmalıdır. Modül ile şablon birbiri ile ilişkilendirilmelidir. Şablon işin VIEW kısmını, modül ise VIEWMODEL kısmını üstlenir.

Bir template’ye modül bağlamak için şu yöntem izlenir.

var modulIsmi = angular.module( "templateIsmi", [] );

Bu yapı ile artın ng-app ile tanımlanmış şablona bağlanmış olunur.

Çoklu Module ve Module Birleştirme

Az önce her bir şablon için en az bir modül olması gerektiğinden bahsettik. Ancak bir şablon için birden fazla modül de olabilir. Modülleri birleştirmek için şu yöntem uygulanır.

angular.module("kombineModul", ["modul1", "modul2"]);

Bu şekilde modul1 ve modul2 birbiri ile kombine olmuş ve tek bir çatıda kombineModul ismi ile birleşmiş. Daha önceki örneklerimizde modül kullanımların işlemiştik, şimdi bir de birleşik modüllerle örnek yapalım.


<!DOCTYPE html>
<html>
    <head>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js">
       </script>           
        
       <script>
          var modul1 = angular.module("modul1", []);
          modul1.controller("kontrol1", function($scope) {
              $scope.deger = "Merhaba";
          });
          var modul2 = angular.module("modul2", []);
          modul2.controller("kontrol2", function($scope) {
              $scope.deger = "AngularJS";
          });
          angular.module("kombineModul", ["modul1", "modul2"]);
        </script>
    </head>
    <body ng-app="kombineModul">
        <div>
            <div ng-controller="kontrol1">
                {{ deger }}
            </div>
        </div>
        <div>
            <div ng-controller="kontrol2">
                {{ deger }}
             </div>
        </div>
    </body>
</html>

Örnekte body etiketine şablona ng-app ile kombineModul adında bir modül ataması yapıldı. Bu modül de, iki adet olan (kontrol1 ve kontrol2) alt

’lere uygulandı.

Controller ve $scope

Örneklerimiz içinde Controller ve $scope kullanımlarını sıkça gördünüz. Şimdi bunların tanımlarına bakalım.

Controller; bildiğimiz fonksiyon yapıları, bir diğer bakış açısıyla modül içindeki metotlardır. Modül içinde Controller tanımlanır ve herhangi bir DOM elementinin ng-controller direktifi ile ilgili Controller’a doğrudan çift taraflı olarak (data binding) bağlanılır.

<div ng-controller=”kontrolIsmi” > </div>

Bir Controller’a bağlanınca da o Control içinde yapılan işlemlerin sonuçları $scope yardımı ile tekrar DOM’a aktarılır. Yani $scope, data binding yapısını kuran aracıdır. Bir nevi API’dir.

DOM üzerindeki bir input’tan alınan değer, modül içindeki bir Controller’a $scope sayesinde iletilir. Controller’dan da üretilen değerler yine $scope sayesinde DOM’a aktarılır.

Bir Controller tanımlarken dikkat ettiyseniz, Controller ismini tanımladıktan sonra ikinci parametre olarak hep function($scope){ değerini kullandık. Böylelikle çift taraflı veri akışı sağlandı. Controller içinde de bir değer ataması yaparken (ng-model ile tanımlanmış değişkenler) mutlaka başlarına $scope. referansı eklenmiştir.

$scope; VIEW ile VIEWMODEL arasındaki köprüyü kurar. VIEW’den alınan değer önce $scope’a, $scope’tan da VIEWCONTROLLER’a aktarılır. Ancak VIEWCONTROL’de üretilen değer doğrudan VIEW’a aktarılır.

modulIsmı.controller("kontrolIsmi", function($scope) {
         $scope.deger = "AngularJS";
});

Aşağıdaki şemada Controller ile $scope ilişkisi daha iyi anlatılmıştır, inceleyin…

Şimdi bu şemayı AngularJS kodu haline getirelim.

<!DOCTYPE html>
<html>
    <head>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js">
       </script>      
     
        
       <script>
          var uygulama = angular.module("uygulama", []);
          uygulama.controller("isimAta", function($scope) {
              $scope.isim = "AngularJS";
          });
        </script>
    </head>
    <body ng-app="uygulama" >
        <div>
            <div ng-controller="isimAta" >
                {{ isim }}
            </div>
        </div>
    </body>
</html>
 
İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum