AngularJS - Modules and Controllers Yapıları

AngularJS - Module and Controller yapıları uygulamamızda belirli yapıları tutmamızı sağlar.

Module bir uygulamanın farklı bölümlerini tanımlamamızı sağlar. ng-app="" directivinde module ismi yazılır.

Controller kavramını MVC'deki Controller ile karıştırmamak gerekir. Controller, Module'lere ait olan yapılardır. ng-controller="" directivinde ise controller ismi yazılır. Controller'larda fonksiyonlar tanımlayabiliriz.

Module, MVC'deki Controller ise Controller da MVC'deki Action Metotlardır.

Temel kullanım şekli 
<html>
<body ng-app="myApp" ng-controller="myController">
    <div ng-controller="myController2">
      
    </div>
</body>
</html>
<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {
      
    });
    app.controller('myController2', function ($scope) {
      
    })
</script>

<script> tagları arasına yazdığımız app değişkeninde angular.module('myApp',[]) tanımladık. myApp module uygulamanın çalışacağı module parametresidir.

Controller'daki function parametresindeki $scope yapısından bahsetmek isterim.
$scope, Controller ile View arasında nesne taşıyan parametredir. $scope ile veri taşınır veya Controller'da bulunan fonksiyonun çalıştırılmasını sağlar.

Kullanım mantığını anlamak adına bir örnek yapalım.

Kaynak Kodumuz
<body ng-app="myApp" ng-controller="myCont" >
    <p>myCont İsim: {{isim}}</p>
    <p>myCont Soyad: {{soyad}}</p>
    <div ng-controller="myCont2">
        <p>myCont2 İsim:{{isim}}</p>
        <p>myCont2 Yaş:{{yas}}</p>
    </div>
    <p>myCont Yaş:{{yas}}</p>
  
    <input type="text" ng-model="isim" name="name" value=""/>
</body>
</html>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCont', function ($scope) {
        $scope.isim = 'Mert';
        $scope.soyad = 'Metin';
    });

    app.controller('myCont2', function ($scope) {
        $scope.yas = 24;
    })
</script>

Çıktımız

myCont İsim: {{isim}}
myCont Soyad: {{soyad}}
myCont2 İsim:{{isim}}
myCont2 Yaş:{{yas}}
myCont Yaş:{{yas}}



TextBox'ta isim alanına yazı yazabilirsiniz. myCont ve myCont2 adında iki controller'a sahip bir myApp module var. myCont Controller'ında başlangıç değerleri olarak $scope.isim='Mert' ve $scope.soyad='Metin' tanımladık, myCont2 Controller'ında ise başlangıç değeri olarak $scope.yas=24 olarak tanımladık ve verileri taşıyoruz.

Sonucu görüntüleme alanında myCont Yaş alanı boş gelmiştir. Çünkü yas değişkeni myCont2 Controller'ına ait bir değişkendir ve myCont alanında çalışmayacaktır. isim değişkeni ise myCont ve myCont2 controller'ında ortak olduğu için her iki controller da da çalışacaktır.

Bu örnekten çıkaracağımız sonuc Controller ve Module yapıları uygulamalarda farklı yapıları temsil eder ve Controller'larda farklı işleri yapacak veya o işe özel kodları yazabiliriz.

Örneğimizdeki yas değişkeni myCont2 için bir değişkendir. isim değişkeni ise her iki controller için ortak bir değişkendir.



Yorumlar

Yorum Gönder