-

Angular Js’de Fonksiyon Çağrısı Yapma

Önceki blog yazımda ng-repeat direktifi kullanarak listeleme ile ilgili örnek göstermiştim. Örneği biraz daha geliştirerek listeye eleman ekleme, listeden eleman çıkarma işleri yapabilmek için fonksiyon çağırma ile ilgili örnek gösteriyor olacağım…

names ismindeki listeye eklemiş olduğum elemanları ng-repeat direktifi ile ekrana listeleme işlemi yapmıştık. Listenin altına bir textbox ve buton ekliyoruz. Textbox’a girilen değeri ng-model=”enteredName” şeklinde saklıyoruz  ve ng-submit=”addName() direktifi ile AddName() ismindeki metodu çağıyoruz. Bu metodun yapacağı names ismindeki listeye eleman eklemek olacaktır. Bunu da

$scope.names.push($scope.enteredName);

Komutu ile yapar.

Diğer bir özellik, listeden eleman silme; bunu da listenin yanına bir link ekleyerek ng-click direktifi ile yine fonksiyon çağırarak yapıyoruz. ng-click=”removeName(name)” ile seçilen name parametresi ile removeName(name) çağırılır. Js tarafında ise aşağıdaki kodlar ile seçilen elemanın indexi bulunur ve listeden çıkarılır.

var i=$scope.names.indexOf(name);

$scope.names.splice(i,1);

Örneğin Html kodu aşağıdaki gibidir;

angularblog1

Örneğin Js kodu aşağıdaki gibidir;

angularblog2

Çıktısı;

angularblog3

Örneğin kodlarına aşağıdaki codepen linkinden erişebilirsiniz.

http://codepen.io/deryagunduzozmen/pen/JWKPQV?editors=1010

Kaynaklar:

  1. https://github.com/curran/screencasts/tree/gh-pages/introToAngular
  2. https://angularjs.org
  3. https://www.youtube.com/playlist?list=PL6n9fhu94yhWKHkcL7RJmmXyxkuFB3KSl
  4. https://www.youtube.com/watch?v=ejBkOjEG6F0#t=34.112198
  5. http://csharp-video-tutorials.blogspot.com.tr/2015/11/angularjs-tutorial-for-beginners.html

Angular Js’de Module ve Controller Kavramları

Önceki yazımda Angular Js ile ilgili genel bilgiler paylaşarak küçük bir uygulama ile giriş yapmıştım. Bu yazıda module ve contoller kavramları üzerinde konuşarak yine basit bir uyglama ile pekişmesini sağlamayı hedefliyorum.

Uyglamanın Angular Js olarak derlenebilmesi için ng-app direktifinin eklenmesi gerektiğinden bahsetmiştim. Uygulamaya sadece ng-app yazarak Angular Js kodu geliştirebiliyoruz ancak yapabileceklerimiz sınırlı olacaktır. Fonksiyonel işler yapabilmek için module ve controller oluşturma ihtiyacı duyarız. Module dediğimiz aslında diğer uygulamalardan bildiğimiz Main() fonksiyonu gibidir.

Module aşağıdaki gibi tanımlayabiliriz;

var myApp=angular.module(‘nameApp’,[]);

Modülümüzün ismi nameApp, html tarafında ng-app=”nameApp” şeklinde kullanıyor olacağız.  Modül tanımındaki ikinci parametre array dir, dependency injection için kullanılabilir.Bir modülün başka bir modül ile bağımlılığı varsa bu alana yazılır, benim göstereceğim örnekte böyle bir durum olmadığından boş bırakıyorum.

Fonksiyonel işler yaptırmak için controller’a ihtiyacımız olacaktır, js tarafında bunun tanımını aşağıdaki gibi yapabiliriz;

myApp.controller(‘NameCtrl’,function($scope) {}

Böylece myApp modülünün controllerının NameCtrl olduğunu belirtmiş olduk, {} bloğu içerisine yapılmasını istediğimiz işleri yazıyoruz. $scope ise objemiz, bu objeye attribute lar atayabiliyoruz, örneğin aşağıdaki gibi names isminde bir array verebiliriz. names ise bizim modelimiz yani datamız olacaktır. Burada tanımladığımız özellikleri html tarafında kullanabiliyoruz. Tanımlanan NameCtrl ismindeki controller html tarafında ng-controller=”NameCtrl” şeklinde kullanılır. Controller ismi yanlış yazılırsa, controller’ı çağıramamış olur, console log a hata basar ve görüntülenmek istenen bilgileri yazıldığı gibi {{   }} içerisinde gösterir.

myApp.controller(‘NameCtrl’,function($scope) {

$scope.names=['Derya','Gunduz','Ozmen'];

});

Js Kodu;

angular1

Html kodu;

angular2

Html kodu içerisnde ng-repeat direktifi kullandım, bu direktif c# daki foreach gibidir, names ismindeki modelimiz içerisinde gezer ve her bir elemanı name olarak adlandırır, name elamanını ekrana liste şeklinde yazdırır. ng-repeat direktifi kullanarak oluşturduğumuz döngünün eleman indexlerini $index ile bulabiliriz, eğer nested, içiçe, döngü yaptıysanız üst indexi $parent.$index şeklinde bulabiliriz. Yani ng-repeat direktifi altında herhangi bir yere $index yazarsak elemanların indexini elde etmiş oluruz.

Çıktısı;

angular3

Göstermiş olduğum örneğin kodlarını aşağıdaki codepen linkinden inceleyebilirsiniz.

http://codepen.io/deryagunduzozmen/pen/ZeONvy

Kaynalar:

  1. https://github.com/curran/screencasts/tree/gh-pages/introToAngular
  2. https://angularjs.org
  3. https://www.youtube.com/playlist?list=PL6n9fhu94yhWKHkcL7RJmmXyxkuFB3KSl
  4. https://www.youtube.com/watch?v=ejBkOjEG6F0#t=34.11219
  5. http://csharp-video-tutorials.blogspot.com.tr/2015/11/angularjs-tutorial-for-beginners.html