AngularJS Eğitimi #4 – Controller Mantığı

Merhabalar, AngularJS Eğitimi videolarına biraz ara versekte devam ediyoruz.

Bir önceki yazımda belirttiğim gibi haftada en az bir konu, ders girmeye devam edeceğim.

İlk olarak AngularJS Tutorial en iyi AngularJS kaynağı teker teker tüm örnekleri kendiniz yapmanız halinde size uzunca bir yol katettiriyor.

Bende AngularJS Tutorial’daki konu başlıklarına göre anlatmaya çalışıyorum. Bu derste controller ve ng-repeat işlevine bakacağız.

Baştan videoyu izleyelim ben böyle daha çok anlıyorum diyenleri buraya alabiliriz;

Yok ben video değil okumak istiyorum diyenide buraya alabiliriz;

AngularJS Controller Nedir?

Eğer PHP yada ASP.Net dillerinde MVC yapılarında kodlama yapıyorsanız controller tanımlamasını zaten biliyorsunuzdur. Eğer MVC kullanmıyorsanız yeni tanışacağınız bir kişi anlamına geliyor.

Controller: Fonksiyon ve değerler tanımlayarak görünüm(view) kısmında göstermemizi sağlar. AngularJS bunu $scope ile gerçekleştirir.

Şimdi controller’ın ne anlama geldiğini öğrendiysek, nasıl tanımlayacağımıza bakabiliriz.

İlk olarak Modül tanımlamayı biliyoruz. Modülü tanımlayalım.

var App = angular.module('App', []);

Modül tanımından sonra controller tanımlamamıza geçelim.

App.controller('controllerAdı', function($scope){
});

Aslında burada mantığını biraz anlıyoruz. App modülüne controller tanımlayacağımızı söyledik; controller adını yazdık diğer parametre kısmına da bir fonksiyon/method tanımladık.Bu fonksiyonun parametresi olan $scope; Controller gezegeninden View gezegenine bilgi taşıyacak olan parametre olduğunu görebiliyoruz.

Şimdi biraz detaya girecek olursak. Scope değerine kişiler adında bir dizi aktaralım ve jSon formatında bilgi girişi yapalım – json formatı dediğimiz süslü parantezler ile tanım : değer şeklinde yazılan format -.

 

var App = angular.module('App', []);
App.controller('ctrl', function($scope){
   
  $scope.kisiler = [
    {
      'name' : 'Eftal',
      'lastname' : 'Yurtseven'
    },
    {
      'name' : 'Emre',
      'lastname' : 'Yurtseven'
    },
    {
      'name' : 'Ali',
      'lastname' : 'Dinçer'
    }
  ];
  
});

Burada JavaScript kodlarımızı toparladık, peki html kısmında bu kişileri nasıl listeleyebiliriz? Bunun cevabını aramamız gerekiyor. Burada bize yardımcı olacak direktif ng-repeat (controller tanımı için ise ng-controller)

HTML kısmına da bakacak olursak şu şekilde yazabiliriz.


<div ng-app="App">

<div ng-controller="ctrl">
 

<ul>

<li ng-repeat="kisi in kisiler">
 <span>{{kisi.name}}</span>


{{kisi.lastname}}

 </li>

 </ul>


 </div>

</div>



Burada ng-repeat direktifinin içini inceleyecek olursak <div ng-repeat=”deger in degerler”> bir kullanım yapabiliriz.

Şimdi bir üst satıra değer in değerler dediğim kısımdaki değerler alanı controller tanımından sonra $scope.kisiler kisiler olarak tanımladığımız kısımı ng-repeat direktivinin ikinci parametresi olarak tanımlayacağız(in cümleciğinden sonraki kısmı).İlk kısmı nasıl kullanmak istiyorsak o şekilde kullanabiliriz. Ama genel olarak kisi in kisiler gibi ‘singular in plural’ olarak kullanımı gerçekleşir.

Çalışır Hali:

 

See the Pen Angular JS Egitimi #4 by Eftal Yurtseven (@eftalyurtseven) on CodePen.

 

 

Bir Cevap Yazın