AngularJS

AngularJS Controller Arası Veri Taşıma

Bu yazıda farklı iki kontrol arasında verinin nasıl taşındığını inceleyeceğiz. Öncelikle veriyi bir kontrol içinde tutup diğer kontrolden çağırmak yerine, veriyi tek bir noktada tutmak gerekiyor. Bunun için angular içinde birden fazla yöntem olmasına rağmen ben kendi servisimini yazıp servis içinde tutmayı tercih edeceğim. Servis içinde oluşturduğum bir veri kaynağı ile veriyi istediğim kontrol içine gönderdip gerekli güncellemeleri yapmam mümkün olacak. Daha önce factory servisi ile ilgili bir yazı yazmıştım. http işlemleri için bu servis konusuna bakabilirsiniz. Bu yazıda kendi servisimi yazıp veriyi kontrol içine alacağım.

Bu kadar açıklamadan sonra kodları yazalım ve açıklayalım.

 

Yukarıda yazdığımız kodları adım adım açıklayacak olursak;

1. Angular modülünü aşağıdaki kod ile oluşturduk.

2. Veri kaynağı olması için kendi servisimizi (kaynakveri)  yazıp içine örnek bir veri ekledik.

3. Sayfada kullanmak için iki tane controller nesnesi oluşturduk.  Controller nesnesi oluştururken dikkat etmemiz gereken  $scope ve kaynakveri parametrelerinin alındığıdır. kaynakveri servisimizi işaret etmektedir. sersivten gelen tüm veriyi $scope.veri içine ekleyip HTML içinde kullanıyoruz.

HTML

Uygulamanın son hali;

Yukarıdaki sade kullanımı materialize css ile şekillendirip aşağıdaki gibi tasarımı şekillendirdim.

ang-app.js: 

 

HTML: Angularjs ve materailze kodları cdn olarak internetten çekilmiştir.

 

Yorum

Yorum Yap