AngularJS Controllers nedir, nasıl kullanılır?

AngularJS Controllers nedir? AngularJS Controllers nasıl kullanılır?

AngularJS'de uygulama Controller denen yapılar üzerine kurulur. Controller uygulama içindeki veri akışını kontrol eder.

Controller, içinde özellik ve fonksiyonları barındırdan bir javascript nesnesidir. Her Controller parametre olarak $scope alır.

Aşağıda AngularJS ile bir kontrolör nasıl oluşturulur görebilirsiniz:

Kodun nasıl çalıştığını gör

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="uygulamam" ng-controller="kontrolor">

Ad: <input type="text" ng-model="ad"><br>
Soyad: <input type="text" ng-model="soyad"><br>
<br>
Tam Ad: {{ad + "." + soyad}}

</div>

<script>
var app = angular.module('uygulamam', []);
app.controller('kontrolor', function($scope) {
    $scope.ad = "Uzmanim";
    $scope.soyad = "Net";
});
</script>

Kodu incelemeye en alttan başlayalım. Script ifadesi içinde uygulamam modülüne adı kontrolor olan bir Controller oluşturuluyor. Her Controller $scope adında bir parametre kabul eder.  

$scope nesnesine iki özellik ekliyoruz: ad ve soyad. Sonrada bunlara değer atıyoruz.

Script alanının dışına çıktığımızda, np-app ile uygulamamı tanımlayıp, ng-controller ifadesi ile uygulamanın kullanacağı Controller nesnesi belirleniyor. 

Daha sonra veri bağlama işlemleri ng-model direktifleri ile yapılıyor. ng-model direktiflerinin aldtığı değerler kontrolor içinde tanımladığımız özellik alanları.  AngularJS, MVC yapısını kullanır.

MVC'de isimlendirme çok önemlidir.  ng-model ve özellik adlarının aynı olması, veri bağlamada Controller içinden gelen verinin nasıl bağlanacağını ifade eden bir haritalama.

Bir Controller içinde sadece özellik olmayabilir, Controller aynı zamanda fonksiyon da barındırabilir.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="uygulamam" ng-controller="kontrolor">

Ad: <input type="text" ng-model="ad"><br>
Soyad: <input type="text" ng-model="soyad"><br>
<br>
Tam Ad: {{ad + "." + soyad}}
  <p>
    Buradaki tam ad fonksiyon tarafından üretilecek:
    {{tamad()}}
  </p>

</div>

<script>
var app = angular.module('uygulamam', []);
app.controller('kontrolor', function($scope) {
    $scope.ad = "Uzmanim";
    $scope.soyad = "Net";
    $scope.tamad = function(){
    return $scope.ad + ' '+ $scope.soyad;
  };
});
</script>

Controller içinde tanımlı tamad bir fonksiyonu ifade ediyor. Yaptığı iş ise ad ve soyad ifadelerini birleştirmek. View HTML şablonu içinde tamad fonksiyonunu çağırmak istediğimizde bunu şu şekilde yapıyoruz: {{tamad()}}